JulienH

Additional info:

I think the problem is WordPress and not the plugin. What I want is to be able to put my php in the html editor. This code should not be visible in the WYSIWYG editor so my client cant make a mess or change the code. Since it will be a site with more than 100 pages, I don’t want to make a template for each and every page and it is useful to put the php code inside the html-editor of every page.

bump

anyone?

Ok, solved!

Just look for a CSS dropline menu. Sliding doors as an option. Good luck.!

Okay, I found this code and it looks a lot like I would like it to be. I tried to change it so the submenu items of menu 1 were shown by default, without a hover. Didn’t got it to work so far. Hope someone can help. this is the code.

<ul id="nav">
			<li><a href="#">Menu 1</a>
				<ul>
					<li><a href="#">Menu 1 Submenu item 1</a></li>
					<li><a href="#">Menu 1 Submenu item 2</a></li>
					<li><a href="#">Menu 1 Submenu item 3</a></li>
				</ul>
			</li>

			<li><a href="#">Menu 2</a>
				<ul>
					<li><a href="#">Menu 2 Submenu item 1</a></li>
					<li><a href="#">Menu 2 Submenu item 2</a></li>
					<li><a href="#">Menu 2 Submenu item 3</a></li>
				</ul>
			</li>

			<li><a href="#">Menu 3</a>
				<ul>
					<li><a href="#">Menu 3 Submenu item 1</a></li>
					<li><a href="#">Menu 3 Submenu item 2</a></li>
					<li><a href="#">Menu 3 Submenu item 3</a></li>
				</ul>
			</li>
		</ul>

#menu {
  width: 960px;
  height: 40px;
  clear: both;
}

ul#nav {
  float: left;
  width: 960px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #dc0000 url(../img/menu-parent.png) repeat-x;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
}

ul#nav li {
  display: inline;
}

ul#nav li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #880000;
  margin: 0;
  padding: 0 30px;
  background: #dc0000 url(../img/menu-parent.png) repeat-x;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
}

/* APPLIES THE ACTIVE STATE */
ul#nav .current a, ul#nav li:hover > a  {
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #330000;
  background: #bb0000;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
}

/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav  ul {
  display: none;
}

/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
  position: absolute;
  display: block;
  width: 920px;
  height: 45px;
  position: absolute;
  margin: 40px 0 0 0;
  background: #aa0000 url(../img/menu-child.png) repeat-x;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
}

ul#nav li:hover > ul li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 45px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #110000;
  margin: 0;
  padding: 0 30px 0 0;
  background: #aa0000 url(../img/menu-child.png) repeat-x;
}

ul#nav li:hover > ul li a:hover {
  color: #120000;
  text-decoration: none;
  text-shadow: none;
}

Bumper….

Try to set the WordPress Address and Site Address under Dashboard > Settings > General to https://www.example.com

That worked for me.

The code of my example doesn’t use any jQuery to do this and is a big mess. The examples I found on Google and in the Codex are all different from what I’m looking for. The examples are menus that only show the subpages on mouseover.

I will trie to be as specific as possibile and hope someone can help me out.

If we look at this example the menu “Tv Gids” and subpage “home” are active. In fact the main pages “TV gids, Genres, MijnTVgids.nl etc etc.” are not navigating anywhere. Only the submenu-items on these menu-items do have content.
When you are on TVgids/home and mouse-over “Genres” or “On demand” for example, their subpages become visible. That is exactly what I want. So when you open the page in your browser, it show you by default the subpages under the first menu-item and on mouse-over on the other menu-item it show their submenu-items.
I hope someone know how to do this or can point me to a tutorial or explanation.

Thanks in advance.

Okay, I have to dive in the code of that particular site then. Or do you know a place where it’s explained or does it have some kind of a name? Never heard of an accordion menu either but makes perfect sense to me.

I don’t know for sure if I can accomplish this with an accordion menu. The menu I want is a lot like this one.