Choose from our various pricing plans. There is a package for everyone!


Tutorial: CSS Drop Down Menu

View previous topic View next topic Go down

Tutorial Tutorial: CSS Drop Down Menu

Post by Mati™ on Wed Jul 25, 2012 3:11 pm

In this tutorial you will learn how to create a professional looking drop down menu. It's just a regular nested UL list, turned into a drop down menu using CSS only.

The HTML Code:
Code:
<div id="topnav">
 <li><a href="#">Home</a></li>
 <li><a href="#">Help</a></li>
 <li><a href="#">Categories ▼</a>
    <div class="topnavsub-category">
        <ul>
        <li><a href="#">Sub Nav Link</a></li>
        <li><a href="#">Sub Nav Link</a></li>
        <li><a href="#">Sub Nav Link</a></li>
        <li><a href="#">Sub Nav Link</a></li>
        <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </div>
 <li><a href="#">Advertise</a></li>
 <li><a href="#">Tutorials ▼</a>
    <div class="topnavsub-category">
        <ul>
        <li><a href="#">Sub Nav Link</a></li>
        <li><a href="#">Sub Nav Link</a></li>
        <li><a href="#">Sub Nav Link</a></li>
        <li><a href="#">Sub Nav Link</a></li>
        <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </div>
 <li><a href="#">About Us</a></li>
 <li><a href="#">Contact Us</a></li>
 <li><a href="#">Extra Links ▼</a>
    <div class="topnavsub-category">
        <ul>
        <li><a href="#">Sub Nav Link</a></li>
        <li><a href="#">Sub Nav Link</a></li>
        <li><a href="#">Sub Nav Link</a></li>
        <li><a href="#">Sub Nav Link</a></li>
        <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </div>
</div>

Now we need to style it with css in order to create this unique drop down menu.

The CSS Code:
Code:
#topnav {
    z-index:3000; /* IE7 Bug */
    font-family: Verdana,Arial,Sans-Serif;
    border: 1px solid #316AC5;
    margin: 50px 200px!important;
}

#topnav, #topnav ul {
 padding:0;
 margin:0;
 font-size:13px;
 font-weight:bold;
 color:#FFF;
 list-style: none;
 border-right:0px;
        float: left;
}

#topnav li {
 float:left;
 margin:0;
}

#topnav a {
 display:block;
 color:#3B5998;
 border:0px;
 border-right:1px solid #316AC5;
 border-bottom:0px;
 padding:8px 15px;
 background:#DFF1FF;
 text-decoration:none;
}

#topnav li .topnavsub-category {
 display:block;
 position: absolute;
 left: -4999px;
 background:#DFF1FF;
 z-index:2000001;
 border:1px solid #316AC5;
 margin-left:-1px;
}

#topnav li .topnavsub-category ul {
 float: left;
 width: 160px;
 border:0;
}

#topnav li .topnavsub-category ul li a {
 border:0;
 padding:4px;
 background:#DFF1FF;
 text-decoration:none;
 font-size:13px;
       width: 152px;
}

#topnav li .topnavsub-category ul li a:hover {
 background-color:#88a4d6;
 z-index:2000001;
}

#topnav li:hover .topnavsub-category {
 left: auto;
}

#topnav a:hover {
 background-color:#88a4d6;
 color:#fff;
}

Have a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments box below.



Last edited by Matti on Sun Dec 29, 2013 7:18 am; edited 1 time in total
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Tutorial: CSS Drop Down Menu

Post by ||Jared||™ on Tue Jul 31, 2012 10:37 pm

This is for all the versions ?
avatar
||Jared||™
Member
Member

Age : 22
Posts : 1
Join date : 2012-07-31
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Tutorial: CSS Drop Down Menu

Post by Mr.Joker on Tue Jul 31, 2012 10:45 pm

What about demo?


Please read forum rules. Don't request help via PM!

avatar
Mr.Joker
Premium Member


Age : 24
Posts : 283
Join date : 2012-06-24
Reputation : 21

View user profile

Back to top Go down

Tutorial Re: Tutorial: CSS Drop Down Menu

Post by RSguideMaker on Tue Jul 31, 2012 11:02 pm

There is a demo there.




Please do not request help via PM! Post on the forums where it can help everyone.
avatar
RSguideMaker
Support Moderator
Support Moderator

Age : 18
Posts : 421
Join date : 2012-05-23
Reputation : 9

View user profile http://euanfitzpatrick.co.nf/

Back to top Go down

Tutorial Re: Tutorial: CSS Drop Down Menu

Post by Mr.Joker on Tue Jul 31, 2012 11:03 pm

Blind me, its not suprise I wear glases xD


Please read forum rules. Don't request help via PM!

avatar
Mr.Joker
Premium Member


Age : 24
Posts : 283
Join date : 2012-06-24
Reputation : 21

View user profile

Back to top Go down

Tutorial Re: Tutorial: CSS Drop Down Menu

Post by RSguideMaker on Tue Jul 31, 2012 11:38 pm

I need glasses too. I didn't notice it at first lol. It looks so similar to the donate button.



Please do not request help via PM! Post on the forums where it can help everyone.
avatar
RSguideMaker
Support Moderator
Support Moderator

Age : 18
Posts : 421
Join date : 2012-05-23
Reputation : 9

View user profile http://euanfitzpatrick.co.nf/

Back to top Go down

Tutorial Re: Tutorial: CSS Drop Down Menu

Post by Mati™ on Wed Aug 01, 2012 12:43 am

RSguideMaker wrote:I need glasses too. I didn't notice it at first lol. It looks so similar to the donate button.

I can change that.
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Tutorial: CSS Drop Down Menu

Post by Leo on Wed Aug 01, 2012 12:48 am

Does the HTML code go in CSS too? Cause I got an error when I put the HTML in CSS.
Matti wrote:In this tutorial you will learn how to create a professional looking drop down menu. It's just a regular nested UL list, turned into a drop down menu using CSS only.
avatar
Leo
Member
Member

Age : 20
Posts : 196
Join date : 2012-07-10
Reputation : 4

View user profile

Back to top Go down

Tutorial Re: Tutorial: CSS Drop Down Menu

Post by Mati™ on Wed Aug 01, 2012 10:41 am

No, the HTML goes to templates overall_header just try it below this code:

For PunBB

Code:
               <div id="pun-head">
                  <div id="pun-navlinks">
                     <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                     </ul>
                  </div>
               </div>
For PhpBB2
Code:
            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Tutorial: CSS Drop Down Menu

Post by RSguideMaker on Wed Aug 01, 2012 11:38 am

I take it I can't use this then? You just provided codes for phpBB2 and punBB. I use phpBB3 :/



Please do not request help via PM! Post on the forums where it can help everyone.
avatar
RSguideMaker
Support Moderator
Support Moderator

Age : 18
Posts : 421
Join date : 2012-05-23
Reputation : 9

View user profile http://euanfitzpatrick.co.nf/

Back to top Go down

Tutorial Re: Tutorial: CSS Drop Down Menu

Post by Mati™ on Wed Aug 01, 2012 11:44 am

Yes because we can't edit the templates with PhpBB3 but you can use that for other links on phpbb3 just put the code in Homepage message.
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Tutorial: CSS Drop Down Menu

Post by RSguideMaker on Wed Aug 01, 2012 12:26 pm

OK Smile
Just so I know



Please do not request help via PM! Post on the forums where it can help everyone.
avatar
RSguideMaker
Support Moderator
Support Moderator

Age : 18
Posts : 421
Join date : 2012-05-23
Reputation : 9

View user profile http://euanfitzpatrick.co.nf/

Back to top Go down

Tutorial Re: Tutorial: CSS Drop Down Menu

Post by J0k3R^ on Thu Apr 25, 2013 5:36 pm

ive got edited the Index_Body and my Nav Bar is at the top of my forum. will this tutorial work? worried
avatar
J0k3R^
Member
Member

Age : 24
Posts : 25
Join date : 2013-04-25
Forum Version : PunBB
Reputation : 1

View user profile http://fmplanet.forumgreek.com/

Back to top Go down

Tutorial Re: Tutorial: CSS Drop Down Menu

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum