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 layout a form with 1 input field + submit button so that
    and
    backgrounds do not shine through?

    How to style placeholder text color for individual text field?

    How to set
  • Backgound color?
  • How does reddit create the top header without any margins?

    How is this menu icon created only with CSS?

    CSS - How to upscale Unicode arrows?

    CSS - want to remove a blank space but have no idea how to get rid of it?

    How would you style this html so that everything falls into a table?

    How Do you combine CSS code to an HTML code? I want to Combine them? [closed]

    How do i make part of a CSS background fit perfectly to a browser

    How can

    be centered and justified?

    How to float left without wrapping to next line?

    how to make two functionality in one button.CSS BOOTSTRAP

    How to overide CSS style of a class using jquery? [closed]

    How to make this arrow in CSS only?

    How to select only top-level li in recursive menu?

    how to avoid duplicate css when using vendor prefixes?

    How to use center-block and vertical align together using Bootstrap?

    How to change url of image which is generated dynamically just by using CSS and media queries?

    How to align a

    into

    or when content it is dynamic?

    How to do jasmine test case for display none css property using documet.getElementById and getElementsByClassName

    How can I have a responsive height with absolutley position child elements

    How to change font on css?

    How to make TD behaving like TR(row) with CSS?

    How to align an iframe horizontally (in the centre of the screen) with CSS?

    How to style
    to have multiple colors?

    How do I center a button in an angular-ui-grid cell?

    How to set css styles with variables in rails if certain item is selected?

    In Firebug, how to tell what is overriding a style?

    Jquery show/hide more data