Forums

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.

treehouse : what would you like to learn today?

Forums

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