Developing (v7+)

Drop Down Navigation Code Help-- I need help to add another level

Permalink March 29, 2011 at 12:26 PM

Hi everyone-- I'm a newb that needs some help. I've installed the "Corporate America" theme that includes drop-down navigation, but it only goes one level below. I'm hoping to add additional levels, but have no clue where to start.

Specifically, I'd like at least one more level down and for it to appear to the right of the menu. I'm not sure where all of the code is stored for the navigation, so if you'd like to see my code, please give me a tip on where to look.

thanks

tomreitz replied on Mar 29, 2011 at 1:05 pm Permalink Reply

It looks like that theme uses the suckerfish dropdown javascript menu. See the second half of this article
http://www.htmldog.com/articles/suckerfish/dropdowns/...
for how to add CSS that will make multilevel menus work nicely.

pcohen replied on Mar 29, 2011 at 1:57 pm Permalink Reply

Thanks for getting back to me so quickly... Still having issues, though (trying to make a two-level drop down).

Here's my code on my main.css (do I need to make edits anywhere else?)

/*  Main Navigation  */
#nav {
   height: 31px;
   overflow:hidden;
   border:1px solid #333333;
}
#nav ul {
   width: 940px;   
   margin:1px auto 0;
   padding:0;
   list-style: none; 
   line-height: 1;
}
#nav ul li {
   margin:0;

Viewing 15 lines of 60 lines. View entire code block.

 
/*  Main Navigation  */
 
#nav {
   height: 31px;
   overflow:hidden;
   border:1px solid #333333;
}
#nav ul {
   width: 940px;   
   margin:1px auto 0;
   padding:0;
   list-style: none; 
   line-height: 1;
}
#nav ul li {
   margin:0;
   list-style:none;
   float:left;
   padding:0;
   border:0px solid #FFF;
}
#nav ul li a {
   color:#fff;
   display:block;
   padding:3px 45px 3px 8px;
   font-family:Arial, Helvetica, sans-serif;
   font-size:1.4em;
   text-decoration:none;
}
#nav li ul ul {
   margin: -1em 0 0 10em;
}
 
/* Dropdown Menus */      
#nav li ul {
   position: absolute;
   left: -999em;
   height: auto;
   width: 225px;
   margin:0 0 0 0;
   padding:5px 0;
   border-left:1px solid #333333;
   border-bottom:1px solid #333333;
   border-right:1px solid #333333;
    z-index: 9999;
}
 
#nav li li {
    font-size: 0.7em;
    line-height: 1.2em;
   float:none;
   text-transform:none;
   border-left:none;
}
#nav li li a {
   padding:7px 40px 7px 10px;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
   left: -999em;
}   
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
   left: auto;
}

Thanks!

tomreitz replied on Mar 29, 2011 at 2:39 pm Permalink Reply

can I get a link to an online demo? I see you have multilevel css specified, so I'm not sure why it's not working... need to look a the source.

pcohen replied on Mar 29, 2011 at 5:27 pm Permalink Reply

I sent you a private message-- let me know if you don't get the url.

tomreitz replied on Mar 29, 2011 at 8:27 pm Permalink Reply

I did get the URL. I've been in meetings all afternoon... as much as I love C5, work must come first.

Looking through your markup, it seems that your menu has only 1 level (i.e., the main level and one sub-level, but no second or third level). You should make sure that
1) you actually have additional levels in your site map
2) go into edit mode, click on your nav block, and make sure that you have these settings: display pages="at the top level", sub pages to display="display all", sub page levels="display all"

Hopefully the above will get the submenu markup to show.. then we can tackle getting suckerfish to play nice, if it doesn't automatically...

cheers!

pcohen replied on Mar 30, 2011 at 9:59 am Permalink Reply

Hey Tom--
I do have additional levels, so that's not the issue. I don't have the ability to select the nav block in edit mode-- it's not an editable item (nor am I using any other navigation blocks anywhere on the site (autonav, etc).

I tried looking around for some other files on the back-end that seem navigation-related, and did find this, so I thought I'd point it out (path, then code that's within the "dropdowns.js" file:

packages/theme_corporateamerica/themes/corporateamerica/js/dropdowns.js

<!--//--><![CDATA[//><!--
sfHover = function() {
   var sfEls = document.getElementById("nav").getElementsByTagName("LI");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>

tomreitz replied on Mar 30, 2011 at 11:29 am Permalink Reply

I just PMd you with the markup of your menu... no sub-levels beyond level one.

The script you mention shouldn't affect how many submenus display, because it just applies css style to the "active" menu - all the styling for submenus is handled in css by the :hover pseudoclass.

I guess you hard-coded the menu into your theme files. Is there a reason you did that instead of using the autonav block?

As I say, we can't work on getting 2nd and 3rd level submenus to display until the markup for them is in the page.

Hope this helps...

pcohen replied on Mar 30, 2011 at 12:27 pm Permalink Reply

You can the additional levels at my site map: ....org/search/

I didn't hard code the navigation in, it came that way with the theme. I got your PM, but I'm not sure what I'm supposed to do with it... Can you let me know what you were thinking?

tomreitz replied on Mar 30, 2011 at 12:42 pm Permalink Reply

My PM was just the markup of your menu, copied straight out of your site (right-click, view page source). I sent it to you to "prove" that there are no 2nd or 3rd levels of submenus in your website's menu. You don't really have to "do" anything with it.

I now see in your sitemap that you do indeed have pages in 2nd and 3rd levels... I guess they're somehow not being rendered in the theme.

Now that I think about it, your theme probably has a hard-coded autonav block in the theme files, and this autonav block could specify to show only one level.

I guess I'd recommend combing through your theme files (<site_root>/themes/<name_of_theme>/) and looking for the part that generates the menu (it might be in view.php). Then look at the configuration options of the nav block.

If you're not comfortable doing that, or don't know how, I could look at it for you. PM me with FTP info for your site.

pcohen replied on Mar 31, 2011 at 10:25 am Permalink Reply

Wow... thanks for all of the help! I thought I was in the clear, but we happen to have a few old dinosaur computers around the office, and I noticed that the drop-downs are staying down (and piling up on top of each other) on internet explorer. Any ideas?

tomreitz replied on Mar 31, 2011 at 10:57 am Permalink Reply

can you let me know what OS and browser the computer(s) in question are running?

pcohen replied on Mar 31, 2011 at 11:10 am Permalink Reply

I've found the issue on a newer laptop: Vista, Running IE 7.0.6000.16982
Several older desktops: XP Running IE 7.0.5730.13

tomreitz replied on Mar 31, 2011 at 11:34 am Permalink Reply

have you tried this fix?
http://www.builtfromsource.com/2006/10/23/a-fix-for-suckerfish-drop...

in your case, the CSS should be

#nav li:hover, #nav li.sfhover {
    position: static;
}

tomreitz replied on Mar 31, 2011 at 10:57 am Permalink Best Answer Reply

For the benefit of others who might come across this thread in the future, the fix was to edit the "submenu levels" setting of the hard-coded autonav block at the very bottom of this file <site_root>/themes/corporateamerica/elements/header.php in the Corporate America theme.

Forums

Developing (v7+)

Drop Down Navigation Code Help-- I need help to add another level

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?