Question

I’m trying to get my theme to add CSS class names to the ‘ul’ elements in the main-menu in Drupal 7.

HTML mock-up code:

<ul class="topnav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Tutorials</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Resources</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>

</ul>

As you can see, the “first level” ul has a class name of “topnav”, the following nested ul has a class name of “subnav”. I’m hooking up a jQuery drop down menu and want to apply it without the use of modules. Yes, I’ve tried the “Menu Attributes” module but that doesn’t work here.

I’ve been searching all day and cannot seem to find a complete solution. I know about superfish / and other themes that come with sf, but I’m wanting my own solution.

Edit:
Ok, I’ve gotten further. I have a menu with subs on which jquery is initially hiding the subs, however, I can’t get jquery to show the subs on a given event: hover over “ul.menu li span”

Here’s my CSS:

ul.menu {
    list-style: none;
    padding: 0 20px;
    margin: 0;
    float: left;
    width: 920px;
    background: #222;
    font-size: 1.2em;
    background: url(topnav_bg.gif) repeat-x;
}


ul.menu li {
    float: left;
    margin: 0;
    padding: 0 15px 0 0;
    position: relative; /*--Declare X and Y axis base for sub navigation--*/
}



ul.menu li a{
    padding: 10px 5px;
    color: #000;
    display: block;
    text-decoration: none;
    float: left;
}



ul.menu li a:hover{
    background: url(topnav_hover.gif) no-repeat center top;
}


ul.menu li span { /*--Drop down trigger styles--*/
    width: 17px;
    height: 35px;
    float: left;
    background: url(../images/bullet.png) no-repeat center top;
}




ul.menu li span{background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/



ul.menu li ul {
    list-style: none;
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
    left: 0; top: 35px;
    background: #333;
    margin: 0; padding: 0;

    float: left;
    width: 170px;
    border: 1px solid #111;
}



ul.menu li ul.menu li{
    margin: 0; padding: 0;
    border-top: 1px solid #252525; /*--Create bevel effect--*/
    border-bottom: 1px solid #444; /*--Create bevel effect--*/
    clear: both;
    width: 170px;
}



html ul.menu li ul.menu li a {
    float: left;
    width: 145px;
    background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
    padding-left: 20px;
}



html ul.menu li ul.menu li a:hover { 
    background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

jQuery:

jQuery(function($) {

$('ul.menu li ul').hide();

    $("ul.menu li ul").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

    $("ul.menu li span").hover(function() { //When trigger is clicked...

                                        // alert("No error!"); 

        //Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul.menu li ul").slideDown('fast').show(); //Drop down the subnav on click

        $(this).parent().hover(function() {
        }, function(){
            $(this).parent().find("ul.menu li ul").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
        });

        //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function() {
            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function(){  //On Hover Out
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });

});

If i edit this line: $(this).parent().find("ul.menu li ul").slideDown('fast').show(); to this: ("ul.menu li ul").slideDown('fast').show(); It will show ALL the submenus for all parent items – obiviously I only want to show the submenu of the parent menu that I’m hovering over. When I try to add back in $(this).parent()... It won’t show any subs at all.

Thank you.

Answer 1

Thank you all for your help. Here’s the corrected working code to get the tutorial i mentioned in my original post to work with Drupal 7:

Note: I’m using the main-menu as a block here.

CSS:

ul.menu {
    list-style: none;
    padding: 0 20px;
    margin: 0;
    float: left;
    width: 920px;
    background: #222;
    font-size: 1.2em;
    background: url(topnav_bg.gif) repeat-x;
    z-index:999;
}



ul.menu li {
    float: left;
    margin: 0;
    padding: 0 15px 0 0;
    position: relative; /*--Declare X and Y axis base for sub navigation--*/
}



ul.menu li a{
    padding: 10px 5px;
    color: #000;
    display: block;
    text-decoration: none;
    float: left;
}

ul.menu li a:hover{
    background: url(topnav_hover.gif) no-repeat center top;
}


ul.menu li span { /*--Drop down trigger styles--*/
    width: 17px;
    height: 35px;
    float: left;
    background: url(images/bullet.png) no-repeat center top;
}


ul.menu li span{background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/


ul.menu li ul {
    list-style: none;
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
    left: 0; top: 35px;
    background: #333;
    margin: 0; padding: 0;
    display:none;
    float: left;
    width: 170px;
    border: 1px solid #111;
}

ul.menu li ul.menu li{
    margin: 0; padding: 0;
    border-top: 1px solid #252525; /*--Create bevel effect--*/
    border-bottom: 1px solid #444; /*--Create bevel effect--*/
    clear: both;
    width: 170px;
}


html ul.menu li ul.menu li a {
    float: left;
    width: 145px;
    background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
    padding-left: 20px;
}


html ul.menu li ul.menu li a:hover { 
    background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

jQuery:

jQuery(function($) {


    $("ul.menu li ul").parent().append("<span></span>"); 

    $("ul.menu li span").click(function() { //When trigger is clicked...


        //Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul").slideDown('fast').show(); //Drop down the subnav on click

        $(this).parent().hover(function() {
        }, function(){
            $(this).parent().find("ul").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
        });

        //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function() {
            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function(){  //On Hover Out
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });

});

Partial page.tpl.php:

<?php if ($page['navigation'] || $main_menu): ?>
      <div id="navigation"><div class="section clearfix">

        <?php print theme('links__system_main_menu', array(
          'links' => $main_menu,
          'attributes' => array(
            'id' => 'main-menu',
            'class' => array('links', 'inline', 'clearfix'),
          ),
          'heading' => array(
            'text' => t('Main menu'),
            'level' => 'h2',
            'class' => array('element-invisible'),
          ),
        )); ?>

        <?php print render($page['navigation']); ?>

      </div></div><!-- /.section, /#navigation -->
    <?php endif; ?>

This implementation works without having to inject any additional classes into Drupal’s menu HTML.