Dropdown menu in nav bar?

[OneWorkingMusician]

Is there a way to have a dropdown menu in the nav bar?

Specifically, I'd like to have a Subscribe dropdown and have two choices: RSS and Email.

Any help is greatly appreciated!

Jason
http://oneworkingmusician.com

[sofimi]

(1)

Open header.php in Appearance > Editor and change the <li> that says Subscribe to this:

<li class="rss"><a>Subscribe</a>
<ul>
<li><a href="<?php bloginfo('rss2_url'); ?>">RSS</a></li>
<li class="email"><a href="EMAILLINK">Email</a></li>
</ul>
</li>

(Change EMAILLINK to the email subscription link.)

(2)

Still in header.php, find <?php wp_head(); ?> and before that line add this:

<?php wp_enqueue_script('jquery'); ?>

Now after <?php wp_header(); ?> add this:

<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery("#nav ul").css({display: "none"}); // Opera Fix
jQuery("#nav li>ul").css({top: "auto", left: "auto"});
jQuery("#nav li ul li>ul").css({margin: "0", top: "0", left: "200px"});
jQuery("#nav li li").hover(function() {
    jQuery(this).css({backgroundColor: "#eee"});
    },function() {
    jQuery(this).css({backgroundColor: "#fff"});
});
jQuery("#nav li").hover(function(){
    jQuery(this).find('ul:first').css({visibility: "visible", display: "none"}).show(268);
    },function(){
    jQuery(this).find('ul:first').css({visibility: "hidden"});
    });
});
</script> 

(3)

Open style.css and add these to the very end of the file:

EDIT (09/18/09): Added position: relative; z-index: 1; to ul#nav for IE6 fix.

EDIT (07/22/09): I moved the z-index: 1000; declaration to ul#nav li ul instead of in [B]ul#nav li.

/* suckerfish dropdown */
ul#nav { /* all lists */
	margin: 0;
	display: block;
position: relative; z-index: 1; /* fixes problem in IE6 */
}
 
ul#nav li { /* all list items */
	float: left;
	position: relative;
	width: auto;
	font-size: 100%;
	line-height: 120%;
	list-style: none;
}
 
ul#nav li ul { /* second-level lists */
	display: none;
	position: absolute;
	z-index: 1000;
	top: 1em;
	left: 0;
	text-align: left;
	background-color: #fff;
	clear: both;
	margin-top: 8px;
}
ul#nav li ul li {
	text-transform: none;
	background: url('images/hr_dot_black.gif') bottom repeat-x;
	margin: 0; padding: 10px;
	background-color: #fff;
	clear: both;
	width: 180px;
}
ul#nav li.rss ul li { width: 90px; }
ul#nav li.rss ul li a { display: block; background-position-x: 98%; }

***


(4) EDIT: Also change this in your style.css file.

ul#nav { list-style: none; width: 950px; padding: 0 10px; background: url('images/hr_dot_black.gif') repeat-x; border-bottom: 3px solid #000; float: left; clear: both; font-size: 1.4em; }

	ul#nav li { padding: 0.85em 40px 0.7em 0; font: bold 100% Helvetica, Arial, sans-serif; text-transform: uppercase; float: left; }

Basically, add font-size: 1.4em; to ul#nav and the font attribute should read font: bold 100% Helvetica, Arial, sans-serif; , with 1.4em removed.



Let me know if that works for you.

Is there a way to have a dropdown menu in the nav bar?

Specifically, I'd like to have a Subscribe dropdown and have two choices: RSS and Email.

Any help is greatly appreciated!

Jason
http://oneworkingmusician.com

[worldviewpr]

thank you for the code to help add drop down to cutline 14

I tried this but it did not work for me in wp28 using cutline 14 rightcolumn2

I had nested page under about, unnested it and then made it a child again of ABOUT page with no drop down.

I believe the only thing it actually caused to happen was a green line to appear under the active page name in the nav bar.

So back to square one

I am looking for help for

drop down menu

add "categories" to nav bar as drop menu

any help will be gratefully consumed.

sluurp

[worldviewpr]

In another theme I saw this

<?php wp_list_pages('title_li='); wp_list_categories('title_li='); ?>

where

wp_list_categories('title_li=');

was simply added to <?php wp_list_pages('title_li='); ?> above in the header

there was some other changes in .css that I'd have to look at, but would have to dig.

maybe the adjustments to the ul nax and font config

Is this a relevent line of investigation?

[sofimi]

Can you send your blog URL so we can check it out?

Make sure that the PHP code

<?php wp_list_pages('title_li='); wp_list_categories('title_li='); ?>

appears in between <ul id="nav"> and </ul>. And that you have the custom CSS and javascript inserted where specified, of course.

In another theme I saw this

<?php wp_list_pages('title_li='); wp_list_categories('title_li='); ?>

where

wp_list_categories('title_li=');

was simply added to <?php wp_list_pages('title_li='); ?> above in the header

there was some other changes in .css that I'd have to look at, but would have to dig.

maybe the adjustments to the ul nax and font config

Is this a relevent line of investigation?

[mimikbos]

I have posted somewhere else on the Forum as well but this seems directly relevant to my issue. I used the Multi-Level Plugin (aka Suckerfish) and created Dropdowns successfully but somehow the styling got messed up for the link in the dropdown. the hover seems fine but not the background link.

Please check it out and let me know what's up.

http://loring-greenough.org/houseinfo/

[mimikbos]

I have posted somewhere else on the Forum as well but this seems directly relevant to my issue. I used the Multi-Level Plugin (aka Suckerfish) and created Dropdowns successfully but somehow the styling got messed up for the link in the dropdown. the hover seems fine but not the background link.

Please check it out and let me know what's up.

http://loring-greenough.org/houseinfo/

I think I fixed this--had to finagle the css in a few different places to get it to look right.

[nicolerork]

Is there anyway to get the categories to drop down from the main menu? Doesn't seem to be working for me.

[sofimi]

That's odd. Just add this code:

<?php wp_list_categories('title_li='); ?>

Right before <li class="rss"><a>Subscribe</a>... or replace the line <?php wp_list_pages('sort_column=menu_order&title_li='); ?> if you want to remove the pages in the navigation instead.

Have you done this? What do you mean it's not working?

Is there anyway to get the categories to drop down from the main menu? Doesn't seem to be working for me.

[sofimi]

To everyone using the drop-down menus code in this thread, please be advised that I made some changes to the code.

EDIT: I moved the z-index: 1000; declaration to ul#nav li ul instead of in ul#nav li.

Please view the post: http://cutline.tubetorial.com/forums...10&postcount=2