Main Menu with second level

Hi Kristen,

Could you please describe for me how you did it? I would like to do the same but do not know the exact steps.

Thanks,

Piet

hi.

I tried to assign the super fish menu to the header area, but it didn't work. the theme doesn't print header at all in the latest stable d7 version.

I even tried doing something like: <?php print ($header); ?>, but that didn't work.

could anybody please help with this?

Mohammed.

I tried to use nicemenu from http://drupal.org/project/nice_menus and have successfully to use dropdown menu, but could not put the menu on the main menu of the old block. :)
I put block into Header Top Right.
How to put on main menu block ?

Hi,

I also tried to use the module 'Nice Menu'. After this, I applied the CSS command "display:none" to the #navigation codeline of the theme's css file.
After this, with CSS and the command "position:absolute" I moved the block to the navigation region and customized the block like the original navigation bar. It's a simple way to have second levels of submenus in this theme.

PD: Sorry for my bad english...
Joan Galtés.

@donbuche could you please describe in more details how you did it? specifically how you moved the block to the navigation bar?

I changed some code to produce a good dropdown menu.

in page.tpl.php on line 53, change

print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'clearfix'))));

to

 $menu_name = variable_get('menu_main_links_source', 'main-menu');
            $main_menu_tree = menu_tree($menu_name); 
            print drupal_render($main_menu_tree); 

Then in style.css on line 348 change:

#navigation ul#main-menu li a {
font-size: 1.2em;
color: #6D7E8F;
}
#navigation ul#main-menu li a.active,
#navigation ul#main-menu li a.active-trail,
#navigation ul#main-menu li a:hover,
#navigation ul#main-menu li a:focus {
color: #0B72B7;
}

to

/* 1st level */
#navigation ul.menu {
display:block;
padding:0;
margin:0;
}

#navigation ul.menu li { display: inline-block; vertical-align: middle; padding:0 5px 0 0; margin:0; }

#navigation ul.menu li.last { padding:0; }

#navigation ul.menu li a {
outline:none;
padding: 5px 10px;
text-decoration: none;
display:block;
color: #6D7E8F;
font-size: 1.2em;
text-align:center;
}

#navigation ul.menu li a:hover, #navigation ul.menu li a.active, #navigation ul.menu li a.active-trail {
text-decoration:none;
color:#cccccc;
border-radius: 5px;
-moz-border-radius: 5px;
background-color: #1E517E;
}

#navigation ul.menu li a:after { content: none; }

#navigation ul.menu li.expanded { position: relative; }

#navigation ul.menu li.expanded:hover a {
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
background: #1E517E;
color: #CCCCCC;
}

/* 2nd level */
#navigation ul.menu li.expanded ul.menu {
width: 190px;
z-index:100;
font-size:12px;
padding:0;
background: #1E517E;
display: none;
position: absolute;
color: #FFFFFF;
}

#navigation ul.menu li.expanded:hover > ul.menu { display: block; }

#navigation ul.menu li.expanded ul.menu li a { font-size: 15px; color:#cccccc; padding:10px; display:block; width:180px; text-align:left; border-radius:0; -moz-border-radius:0; }

#navigation ul.menu li.expanded ul.menu li a:hover { color: #ffffff; }

/* 3rd, 4th, 5th, (...) level */
#navigation ul.menu li.expanded ul ul { display: none; left: 190px; top:0; }

Thanks to Blue Masters theme for the original code which I've changed a bit.

Thanks!
Looks good but i have a little issue.

My menu looks like this:

- Node 1
- Node 2 (child: - Node 3)

If I am on node 2 or node 3 everything went fine and the dropdown menu appears.
But if i am on my homesite (node 1) I can only click on node 2.
Node 3 remains hidden.

Where can I change this behaviour?

Have you checked 'show as expanded' on the menu edit page for node/2? All pages that have children must have this checked.

Thanks a lot.
I haven't seen this option. Now it works fine - as it should be.

Definitly one of the best themes out there. Great work!
Still I would love to see support for two or multilevel menues. Any plans to do so?

Big thanks to tumbledown100 for his code !! It work very well !!

I had just a problem to display "inline" the first menu with IE. I finally found a solution on internet.

Just replace the "#navigation ul.menu li ...." code with this on :

#navigation ul.menu li {
display:inline-block;
margin:0;
list-style:none;
background-image:url(images/menu_divider.jpg);
background-repeat:no-repeat;
background-position:top left;
text-align:center;
zoom: 1;
*display:inline;
padding:0;
}

I'm really not an CSS expert, so it's probably possible to do better, but at least it work...

I am having a problem getting this to work in IE. I implemented the fix that makes it inline, but the levels below never show up when I scroll over. Works great in FF, of course it's IE that's being difficult!

Thanks so much for this code, worked great!

Issue cleanup.

hi, I know the topic is cleared but when I changed the code exactly as you are, sidebar first region is shifted to bottom of the content. I am a newbie of CSS, could you please help some way? thanks.

My little contribution: the code proposed by tumbledown100 works (thank you!) but is language-neutral and so does not work for multi-language site.

To correct this, rather use the code below for page.tpl.php, i.e on line 53 of page.tpl.php, change

<?php
print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'clearfix'))));
?>

to

<?php 
    if (module_exists('i18n')) {
        $main_menu_tree = i18n_menu_translated_tree(variable_get('menu_main_links_source', 'main-menu'));
    } else {
        $main_menu_tree = menu_tree(variable_get('menu_main_links_source', 'main-menu'));
    }
    print drupal_render($main_menu_tree);
?>

Can this be adjusted so this works on the horizontal menu as well? Now it only works on the side vertical menus.

Thanks