How to best make a hover navbar?


Tags: javascript,html5,css3

Problem :

How to make a navigation bar like dabblet that drops down on hover?

http://sampsonblog.com/289/of-dice-dabblet-and-css

Notice how when you mouse over "All" it appears to drop down from the top of the page. I know it is possible by making two divs with css position absolute such that "all" and "content" are positioned approrpiately:

<div id="content">-All content that would come with the dropdown here/div>
<div id="all">All</div>

Then using jquery to attach hover events to animate "all" and use an animation to cause "all" and "content" css to dropdown (I have two update the position of two separate dom eleements). Is there some better way to structure it in the dom and potentially use CSS3 only to accomplish this than described and/or a better way to structure the dom such that I dont have to update both the position of content and all?



Solution :

Id surely would not doing it with javascript or jQuery, because its all possible with CSS3 only

here an example or check out the fiddle http://jsfiddle.net/mpaas/:

#naviWrapper {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

    position:absolute;
    top:-200px;
    height:200px;
    left:0px;
    right:0px;
    background:#ccc;
}

#naviWrapper:hover {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

    top:0px;
}

#naviButton {
    position:absolute;
    bottom:-60px;
    left:50%;
    margin-left:-50px;
    width:100px;
    height:60px;
    background:#000;
    color:#fff;
    text-align:center;
}


<div id="naviWrapper">

    <div id="naviButton">Hover!</div>

</div>

This works, because the button element is a child of the wrapper, so on hovering the naviButton, it will call a hover on the wrapper element, which animates through the queries given in on the top of the css styles.


    CSS Howto..

    How to set froala to calc height using css

    how to override left:0 using CSS or Jquery?

    how to get by title attribute

    How can I select second element and after that in CSS?

    How to stop image shrinking when page is resized horizontally in CSS

    How to apply global styles with CSS modules in a react app?

    How to create a table inner bevel in HTML/CSS?

    CSS how to target background and make it transparent

    How can I center a div within another div?

    how to animate with CSS?

    How does floating and clearing on the same element work?

    How to set parent div height to self adapt to the inner div height?

    How can I make my an image?

    How to make Google Preview Button display in a CSS pop-up?

    How to get the CSS attributes from a control located by XPath using Selenium IDE

    How to make sure my css overlay is on top at any site?

    How to style a div to be a responsive square? [duplicate]

    How to create circle image and text Which are complementary to each other in bootstrap or pure css?

    How can i concatenate the following css string in php without creating another variable or breaking the string?

    How can my website store strings locally? [closed]

    How to make my first-child in css work properly?

    How to bound CSS3 animation to class

    How to create a responsive sprite sheet animation in css?

    How to change label using CSS?

    How do you achieve this backwards div effect? [closed]

    How to center without the
    tag using CSS?

    How to put text and image in a same line?

    CSS question how to make one div appear over another?

    How to add a sliding div to these CSS Message Bubbles?

    How to make a css compatible by all browser