Hello, so none develper needing assistance...
I am trying to change a class tag to a sub menus <ul> tag within Drupal 7. I have a main nav and sub nav each has the class - menu.
I am trying to change the sub nav class attribute. So...

<ul class="menu">
  <li>

<ul class="menu">
  <li>

What I am trying to do is cahnge the second class to be class="sub-menu".
I am trying something like this...

function nasaepdn_menu_tree($variables) {
  if (preg_match("/\bKEYWORD-submenu\b/i", $variables['tree'])){
    return '<ul class="menu KEYWORD-menu">' . $variables['tree'] . '</ul>';
  } else {
    return '<ul class="menu KEYWORD-submenu">' . $variables['tree'] . '</ul>';
  }
}

But I am not familiar enough to get it to do what I want. IF you have any suggestions or links to help me figure it out that would be awesome!
Thanks
Tim

Recommended Answers

All 7 Replies

You can do it easily using jQuery. Once page is loaded change class using jQuery.

Maybe, the php would be in the template file and go across the whole site. I could link to the .js script. Do you have any examples or know more of the syntax I should look up. I haven't written any jQuerry yet.
Thanks

post your html code for ul, li combination.

Code is from firebug - thie is a Drupal 7 website...

   <div class="block-inner clearfix">
    <div class="content clearfix">
    <div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1">
    <ul class="menu">
          </div>
          </div>
         </div>
         </div>
    <div id="block-menu-menu-about-sub-menu" class="block block-menu block-menu-about-sub-menu block-menu-menu-about-sub-menu even block-without-title">
   <div class="block-inner clearfix">
    <div class="content clearfix">
    <ul class="menu">
         <li id="epdn" class="first leaf">
         <a class="sub-menu" href="/epdn">ePDN</a>
         </li>
         <li id="ceismc" class="leaf">

...

So, I am not hand coding, otherwise this would be easy. See how both <ul class="menu"> are the same. I am trying to figure out how to get the second one to be <ul class="sub-menu">

Thanks for taking a look at it...
Tim

Member Avatar for diafol

The sub-menu class seems to refer to the a link, so applying the sub-menu class to the ul tag may not work in the way expected - it depends on the contents of the .sub-manu class.

I would look to code for this in CSS:

The code you've pasted looks poorly formed:

(missing open div)
    <div class="block-inner clearfix">
        <div class="content clearfix">
            <div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1">
                 <ul class="menu">
            </div>
        </div>
    </div>
 </div>
<div id="block-menu-menu-about-sub-menu" class="block block-menu block-menu-about-sub-menu block-menu-menu-about-sub-menu even block-without-title">
    <div class="block-inner clearfix">
        <div class="content clearfix">
            <ul class="menu">
                <li id="epdn" class="first leaf">
                    <a class="sub-menu" href="/epdn">ePDN</a>
                </li>
                <li id="ceismc" class="leaf">

I can't see how this is supposed to work. It looks like a complete mess. The first <ul> should have content and a close </ul> tag. Unless html is appended to it via js - but still it should be well formed (e.g. empty content inside open/close tags).

My bad on the code grab. The code is Fine. This is a Drupal 7 website. So the code is coming from there through firebug. I just did not open all lines of code for viewing.

See link for screen shot showing the visual of seeing thorugh Firefox/firebug. And I am attaching the code again to show the closed tags etc.

<a target="_blank" href='http://www.whelandesign.com/screenshot.png">Attached is a screen shot</>

My basic point is - is there a way to change the second ul class to sub-menu <ul class="sub-menu">. Whether through jQuery or php. Is there a way to count the ul tags and re-write the second one as sub-menu?

    <div id="zone-menu-wrapper" class="zone-wrapper zone-menu-wrapper clearfix">
    <div id="zone-menu" class="zone zone-menu clearfix container-12">
    <div id="region-menu" class="grid-12 region region-menu">
    <div class="region-inner region-menu-inner">
    <div class="alpha-debug-block">
    <div id="block-menu-block-1" class="block block-menu-block block-1 block-menu-block-1 odd block-without-title">
    <div class="block-inner clearfix">
    <div class="content clearfix">
    <div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1">
    <ul class="menu">
              <li class="first leaf active menu-mlid-263">
              <li class="leaf has-children menu-mlid-481">
              <li class="leaf menu-mlid-482">
              <li class="leaf menu-mlid-483">
              <li class="leaf menu-mlid-502">
              <li class="leaf menu-mlid-485">
              <li class="leaf menu-mlid-484">
              <li class="last leaf menu-mlid-503">
              <select>
    </ul>
    </div>
    </div>
    </div>
    </div>
    <div id="block-menu-menu-about-sub-menu" class="block block-menu block-menu-about-sub-menu block-menu-menu-about-sub-menu even block-without-title">
    <div class="block-inner clearfix">
    <div class="content clearfix">
   <ul class="menu">
              <li id="epdn" class="first leaf">
              <li id="ceismc" class="leaf">
              <li id="learn" class="leaf">
              <li id="orbit" class="last leaf">
              <select>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

Sorry for confusion. Thanks for your patience!!!

Member Avatar for diafol

You can do it vias jquery. However, this seems to be a structural imperative to the page, rather than a js/css fudge to prettify a div or something, so in that respect, I would try to change the underlying code that produces the html in the first place. I haven't used Drupal in a looooong time so I can't really comment on the way it produces this menu - probably some obscure class!

jQuery can be made to target specific items:

$("#block-menu-menu-about-sub-menu ul").attr('class', sub-menu');

However, you seem to already have a hook for CSS - probably no need to use js/jQuery:

#block-menu-menu-about-sub-menu ul.menu{
    //put sub-menu rules here
}

The specificity of this should trump the vanilla .menu (or ul.menu) rules

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.