Drop Down Primary Links with Submenus

ccdoss - June 10, 2007 - 02:55

Hello,
I am trying (desperately) to address the lack of drop down menus in Drupal 5. (I'll post whatever solutions I come up with once they work). I am starting with modifying themes to allow drop downs in the primary links. I am new to css and js, but I believe I've come up with a way to get them to work. I followed the teachings of Faqing (http://www.thanhsiang.org/faqing/node/59), and have played around with his template. He modified Garland to get drop downs. However, they must be primary links, and they must be in the header for this method to work. This has caused me issues when going to another theme (i.e. fancy, newsportal), for various reasons. I'd like to let the primary links stay where they are by default for the given theme.

I've examined the html source that's output, and when the primary links are output by the page.tpl.php file, it only outputs the top-level menus. When the primary links are placed in the header, and expanded, it outputs all menus and submenus. I believe I could create drop down functionality in the css and js (using suckfish), if I could get the code that prints the primary links, i.e.

<?php
 print theme('navlinks', $primary_links); 
?>

to output the submenus as well. Can someone help?

» Login or register to post comments

This might help

mjwest10 - June 10, 2007 - 05:46

Hello,
I've been wrestling through these same issues. To answer your specific question, you can use this line instead of the one above.

print theme('menu_tree',variable_get('menu_primary_menu',0));

Check out this address for more details: http://drupal.org/node/68578

What I have found though is that using the nice menu module worked best for me. They have worked out most of the kinks for having dropdown menu's (like sucker fish has). I think its worth the time to figure out their CSS and override there style sheets in your own themes style.css. I discovered that all the work arounds I was trying to do manually they have also done. So I just built off of theres. Hope this helps.

Yes, drop-down menu can be

faqing - June 10, 2007 - 10:45

Yes, drop-down menu can be default Primary Links:
In page.tpl.php, change

<?php if (isset($primary_links)) : ?>
<?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
<?php endif; ?>
<?php if (isset($secondary_links)) : ?>
<?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?>
<?php endif; ?>

<?php if (isset($primary_links)) { ?>
<div id="nav">  
<?php print theme('menu_tree',variable_get('menu_primary_menu',0)); ?>
</div>
<?php } ?>

In style.css
set the position of #nav (for drop down menu.)

I just updated my theme. Now it use default primary links.
Thank you both for inspiring me...

Drop-down for Primary Links on Modified Slash Theme

ccdoss - June 12, 2007 - 02:34

Well, Thanks to you guys' help, I was able to get slash working.
I had to do the following:
1. add fix-ie.css to the theme directory. I grabbed it from faqing's theme. I believe it's also in Garland's directory.
2. In page.tpl.php, two changes (I can't quote some things, like "<", here, because it's code):
a. Replace script type="text/javascript... with:

        <style type="text/css" media="print">@import "<?php print base_path() . path_to_theme() ?>/print.css";</style>
    <!--[if lt IE 7]>
    <style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/fix-ie.css";</style>
    <![endif]-->

<script type="text/javascript"><!--//--><![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);

//--><!]]></script>
        

b. Replace

<?php
 print theme('links', $primary_links, array('id' => 'primary')) 
?>

with

<div id="nav">
<?php print theme('menu_tree', variable_get('menu_primary_menu',0)); ?>
</div></div> 

3. Add the following to the style.css sheet. You'll need to change the colors around, but this'll get you started.

#nav{
  float: left;
  clear: left;
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-weight: bold;
}

#nav ul li{
  float: left;
  font-size: 1.2em;
  margin-right: 5px;
  background: #660000 url(cl.png) no-repeat top left;
}

#nav ul li ul{
	position: absolute;
	width: 20em;
	left: -999em;
}

#nav li:hover {
  background: #990000 url(cl.png) no-repeat top left;
}

#nav li:hover ul{
	left: auto;
}

#nav a:link, 
#nav a:visited, 
#nav a:hover, 
#nav a:active {
  display: block;
  background: transparent url(cr.png) no-repeat top right;
  color: #fff;
  padding: 1px 6px;
  text-decoration: none;
}


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;


}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover

ul, #nav li li li.sfhover ul {
	   left: auto;
    background: #5ab5ee;
	}

#nav li:hover, #nav li.sfhover {
      left: auto;
      background: #2385c2;

}

#nav li:hover a, #nav li.sfhover a {
    color: #ffffff;

}

#nav li li:hover a, #nav li li.sfhover a {
    color: #ffffff;

}

#nav li:hover {
	background: #2385c2;
}

I hope this helps. I'll probably look at fancy next, although I'd rather their primary links be closer to the center of the page.

I found another way of creating drop down menus but...

bwax - July 28, 2007 - 14:50

Hello guys,
For some time i wanted to add drop down menu on primary links. I tried using css and js on static html page using css(tableless html page). It worked perfect. Now i want to do the same in drupal. But the only problem is how to add those div dynamically so that drop down menus can appear where they are supposed to appear.

I want the output(HTML) to look like this on primary links.

<div id="nav">
<ul>
        <li><a href="test1">Business1</a></li>
        <li><a href="test1">Business2</a></li>
        <li><a href="test1">Business3</a></li>
        <li><a href="test1">Business4</a></li>

//****** the div mentioned bellow will be the drop down menu for Business4 above.**********
              <div>
                    <ul>
                          <li><a href="test1">Drop down1</a></li>
                          <li><a href="test1">Drop down2</a></li>
                    </ul>
              </div>
//******end of drop down menu********
        <li><a href="test1">Business5</a></li>
</ul>   
</div> 

Now if anybody can help out to bring something like the above output html, then we are going to have another way of implementing drop down menu.
Please keep in mind that the second div for drop down menu is not necessarily important as long as the lay out will look like the way it looks on the given codes.

Hope to hear from you soon.

Regards,
Bwax

NB: I will post full code once i manage to create drop down menu.

When it comes to coding.......the only limit is your imagination..!!!!

Hey Chris, Thanks for

tkolanko - October 11, 2007 - 13:01

Hey Chris,

Thanks for posting this, I was able to get it working. One quick question that I can't figure out, is there a way I can make the submenus display vertical instead of horizontal under it's parent?

Thanks

Yahoo YUI (Menu)

drupalhizmetleri - September 8, 2007 - 19:36

try the dropdown menu "Yahoo YUI (Menu)" http://drupal.org/project/yui

Are you a new user on Drupal.org

Drupal.org is being redesigned. We would like to ask you a few questions about Drupal.org if you are willing to do an interview.