Help!!! Two Teir Horizontal Menu – WordPress and Prototype

[jeremy]

Hi Guys, I am trying to get a two level horizontal menu into my Prototype Child theme, but I just cant seem to get it to work.

The site I want to emulate is this one… http://www.govisitcostarica.com/ look for the green and purple menu just above the ad block.

Here are a few sites that have examples and code but everything I have tried seems to have been in vain… I would be happy to get any one of them to work.

http://clagnut.com/sandbox/csstabs/#
http://labs.silverorange.com/archive/2004/may/updatedsimple
http://www.dynamicdrive.com/style/csslibrary/item/two-level-css-tabs-menu/
http://www.tjkdesign.com/articles/new_drop_down/LO.asp http://www.tjkdesign.com/articles/dropdown/default.asp http://www.tjkdesign.com/articles/pure_CSS_dropdown_menus.asp

My test site is http://jy72.com/ ,

Disclaimer here… pay no mind to the colors being the same I fully intend on swapping them over, I am not building an exact replica of the govisitcostarica site, I am just trying to keep the layout similar until the theme is ready for my live site.

I would love to sort out how to stop the drop downs from “Dropping Down” and create a static horizontal menu.

I would really appreciate any help or feedback.

I am using the latest version of WordPress.

Thanks

[virtual]

Maybe this will help you
http://new2wp.com/pro/jquery-drop-down-menu-wordpress-3-menu/

[jeremy]

Thanks Virtual,
please correct me if I am wrong but it looks like it is still a dropdown on hover?

[virtual]

Sorry my bad, you want an on click event, I thought the article would help go through the steps to get a different menu in there. You will have to disable the js dropdowns which come with the latest wordpress version and replace with your own custom menu.

[jeremy]

Thanks Virtual, any idea how I would do that? I will also ask JT on his forum. If I get a reply in the mean time I will post back to let you know how I go, really appreciate your help, a Lot.

[jeremy]

Ok, I have disabled the js on the dropdowns in the functions.php file, but the menu is still dropping down on hover, the only difference I can see that it’s made is the drop-down menu disappears as soon as the cursor has been moved off the link, making it impossible to to click the sub menu links.

Now I just need to figure out how to make the sub menu visible on the current top level category page.

Any ideas?

http://jy72.com/

The Lorem Ipsum cat is the one I am working with for the drop downs.

[jeremy]

UPDATE: I have been supplied some code by one of the guys over at http://themehybrid.com/support/
that gives me the dropdown on the current menu item, but I am not sure how to expand the sub menu items in a horizontal fashion.

You can see what I mean here…
http://jy72.com/-/lorem-ipsum/

The CSS is the following…

/* remove all styling fr Prototype */

/* @import url( '../prototype/style.css' ); */



/* simple hover, main menu item, sub item styling */

a:hover {  background: #252525;  color: white; }

#menu-secondary ul li a { font-weight: bold; font-size: 17px;}

#menu-secondary ul ul li a { font-weight: normal; font-style: italic; font-size:15px; }

#menu-secondary ul li.current-menu-item > a { background: #cccccc; }



#container {  width: 960px;  margin: 0 auto 0 auto; }



#menu-secondary {

clear: both;

position: relative;

height: 125px;

border: solid 1px black; /* so I can see the Div area */

}



#menu-secondary .menu { }



#menu-secondary ul {

position: absolute;

top: 0px;

}



#menu-secondary ul li { display: inline; }



/* start with No display of sub-menu items */

#menu-secondary ul ul li { display: none; }



/* Display sub-menu of the Current-Menu-Item */

#menu-secondary ul li.current-menu-item > ul li {

display: inline;

}



#menu-secondary ul ul {

position: absolute;

top: 25px;

left: 0;

width: 100%;

z-index: 99999;

}



/* just to get the search box out of the way, for now */

#menu-secondary .search {  position: absolute;  bottom: 5px; }

If anyone can help get this sorted I would be extremely grateful.

[Author]

Posts