MyBB Community Forums
DropDown Menu - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: DropDown Menu (/thread-93720.html)

Pages: 1 2

DropDown Menu - Hitman - 2011-05-06

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.

RE: DropDown Menu - Vocaloid - 2011-07-29

Very nice tutorial!

RE: DropDown Menu - Dragonzsoul - 2011-07-30

thank share to tutorial Smile nice!

RE: DropDown Menu - GonickPT - 2011-08-02

Could you show some outcome?
Thanks for the tutorial anyway Wink

RE: DropDown Menu - Fluffybunny - 2011-08-02

I use Chrome CSS Dropdown Menu.

RE: DropDown Menu - Nishimi - 2011-08-04

This is a pretty good tutorial. I might try this out sometime, thanks for this.

RE: DropDown Menu - Claire - 2011-08-11

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.

RE: DropDown Menu - Concon - 2011-08-11

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".

RE: DropDown Menu - Euan T - 2011-08-11

(2011-08-11, 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.



RE: DropDown Menu - Joenn A. - 2011-08-15

Same as here
http://forums.mybbcommunity.com/thread-329.html
Other than that thanks.