Thread Rating:
  • 1 Vote(s) - 4 Average
  • 1
  • 2
  • 3
  • 4
  • 5
DropDown Menu
#1
I know its simple but i see so many people ask how to do it.

Add this to your header (edit as you need).
    <ul id="nav">
        <li><a href="#">Home</a>
            <ul>
                <li><a href="#">Hover 1</a></li>
                <li><a href="#">Hover 2</a></li>
                <li><a href="#">Hover 3</a></li>
                <li><a href="#">Hover 4</a></li>
            </ul>
        </li>
        <li><a href="#">Nav 1</a>
            <ul>
                <li><a href="#">Hover 1</a></li>
                <li><a href="#">Hover 2</a></li>
                <li><a href="#">Hover 3</a></li>
                <li><a href="#">Hover 4</a></li>
            </ul>
        </li>
        <li><a href="#">Nav 2</a>
            <ul>
                <li><a href="#">Hover 1</a></li>
                <li><a href="#">Hover 2</a></li>
                <li><a href="#">Hover 3</a></li>
                <li><a href="#">Hover 4</a></li>
            </ul>
        </li>
        <li><a href="#">Nav 3</a>
            <ul>
                <li><a href="#">Hover 1</a></li>
                <li><a href="#">Hover 2</a></li>
                <li><a href="#">Hover 3</a></li>
                <li><a href="#">Hover 4</a></li>
            </ul>
        </li>
        <li><a href="#">Nav 4</a>
            <ul>
                <li><a href="#">Hover 1</a></li>
                <li><a href="#">Hover 2</a></li>
                <li><a href="#">Hover 3</a></li>
                <li><a href="#">Hover 4</a></li>
            </ul>
        </li>
    </ul>

Add this to your css (edit as you please).

#nav a {color:#fff; text-decoration:none;}
#nav { float:left; width:100%; background:#111; margin:0; padding:0; color:#fff;}
#nav li {float:left; list-style:none; padding:10px; position:relative;}
#nav li:hover {background:#f9f9f9;}
#nav li:hover > a {color:#000;}
#nav li ul {display:none; position:absolute; background:#111; border-top:2px solid #222; top:100%; left:0; margin:0; padding:0;}
#nav li ul li {min-width:150px;}
#nav li:hover ul {display:block;}

Hope this helps if you suffering to build one.
Reply
#2
Very nice tutorial!
Reply
#3
thank share to tutorial Smile nice!
Reply
#4
Could you show some outcome?
Thanks for the tutorial anyway Wink
Reply
#5
I use Chrome CSS Dropdown Menu.
Reply
#6
This is a pretty good tutorial. I might try this out sometime, thanks for this.
- Nishimi Cool [I'm back to MyBB, woot!]
Latest MyBB Plugin: ---
Reply
#7
It's nice, but it's not really much of a tutorial without explanation of how the HTML and CSS work together to make the drop-down menu.
I'm not even angry. I'm being so sincere right now, even though you broke my heart and killed me. And tore me to pieces, and threw every piece into a fire.
Reply
#8
I think I can explain it, although I would have done it differently.

#nav li ul {display:none; position:absolute; background:#111; border-top:2px solid #222; top:100%; left:0; margin:0; padding:0;}

the positioning and the "top" properties work together, so that when you don't hover over the list the menu isn't there, but when you do, it appears, the "100%" puts the menu off screen when not hovered.

I think that's how it works, as I use
left: -999;
to make my drop menus rather than "top".
- Connor L.
codiciousdesigner
.ocean-surface { position: relative; } #titanic { float: none; position: absolute; top: -3800m; }
Reply
#9
(08-11-2011, 09:49 PM)Concon Wrote: I think I can explain it, although I would have done it differently.

#nav li ul {display:none; position:absolute; background:#111; border-top:2px solid #222; top:100%; left:0; margin:0; padding:0;}

the positioning and the "top" properties work together, so that when you don't hover over the list the menu isn't there, but when you do, it appears, the "100%" puts the menu off screen when not hovered.

I think that's how it works, as I use
left: -999;
to make my drop menus rather than "top".

Actually, the display: none; hides the menu in it's inactive state. The top property is used with the absolute positioning to position the menu.

Also, I wouldn't advise using "left: -999;" as the menu may still show for people with large monitors. I've never seen anybody do such a thing to hide elements either.

Reply
#10
Same as here
http://forums.mybbcommunity.com/thread-329.html
Other than that thanks.
Hi!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)