Need help with the instructions

mskrbic - January 15, 2008 - 18:29
Project:
Version:5.x-1.1
Component:Code
Category:support request
Priority:normal
Assigned:mskrbic
Status:active
Description

Hello,

I am trying to use your mod because I LOVE Suckerfish for static pages. However, I don't understand your instructions. In the instructions, you state to add "theme_dropdown_menu($pid, $attributes = array())" to the page.tpl.php. But where exactly do you put it? I am using the primary links for my menu bar and use this "

<?php
print theme('links', $primary_links, array('class' => 'links primary-links'))
?>
" for this area. I am new to drupal and know a lot about CSS, but not php. Your help will be greatly appreciated.

Thanks!
Melissa

#1

thehandyman - January 19, 2008 - 01:18

I'm having the same problem/question. Melissa, did you figure this out? If so, would you mind please posting what you did? Thanks!

#2

jrust - February 5, 2008 - 23:03

This is what I put to make it work:
Replace the theme('links'....) line with:
<?php print theme_dropdown_menu(2); ?>
The number 2 Drupal's default id for the primary menu. You can find out the id for other menus by going to Administer -> Site Building -> Menus and looking at the link when you hover over a link like Delete Menu.

#3

ajsloan - February 6, 2008 - 17:07

I replaced the theme(links... like above but no menu. Can anyone provide more instructions? Thanks

#4

stabilpa - February 14, 2008 - 16:17

It might be there, just hidden by your CSS or lack thereof for the <ul class=" dropdown_menu"> tag that the module produces ...

Take a look at your page's source and see if you can find that tag. Chances are you'll see some nested unordered lists that correspond to your Primary Links.

I'm trying to figure this one out too. I'll post my workaround if I encounter any success.

#5

tonino66 - February 15, 2008 - 10:13

I am using this code for my page:

original:

    <div class="navigation">
      <?php print theme('links', $primary_links); ?>
    </div>

changed ( page.tpl.php ) to:

    <div class="dropdown_menu">
      <?php print theme_dropdown_menu(variable_get('menu_primary_menu',0)); ?>
    </div>

The class can be changed to your own css style.

#6

stabilpa - February 20, 2008 - 21:52

Yes, <?php print theme_dropdown_menu(2); ?> works.

If you want to see it in action and start figuring out how to deal with the dropdown_menu.css file, you can start by switching to the fluid Garland theme, making the code change there, and then implementing the following style changes:

.dropdown_menu,
.dropdown_menu ul { /* all lists */
padding: 0;
margin: 0 10em 0 0;
list-style: none;
line-height: 1;
}

Not much here. Just have make sure the list-style is none so you don't get any bullets.
----

.dropdown_menu a {
display: block;
width: 10em;
}

Again, not much.
----

.dropdown_menu li { /* all list items */
margin: 0;
padding: 0;
background-image: none;
float: right;
width: 10em; /* width needed or else Opera goes nuts */
}

At least for the Garland theme, you want to float your menu right rather than left. If it floats left, the first menu items tend to hide under the Garland theme logo. Also, if you refer to any images in the the dropdown_menu.css, those images should probably be in the modules/dropdown_menu/ tree somewhere. For example, if you want a background image like this:

background:transparent url(images/bg-menu-hover.png) repeat-x scroll center;

then you would need an "modules/dropdown_menu/images" subdirectory that contains "bg-menu-hover.png".

The next bit isn't contained in the distribution, but I thought it helped out a lot with establishing a color and style for the lettering of the primary links:

.dropdown_menu li a, .dropdown_menu li a:link, .dropdown_menu li a:visited {
padding: .25em 0 0 0;
color: #fff;
width: 10em;
}

Let's change the background on the dropdown menu from that awful orange to something that fits Garland a bit better (not perfectly, just better):

.dropdown_menu li ul { /* second-level lists */
position: absolute;
background: #000099;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

And the rest of the dropdown_menu.css file should remain the same:

.dropdown_menu li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 10em;
}

.dropdown_menu li:hover ul ul,
.dropdown_menu li:hover ul ul ul,
.dropdown_menu li.sfhover ul ul,
.dropdown_menu li.sfhover ul ul ul {
left: -999em;
}

.dropdown_menu li:hover,
.dropdown_menu li.hover {
    position: static;
}

.dropdown_menu li:hover ul,
.dropdown_menu li li:hover ul,
.dropdown_menu li li li:hover ul,
.dropdown_menu li.sfhover ul,
.dropdown_menu li li.sfhover ul,
.dropdown_menu li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

If you want to change the background image during hover, you can add an appropriate background attribute to anything that deals with hovering. It just makes positioning a little bit dicier, but anyone who knows CSS (unlike me, who knows nothing about CSS...) could probably finesse this into submission.

It's a good module. All it needs is some CSS know-how. :-)

Thanks.

 
 

Drupal is a registered trademark of Dries Buytaert.