Jump to content

Wordpress Dropdown Menu Theme


Vaibhav
 Share

Recommended Posts

I'm currently working on a theme for iDevotees. They use Wordpress and the owner wants a dropdown menu. The menu has links to the homepage, other pages and categories on the top level and then the dropdown level shows the subcategories of the highlighted category. Issue.pngI found a way to do it but the code spread the dropdown level across the page and made the page far too wide. To see what I mean, check out suburbanjunkie.zxq.net You can notice at the bottom: the horizontal sliebar, we want to remove it. It would be awesome of someone could tell me what's wrong or offer an alternative solution. HTML/PHP:

<ul id="nav2" class="clearfloat">	<li><a href="<?php echo get_option('home'); ?>/" class="on">Home</a></li>	<?php wp_list_pages('title_li=&depth=1');	wp_list_categories('orderby=name&title_li=&depth=1');	$this_category = get_category($cat);	if (get_category_children($this_category->cat_ID) != "") {		echo "<ul>";		wp_list_categories('orderby=id&show_count=0&title_li=&child_of=&use_desc_for_title=1&depth=1'.$this_category->cat_ID);		echo "</ul>";	}	?></ul>

CSS:

#nav2{	display: block;	font-size:1.1em;	height:50px;	width:100%;	padding: 0 50%;}[/size][/font][/color] #nav2, #nav2 ul {	line-height: 1;	list-style: none;}#nav2 a ,#nav2 a:hover{	border:none;	display: block;	text-decoration: none;}#nav2 li {	float: left;	list-style:none;	text-decoration: none;	font-size: 15px;	padding: 5px 5px;	border-radius: 5px;	margin: 10px 5px;	box-shadow: 3px 3px 6px #CCC inset;	font-family: Myriad Pro, sans-serif;	background: #d3d5d7;	font-weight: 100;}#nav2 li:hover {	background: #59a4ff;	box-shadow: 3px 3px 6px #4787d5 inset;}#nav2 a,#nav2 a:visited {	display:block;	font-weight:bold;	padding:6px 12px;}#nav2 a:hover, #nav2 a:active {	color:#fff;	text-decoration:none}#nav2 li ul {	height: auto;	left: 100px;	position: absolute;	z-index:999;	width: 100%;	padding: 0 50%;}#nav2 li li {	width: auto;}#nav2 li li a,#nav2 li li a:visited {	font-weight:normal;	font-size:0.9em;}#nav2 li li a:hover,#nav2 li li a:active {	color:#fff;}#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul {	left: 30px;}

Edited by Vaibhav
  • Like 5
Link to comment
Share on other sites

You need to give #nav2 li position: relative; this will force sublevel ul position to be determined by parent li top and left edge #nav2 li { float: left; list-style:none; text-decoration: none; font-size: 15px; padding: 5px 5px; border-radius: 5px; margin: 10px 5px; box-shadow: 3px 3px 6px #CCC inset; font-family: Myriad Pro, sans-serif; background: #d3d5d7; font-weight: 100;position: relative;}sublevel ul needs to be hidden from view until called upon #nav2 li ul { height: auto; /*left: 100px;*/left: -9999em; position: absolute; z-index:999; width: 100%; /*maybe consider a fixed width*/ padding: 0 50%;}

Link to comment
Share on other sites

  • 2 weeks later...
You need to give #nav2 li position: relative; this will force sublevel ul position to be determined by parent li top and left edge #nav2 li { float: left; list-style:none; text-decoration: none; font-size: 15px; padding: 5px 5px; border-radius: 5px; margin: 10px 5px; box-shadow: 3px 3px 6px #CCC inset; font-family: Myriad Pro, sans-serif; background: #d3d5d7; font-weight: 100; position: relative;} sublevel ul needs to be hidden from view until called upon #nav2 li ul { height: auto; /*left: 100px;*/left: -9999em; position: absolute; z-index:999; width: 100%; /*maybe consider a fixed width*/ padding: 0 50%;}
That fixes the spacing of the menu items issue however the page is still unnecessarily wide
Link to comment
Share on other sites

Well because the OP specifically asked about menu items in the first place, that what OP got! The rest is a mishmash of misused padding, float, which maybe because the OP was experimenting to come up with a solution to fix this problem, but if the OP wishes a solution to this problem he/she just needs to repost stating that fact. Edit: Actually the use of padding 50% within ul would have contributed to width problem since it was not using position absolute at the time, these would not have been taken out of the flow from the rest of the page content.

Edited by dsonesuk
  • Like 1
Link to comment
Share on other sites

Well because the OP specifically asked about menu items in the first place, that what OP got! The rest is a mishmash of misused padding, float, which maybe because the OP was experimenting to come up with a solution to fix this problem, but if the OP wishes a solution to this problem he/she just needs to repost stating that fact. Edit: Actually the use of padding 50% within ul would have contributed to width problem since it was not using position absolute at the time, these would not have been taken out of the flow from the rest of the page content.
Thanks. Sorry if my previous comment was a bit short and rude
Link to comment
Share on other sites

So A Non verfied user, can use someone elses account, but have their username appear with your account posting??? did not you could do that!
Sorry, didn't consider that Edit:
Actually the use of padding 50% within ul would have contributed to width problem since it was not using position absolute at the time, these would not have been taken out of the flow from the rest of the page content.
Your solution worked! Thank you so much! Edited by Drewza1243
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...