...

View Full Version : Need help with adding Dropdown menu to my wordpress theme.



SuperMAG
05-04-2009, 10:31 AM
I have a theme called Silverlight for wordpress, its an old theme, which doesnt have drop down menu. I want to add dropdown menus of my subpages to pages tabs.

Here is the code of my tabs:


#ddnav{background-color:#312e2e;height:35px;margin:0;padding:0;}
#nav{height:25px;width:1060px;font-weight:700;margin:0 auto;padding:10px 0 0;}
ul.nav{height:25px;line-height:25px;float:left;list-style:none;font-size:11px;text-transform:inherit;margin:0;padding:0;}
ul.nav li{float:left !important;list-style-type:none;border-right:2px solid #312e2e;margin:0;padding:0;}
ul.nav li a, ul.nav li a:link, ul.nav li a:visited{background:url('images/navsilver.gif') repeat-x;color:#818181;float:left;display:block;text-decoration:none;padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:0}
ul.nav li a:hover, ul.nav li a:active{background:url('images/navblue.gif') repeat-x;color:#205387;text-decoration:none}
ul.nav li.current_page_item a{text-decoration:none;background:url('images/navblue.gif') repeat-x;color:#fff}
ul.nav li ul{float:left;margin:0;padding:0;}


Can some one please add a way so it can show submenus as a dropdown menu. may be this will help:

http://www.lwis.net/free-css-drop-down-menu/

Here is full theme: http://super.m.a.g.world.googlepages.com/silverlight.zip

My site is http://Sports2ALL.com

Thanks in advance, if you want to contact me, support@sports2all.com

abduraooft
05-04-2009, 10:36 AM
To add a drop down, initially you need to have the set of sub menu items under the required main menu. Refer http://htmldog.com/articles/suckerfish/dropdowns/

Wordpress can automatically generate this, if you have created some child paged for your main pages.

SuperMAG
05-04-2009, 10:38 AM
i know that, but my style doesn't do that. it shows the sub pages in the horizontal menu. not drop down.

so is there anyway i can add the drop down menu to my theme.

i tried to ask in wordpress forum, digitalpoint. seems no one is helping.

abduraooft
05-04-2009, 10:49 AM
i know that, but my style doesn't do that. it shows the sub pages in the horizontal menu. not drop down.

A style can't simply add a drop down without its corresponding HTML markup. I don't see this in your page as indicated in my above post!

SuperMAG
05-04-2009, 11:36 AM
i know, i didnt post any sub pages, because it will ruin the template, i can always allow to show subpages. but after i get my theme fixed to show it as dropdown menus.

SuperMAG
05-05-2009, 01:18 PM
as i said, i just need to make this code show dropdown menu.


#ddnav{background-color:#312e2e;height:35px;margin:0;padding:0;}
#nav{height:25px;width:1060px;font-weight:700;margin:0 auto;padding:10px 0 0;}
ul.nav{height:25px;line-height:25px;float:left;list-style:none;font-size:11px;text-transform:inherit;margin:0;padding:0;}
ul.nav li{float:left !important;list-style-type:none;border-right:2px solid #312e2e;margin:0;padding:0;}
ul.nav li a, ul.nav li a:link, ul.nav li a:visited{background:url('images/navsilver.gif') repeat-x;color:#818181;float:left;display:block;text-decoration:none;padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:0}
ul.nav li a:hover, ul.nav li a:active{background:url('images/navblue.gif') repeat-x;color:#205387;text-decoration:none}
ul.nav li.current_page_item a{text-decoration:none;background:url('images/navblue.gif') repeat-x;color:#fff}
ul.nav li ul{float:left;margin:0;padding:0;}

I can add subpages later, So can any one PLEASEEEEEEEEEEEEE HELP!

SuperMAG
05-07-2009, 12:10 PM
shameless Bump, any one?

abduraooft
05-07-2009, 12:17 PM
I can add subpages later, Can you edit your template to add some static html code for making your drop down?

SuperMAG
05-07-2009, 03:52 PM
ok i done that, now look at the http://sports2all.com/

Misc Button, It has these subpages.
Online TV
Music/Songs
Free SMS
Online Games
SopCast Player

it is shown like this: http://img374.imageshack.us/img374/7013/67324949.png

http://img374.imageshack.us/img374/7013/67324949.png

The HTML source of that menu is:


<div id="ddnav">
<div id="nav">
<ul class="nav">
<li class="page_item page-item-63 current_page_item"><a href="http://sports2all.com" title="Home">Home</a></li>
<li class="page_item page-item-609"><a href="http://sports2all.com/forum/" title="Forum">Forum</a></li>
<li class="page_item page-item-40"><a href="http://sports2all.com/chat/" title="Chat">Chat</a></li>
<li class="page_item page-item-1010"><a href="http://sports2all.com/wrestling-live-streaming/" title="Wrestling Live Streaming">Wrestling Live Streaming</a></li>
<li class="page_item page-item-598"><a href="http://sports2all.com/football-live-streaming/" title="Football Live Streaming">Football Live Streaming</a></li>
<li class="page_item page-item-3053"><a href="http://sports2all.com/other-sports-live-streaming/" title="Other Sports Live Streaming">Other Sports Live Streaming</a></li>
<li class="page_item page-item-77"><a href="http://sports2all.com/wrestling-replays/" title="Wrestling Replay’s">Wrestling Replay’s</a></li>
<li class="page_item page-item-84"><a href="http://sports2all.com/wrestling-ppvs/" title="PPV’s">PPV’s</a></li>
<li class="page_item page-item-1137"><a href="http://sports2all.com/wrestling-dvds/" title="DVD’s">DVD’s</a></li>
<li class="page_item page-item-468"><a href="http://sports2all.com/misc/" title="Misc">Misc</a>
<ul>
<li class="page_item page-item-1850"><a href="http://sports2all.com/misc/online-tv/" title="Online TV">Online TV</a></li>
<li class="page_item page-item-1855"><a href="http://sports2all.com/misc/music-songs/" title="Music/Songs">Music/Songs</a></li>
<li class="page_item page-item-1887"><a href="http://sports2all.com/misc/free-sms/" title="Free SMS">Free SMS</a></li>
<li class="page_item page-item-1859"><a href="http://sports2all.com/misc/online-games/" title="Online Games">Online Games</a></li>
<li class="page_item page-item-1875"><a href="http://sports2all.com/misc/sopcast-player/" title="SopCast Player">SopCast Player</a></li>
<li class="page_item page-item-1863"><a href="http://sports2all.com/misc/satellite-maps/" title="Satellite Maps">Satellite Maps</a></li>
<li class="page_item page-item-1839"><a href="http://sports2all.com/misc/rapidleech/" title="RapidLeech">RapidLeech</a></li>
</ul>
</li>
<li class="page_item page-item-74"><a href="http://sports2all.com/contact/" title="Contact">Contact</a></li>
</ul>
</div>
</div>

I hope thats helpfull. And thanksssssssss Alot for helping me.

abduraooft
05-07-2009, 04:20 PM
Um.. have a try with

ul.nav{height:25px;line-height:25px;float:left;list-style:none;font-size:11px;text-transform:inherit;margin:0;padding:0;}
ul.nav li{float:left ;position:relative; list-style-type:none;border-right:2px solid #312e2e;margin:0;padding:0;}
ul.nav li a, ul.nav li a:link, ul.nav li a:visited{background:url('images/navsilver.gif') repeat-x;color:#818181;float:left;display:block;text-decoration:none;padding-left:13px; padding-right:13px; padding-top:0; padding-bottom:0}
ul.nav li a:hover, ul.nav li a:active{background:url('images/navblue.gif') repeat-x;color:#205387;text-decoration:none}
ul.nav li.current_page_item a{text-decoration:none;background:url('images/navblue.gif') repeat-x;color:#fff}
ul.nav li ul{position:absolute;left:-9999px;margin:0;padding:0; top:2.2em}
#nav ul.nav li ul li, #nav ul.nav li ul li a{
float:none;
}
ul.nav li:hover ul{
left:auto;
} in FF

SuperMAG
05-07-2009, 04:44 PM
wow, it worked, but it is all messed up. is there any way i can change the style of the subpages menu to simple one.

u can check the misc page menu in the site: http://sports2all.com/

abduraooft
05-07-2009, 05:00 PM
ul.nav li ul {/*style.css (line 29)*/
left:-9999px;
margin:0;
padding:0;
position:absolute;
top:2.2em;
width:15em;
}

SuperMAG
05-07-2009, 05:30 PM
ok thanks alot, that worked well, but as i said, i want simple tabs to show, not the tabs like original menu, so what i need to do that.

can u show me the separate code of the submenus.

i want a submenu like, DADADA borders. And FFFFFF Background, And Blue Links.

And sorry if i took too much of ur time, Thanks again.

abduraooft
05-08-2009, 08:56 AM
ul.nav li ul li{
border:1px solid #dadada;
}
ul.nav li ul li a:link{
background:#fff;
color:blue;
}

SuperMAG
05-08-2009, 10:28 AM
ok thanks again

now i have a problem, the ads is blocking the menu to show.

is there any way i show menu over ads.

------

and small thing,

ul.nav li ul li{border:1px solid #dadada}
ul.nav li ul li a:link{background:#fff;color:#00749E;}

This is the style u gave me.
1- want to add the Hover.
The hover on the blocks be F8F8F8 and hover for Links need to be 000000

Thanks

abduraooft
05-08-2009, 10:57 AM
ok thanks again

now i have a problem, the ads is blocking the menu to show.

is there any way i show menu over ads.

------

Ads? Sorry, I'm using Adblocker in my FF :)
Anyway, you could do it by setting a position:relative; to your Ad container element and your navigation container, and then setting two different z-index values to them (say z-index:1; for Ad container and z-index:10; for #nav).



and small thing,

ul.nav li ul li{border:1px solid #dadada}
ul.nav li ul li a:link{background:#fff;color:#00749E;}

This is the style u gave me.
1- want to add the Hover.
The hover on the blocks be F8F8F8 and hover for Links need to be 000000

That might be an easy one.... try to follow http://www.w3schools.com/css/pr_pseudo_hover.asp

SuperMAG
05-08-2009, 01:08 PM
Ads? Sorry, I'm using Adblocker in my FF :)
Anyway, you could do it by setting a position:relative; to your Ad container element and your navigation container, and then setting two different z-index values to them (say z-index:1; for Ad container and z-index:10; for #nav).

That might be an easy one.... try to follow http://www.w3schools.com/css/pr_pseudo_hover.asp

ok the ads stuff was little complicated to me, but i changed the place of the menu.

but the hover.

this is my complete nav css.


#ddnav{background-color:#312e2e;height:35px;margin:0;padding:0;}
#nav{height:25px;width:1060px;font-weight:700;margin:0 auto;padding:10px 0 0;}
ul.nav{height:25px;line-height:25px;float:left;list-style:none;font-size:11px;text-transform:inherit;margin:0;padding:0;}
ul.nav li{float:left ;position:relative; list-style-type:none;border-right:2px solid #312e2e;margin:0;padding:0;}
ul.nav li a, ul.nav li a:link, ul.nav li a:visited{background:url('images/navsilver.gif') repeat-x;color:#818181;float:left;display:block;text-decoration:none;padding-left:13px; padding-right:13px; padding-top:0; padding-bottom:0}
ul.nav li a:hover, ul.nav li a:active{background:url('images/navblue.gif') repeat-x;color:#205387;text-decoration:none}
ul.nav li.current_page_item a{text-decoration:none;background:url('images/navblue.gif') repeat-x;color:#fff}
ul.nav li ul{position:absolute;left:-9999px;margin:0;padding:0;top:2.2em;width:15em;}
#nav ul.nav li ul li, #nav ul.nav li ul li a{float:none;}
ul.nav li:hover ul{left:auto;}
ul.nav li ul li{border:1px solid #dadada;}
ul.nav li ul li a:link {background:#fff;color:#00749E;}


i added this

ul.nav li ul li a:hover {color: #000000;}

and now the the links hover changes, but the hover over block, donno how to do that :(

and between every submenu link

like

--------------
--------------
--------------

this lines are double, the side lines are single, so may be that could be corrected too. though its not that important

Thanks alot for your help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum