preg_match assistance

[timwhelan]

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

[vibhaJ]

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

[timwhelan]

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

[vibhaJ]

post your html code for ul, li combination.

[timwhelan]

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

[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).

[timwhelan]

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!!!

[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