.header {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:50px;
        z-index:2
}    
.menu ul {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        -webkit-transform:translateY(-100%);
        -moz-transform:translateY(-100%);
        transform:translateY(-50%);
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

    .menu ul.is-visible {
        -webkit-transform:translateY(50px);
        -moz-transform:translateY(50px);
        transform:translateY(50px)
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

The above is the CSS I use to toggle a menu open/close using a transition element for a sliding down/up effect.

Currently the menu slides from the top of the header; is it possible for it to slide from the bottom of the header which is 50px from the top?

I'm still trying to learn how to use transition, so any advice is much appreciated.

Thanks!

.header {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:50px;
        z-index:2
}    
.menu ul {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        -webkit-transform:translateY(-100%);
        -moz-transform:translateY(-100%);
        transform:translateY(-50%);
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

    .menu ul.is-visible {
        -webkit-transform:translateY(50px);
        -moz-transform:translateY(50px);
        transform:translateY(50px)
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

The above is the CSS I use to toggle a menu open/close using a transition element for a sliding down/up effect.

Currently the menu slides from the top of the header; is it possible for it to slide from the bottom of the header which is 50px from the top?

I'm still trying to learn how to use transition, so any advice is much appreciated.

Thanks!

• javascript
• jquery
• css
• transition

3 Answers 3

Is this what you want?

DEMO

You didn't provide your markup, so I had to guess. Basically, if you wrap the li text in a span and give it a background color to match the color of the header (navigation bar), you can obscure the menu as it drops into place.

Also, I didn't bother with the floating and absolute positioning. Again, I don't have the benefit of seeing your actual markup, but it was unneeded to acplish this particular layout.

header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:50px;
    background-color: yellowgreen;
    font-family: sans-serif;
}
a {
    color: yellowgreen;
    text-decoration: none;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.menu > li {
    float: left;
    line-height: 50px;
    text-align: center;
    color: white;
    width: 150px;
}
li span {
    height: 50px;
    width: 100%;
    display: block;
    background-color: yellowgreen;
    position: relative;
    z-index: 100;
    cursor:pointer;
}
ul.menu > li > a {
    color: white;
}
li > ul {
    background-color: white;
    color: yellowgreen;
    text-align: left;
    -webkit-transform:translateY(-200%);
    -moz-transform:translateY(-200%);
    transform:translateY(-100%);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
li > ul > li {
    border: 1px solid yellowgreen;
    border-top: none;
    padding: 0 10px;    
}
li:hover ul {
    opacity: 1;
    -webkit-transform:translateY(0px);
    -moz-transform:translateY(0px);
    transform:translateY(0px) -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

<header>
    <ul class="menu">
        <li><span>Menu Item 1</span>
            <ul>
                <li><a href="#">Submenu Item 1</a></li>
                <li><a href="#">Submenu Item 2</a></li>
                <li><a href="#">Submenu Item 3</a></li>
                <li><a href="#">Submenu Item 4</a></li>
                <li><a href="#">Submenu Item 5</a></li>
            </ul>
        </li>
        <li><span>Menu Item 2</span>
            <ul>
                <li><a href="#">Submenu Item 1</a></li>
                <li><a href="#">Submenu Item 2</a></li>
            </ul>
        </li>
        <li><a href="">Menu Item 3</a></li>
        <li><span>Menu Item 4</span>
            <ul>
                <li><a href="#">Submenu Item 1</a></li>
            </ul>
        </li>        
    </ul>
</header>

First of all: .menu ul.is-visible already has "transition" property inherited from .menu ul, so you don't have to set it once again. Secondly, try setting top property of .menu ul.is-visible to 50px, but with no transition on it (so you can't use transition: all t, but e.g. transition: transform t)

EDIT: If you could put your code on jsFiddle, I would be very pleased.

UPDATE:

DEMO

I've managed to fix this by putting copy of .menu ul into new div.menu element that's placed before .header and both are placed in new header.nav-header. It works, but I believe it could be done easier.

Can't ment yet, but did you try putting 100px instead of 50px in here:

-webkit-transform:translateY(50px);
        -moz-transform:translateY(50px);
        transform:translateY(50px)

Let me know how it goes, I will investigate to remember how to do it! Long time since I don't use that!

UPDATE:

Try this:

.menu ul {
        position:absolute;
        top:50px;
        left:0;
        width:100%;
        -webkit-transform:translateY(-100%);
        -moz-transform:translateY(-100%);
        transform:translateY(-50%);
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

Setting top to 50px, should move the menu 50px from the top, so it would start scrolling down from the bottom of the header.

If not, try it with jQuery. Set the menu where you want it to be when it fully scrolls down, and then hide it with hide(). Then in a easy click() function u set the efect that you want it to have (fadeIn, scroll, whatever) and you show it with a show().

If you need more detailed jQuery code tell me and I write it for you. Good Luck! ;)

UPDATE2:

I did a Fiddle example with jQuery (very basic):

http://jsfiddle/3DvVL/1/

The speed of the jQuery effect is set to 800, you can modify it. Same with the effect itself. Also the button I took was for quick demonstration, you can take whatever you want, as long as you point it through name, ID or class in the jQuery.