I must be missing something because it seems like a simple feature, but I cannot figure out how to get the main menu (top nav) to display as a drop down (or expanded) for more choice. Example: About Us on hover would display Contact Us, Our Organization and Directions. Thanks for any help. I did search current help section with nothing found.

CommentFileSizeAuthor
#4 bluemasters-multilevel-dropdown.jpg254.93 KBgtsopour

Comments

gtsopour’s picture

Title: Support of CSS Multilevel drop-down menus (Expandable Top Nav Menu) » Creation of CSS Multilevel drop-down menus (Expandable Top Nav Menu)

nopulse (Full name JeremyM)

I am working on this issue.
Will fillow a comprehensive patch file with all appropriate changes.

menu_tree example

<?php 
$main_menu_tree = menu_tree(variable_get('menu_main_links_source')); 
print drupal_render($main_menu_tree);
?>
gtsopour’s picture

Title: Expandable Top Nav Menu » Support of CSS Multilevel drop-down menus (Expandable Top Nav Menu)
Component: User interface » Code
Assigned: Unassigned » gtsopour
Category: support » feature
gtsopour’s picture

Title: Creation of CSS Multilevel drop-down menus (Expandable Top Nav Menu) » Support of CSS Multilevel drop-down menus (Expandable Top Nav Menu)

I am working on this issue.
Will follow a comprehensive patch file with all appropriate changes.

But also, you could make the following changes:
1. Remove from div #navigation the "overflow:hidden;" at style.css

2. Change div #navigation in page--front.tpl.php and page.tpl.php with the following code

<div id="navigation">
<?php $main_menu_tree = menu_tree(variable_get('menu_main_links_source')); print drupal_render($main_menu_tree);?>
</div><!--EOF:navigation-->

3. Change style for main navigation links at style.css

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

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

#navigation ul.menu li a { outline:none; padding: 5px 10px; text-decoration: none; display:block; color:#7A8090; font-size:17px; font-weight:bold; text-align:center; }

#navigation ul.menu li a:hover, #navigation ul.menu li a.active{ text-decoration:none; color:#ffffff; border-radius: 5px; -moz-border-radius: 5px; background: #0d0f13; }

#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: #0d0f13; }

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

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

#navigation ul.menu li.expanded ul.menu li a { font-size: 15px; color:#7A8090; 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; }

/*******************/
gtsopour’s picture

StatusFileSize
new254.93 KB

CSS Multilevel drop-down menus screenshot...

nopulse’s picture

Thanks for the input but I was unsuccessful. I am not a programmer to say the least so I will wait for the proper patch. I followed the steps verbatim but all that happened was the menu disappeared. I tried the steps individually and when I changed the php code the menu disappeared. If I only change the .css #navigation information, the menu styles are not present and the menu is represented as only links with no styles. Any help would be appreciated. I will post my old code below. Thanks for your help.

My current .php

My current .ccs # navigation

/* PRIMARY MENU */
#navigation ul li{ margin:0px; padding:0px; text-align:center; list-style-image:none; text-align:center; list-style-image:none; display:block; float:left;}

#navigation li a {
padding: 5px 0 0 0;
text-decoration: none;
display:block;
color:#7A8090;
font-size:160%;
font-size:14px;
font-weight:bold;
width:93px;
height:32px;
text-align:center;
}

#navigation li:hover a, #navigation li.active a {
text-decoration:none;
color:#ffffff;
font-size:14px;
-moz-border-radius: 5px 5px 5px 5px;
background-color: #0D0F13;
font-weight:bold;
outline:none;
}

#navigation ul {
margin:0px;
float:right;
}

#navigation ul li {
display: block;
float: left;
border:none;
margin: 0 0 0 0 ;
}

#navigation ul li ul {
left: -999em;
margin: 0;
padding: 0;
position: absolute;
width: 196px;
z-index: 12;
}

gomezsal’s picture

I'm also interested in adding drop-down menus. Keeping close watch on this!

gtsopour’s picture

Try to use the following code with menu_tree

<div id="navigation">
<?php $main_menu_tree = menu_tree(variable_get('menu_main_links_source')); print drupal_render($main_menu_tree);?>
</div><!--EOF:navigation-->

instead of your default main_menu printing code

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

thanks

nopulse’s picture

My apologies, I was not clear. When using this php code (the new code)...

It only causes my entire menu to disappear. Thanks again.
Sorry I can't get the div tags to display but I am including them.

gtsopour’s picture

Pleaser try this code:

<!--navigation-->
<div id="navigation">
<?php $main_menu_tree = menu_tree('main-menu'); 
print drupal_render($main_menu_tree);?>
</div><!--EOF:navigation-->

Menu name ('main-menu') defined hardcoded. Is your menu still disappeared?

nopulse’s picture

Worked like a charm. Thanks SO MUCH! ¡Muchas Gracias!

gtsopour’s picture

I can not understand how this happened and you have problem with variable_get('menu_main_links_source'). Could you tell me what do you get with printing this variable?

<?php print variable_get('menu_main_links_source'); ?>

Your current drupal installation is a drupal 7 upgraded from drupal 6 or a fresh installation?

nopulse’s picture

When I use the code

print variable_get('menu_main_links_source');

The menu does NOT appear.

I am using a fresh install of Drupal 7 not and upgrade.

gtsopour’s picture

Finally could you use the following code and tell me your results?

<div id="navigation">
<?php 
$menu_name = variable_get('menu_main_links_source', 'main-menu');
$main_menu_tree = menu_tree($menu_name); 
print drupal_render($main_menu_tree); 
?>
</div><!--EOF:navigation-->

Thanks

gtsopour’s picture

Status: Active » Fixed

Done and commited

nopulse’s picture

That code also works just fine. No issues with the menu.

skounis’s picture

Status: Fixed » Closed (fixed)
mircmirc’s picture

Version: 7.x-1.0 » 7.x-1.1

Sorry to bring this topic back into attention, but using a fresh install of the 7.x-1.1, I'm getting exactly the same problem as the OP. Apart from changing some colors in the CSS, I haven't altered the original files at all, so I have no idea what might be causing this. At first I thought it might have been because I had so many menus that they didn't fit in one row (thought that maybe it's protected somehow from overlapping other menu buttons) - but then I disabled as many as I could in order to make them fit on a single one, and I'm still not getting any drop-down menus.
Searching for "menu" brought me here, I really hope I'm asking in the right place! I realize that this was originally for a previous version, but I'm getting the same exact "symptoms" with this one.

gtsopour’s picture

Category: feature » bug
Issue tags: +Bluemasters theme, +bluemasters