No subs with Outdoor menu TPL

[stanb17]

I'm going around in circles trying to figure this out. I'm using the Outdoor template and css here

http://sebajohnson.com/index.php?page=default_templates

I want the subordinate links to render over the body on rollover. Yes.. I know it sounds simple, but sleep deprivation is causing me to waste time.

Thank you for your help.

SB

[stanb17]

Hey I know my Karma ain't what it should be, but I have given this some serious time and reaped zero results.

Here's the CSS code for the NAV

/* Navigation */
#nav {
        clear: both;
margin: 0; padding: 0;
height: 45px;
}
#nav ul {
float: left;
list-style: none;
background: url(uploads/Outdoors/nav.jpg) repeat-x;
width: 870px;
height: 45px;
text-transform: uppercase;
margin: 0 0 0 15px;
padding: 0;
display: inline;
}

#nav ul li {
display: inline;
margin: 0; padding: 0;
        background-color:#9fb419;
}
#nav ul li a {
display: block;
float: left;
width: auto;
margin: 0;
padding: 0 14px;
border-right: 1px solid #899D00;
border-left: 1px solid #A7D101;
font: bold 14px/45px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;
color: #fff;
}
#nav ul li a:hover,
#nav ul li a:active {
background: url(uploads/Outdoors/nav-hover.jpg) repeat-x;
}

#nav ul li#current a {
background: url(uploads/Outdoors/nav-current.jpg) repeat-x;
}

The HTML portion is this...



        {cms_module module='menumanager' template='cssmenu.tpl' number_of_levels='1' start_level='1'} 



I've even used the Haiku template with success on another site and the rollovers work fine. I just can't wrap what's left of my brain around why this is not working.

Anyone? Bueller? Anyone? Bueller???

[Dr.CSS]

If you have more than one level and want it to show in menu then you need to remove the number_of_levels='1', if you look at the source of the page you will see only the links that appear in the page and the fact that they are classed as menuparents shows they have children who can't come to the party (caused by the call of number_of_levels='1')...

You also don't need the start_level call, unless Home starts on a diff. level...

[stanb17]

Ahhhh. MARK,

I was hoping I'd get your attention. You are legendary in these woods.

I took out the extra tags you mentioned... but you can see that is messed up the right side on the layout (in FF).
http://sebajohnson.com/index.php?page=how-cmsms-works

You can see some green remnants of the CSS coloring showing up and still can not see subordinate links.

I'm here if you can help.

SB

[Dr.CSS]

That template/menu CSS wasn't made for more than one level, look to a default CSS for cssmenu horiz. and take out what you don't need, you will have some calls from the #nav *** that will mess with the second layer, either take them out of the first layer or call out the second layer and style it, as in the...

#nav ul {
float: left;
list-style: none;
background: url(uploads/Outdoors/nav.jpg) repeat-x;
width: 870px; This part will make the second level ul 870px wide
height: 45px;

[stanb17]

Mark,

I'm normally pretty good at tracking this stuf down. Franky... I'm spent. Even that last statement you made is coming across like Chinese algebra. As much as I need this done by Monday or Tuesday... I fear I've gotten to the point where I will cause more work for myself if I continue.

I thought the issue would be simple and obvious, but unless you have a spare CSS or TPL up your sleeve, I'm going to have to address this when I have more personal brain power at my disposal.

Thanks

SB

[Dr.CSS]

If you want you could try one of the wireframe templates...

The last one or second to last...

[stanb17]

Mark,

CSS based dropdown works fine here...

http://www.leenhrec.org/

But no matter what I've tried on Seba's site, I can not access the subordinate pages. It's not a huge concern now as there will not be that many pages to start, but with 3 to 6 months of recovery, once she gets going, she'll be posting quite a bit. I'd like to have a solution at some point.

SB

[Dr.CSS]

That one looks like it's using the cssmenu.tpl and the /* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */ style sheet...

You use the same thing for the Outdoors template and it should work, you just have to make some changes to the color, sizing, etc...

[cweese]

I was having the same problem - I couldn't get the drop-down menus to work, so I created a sub-menu on the side. I just inserted this:

{menu template='SimpleNavigation' start_level='2' collapse='1'}

above the existing menu in the sidebar. I am going to keep the static menu for things such as contact page etc, but needed an easy way for my client to have her sub-pages show up in a menu.

I also had to add SimpleNavigation to the menu templates.

Not perfect but perhaps it will help!

[Dr.CSS]

To get a multi level menu use the cssmenu.tpl or import it, if you need to maek changes for class or ID, and call it in the menu tag...

In the head use...




Then you need to use the...

Navigation: CSSMenu - Horizontal.... style sheet...

/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

#menu_vert {
  margin-left: 1px;
  margin-right: 1px;
}                          You won't heed this, unless you wrap your menu in this div

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper {                this is in the menu template if you want to change/remove it
  /* Fix for Opera 8 */
  /*  overflow: hidden;  */
  background-color: #ECECEC;
  border-bottom: 1px solid #C0C0C0;
  width: 100%;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
  width: 200px;
}


/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
#primary-nav ul {
  position: absolute;
  top: auto;
  display: none;
}
#primary-nav ul ul {
  margin-top: 1px;
  margin-left: -1px;
  left: 100%;
  top: 0px;
}

#primary-nav li {
  margin-left: -1px;
  float: left;
}
#primary-nav li li {
  margin-left: 0px;
  margin-top: -1px;
  float: none;
  position: relative;
}

/* Styling the basic apperance of the menu elements */
#primary-nav a {
  display: block;
  margin: 0px;
  padding: 5px 10px;
  text-decoration: none;
  color: #006699;
}
#primary-nav li a {
  border-right: 1px solid #C0C0C0;
  border-left: 1px solid #C0C0C0;
}
#primary-nav li li a {
  border: 1px solid #C0C0C0;
}
#primary-nav li, #primary-nav li.menuparent {
  background-color: #ececec;
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
  background-color: #C7C7C7;
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent,
#primary-nav ul li.menuparent:hover,
#primary-nav ul li.menuparenth {
/* arrow for menuparents */
  background-image: url(images/cms/arrow.gif);
  background-position: center right;
  background-repeat: no-repeat;
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
  background-color: #E7AB0B;
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/*
just add
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
for fourth level
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
  display: none;
}

/* add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
  display: block;
}


/* IE Hacks */
#primary-nav li li {
  float: left;
  clear: both;
}
#primary-nav li li a {
  height: 1%;
}