List items for menu parents, bins, and slots need IDs [#800308]

We need to define an ID scheme for all list items. Parents, bins, and slots need IDs for faster selection.

Comment	File	Size	Author
#5	Screenshot-sba.webtheming.com - Mozilla Firefox.png	198.86 KB	danielhonrade

Comments

Comment #1

danielhonrade commented 26 August 2010 at 05:52

When will this happen?

can you just use the numbering of drupal menu system for a while?

Comment #2

danielhonrade commented 26 August 2010 at 06:58

Can we add this leaf-0 ... for the mean time

function _megamenu_count_attributes($position,$total_count) {
  $zebra = ($position % 2) ? ' even' : ' odd';
  $halves = ($position < $total_count/2) ? ' half-1' : ' half-2';
  if ($position == 0) {
    $order = ' leaf-' . $position . ' first';
  }
  else if ($position == $total_count-1) {
    $order = ' leaf-' . $position . ' last';
  }
  else {
    $order = ' leaf-' . $position;
  }
  return $position.$zebra.$halves.$order;
}

I added position in return for li,and modified .module to receive this like 

<li class="megamenu-parent megamenu-parent-0 odd half-1 leaf-0 first">

  <li class="megamenu-slot megamenu-slot-0 odd half-1 leaf-0 first">
   
     <li class="megamenu-item megamenu-item-0 odd half-1 leaf-0 first">

Comment #3

Anonymous (not verified) commented 27 August 2010 at 14:20

Would you submit this as a patch?

Comment #4

danielhonrade commented 27 August 2010 at 23:52

Sure, here it is

--- Downloads/megamenu/megamenu.utilities.inc	2010-05-19 03:58:57.000000000 +0800
+++ Drupal/drupal6/sites/all/modules/megamenu/megamenu.utilities.inc	2010-08-26 14:50:53.757838930 +0800
@@ -89,15 +89,15 @@
   $zebra = ($position % 2) ? ' even' : ' odd';
   $halves = ($position < $total_count/2) ? ' half-1' : ' half-2';
   if ($position == 0) {
-    $order = ' first';
+    $order = ' leaf-' . $position . ' first';
   }
   else if ($position == $total_count-1) {
-    $order = ' last';
+    $order = ' leaf-' . $position . ' last';
   }
   else {
-    $order = '';
+    $order = ' leaf-' . $position;
   }
-  return $zebra.$halves.$order;
+  return $position.$zebra.$halves.$order;
 }

--- Downloads/megamenu/megamenu.module	2010-05-19 03:58:57.000000000 +0800
+++ Drupal/drupal6/sites/all/modules/megamenu/megamenu.module	2010-08-26 14:51:48.781839646 +0800
@@ -179,7 +179,7 @@
     $t1_position++;
 
     // TODO: Add an ID scheme (for faster js and css selection)
-    $output .= '  <li class="megamenu-parent'.$count_attributes.'">'."\n";
+    $output .= '  <li class="megamenu-parent megamenu-parent-'.$count_attributes.'">'."\n";
     $output .= '    <h2 class="megamenu-parent-title">'.l($branch['link']['link_title'], $branch['link']['link_path']).'</h2>'."\n";
 
     if ($branch['below']){
@@ -192,7 +192,7 @@
         $t2_position++;
 
         // TODO: Add na ID scheme (for faster js and css selection)
-        $output .= '      <li class="megamenu-slot '. $count_attributes .'">'."\n";
+        $output .= '      <li class="megamenu-slot megamenu-slot-'. $count_attributes .'">'."\n";
         $output .= '        <h3 class="megamenu-slot-title">'.l($twig['link']['link_title'], $twig['link']['link_path']).'</h3>'."\n";
 
         if ($twig['below']){
@@ -204,7 +204,7 @@
             $count_attributes = _megamenu_count_attributes($t3_position, $leaf_count);
             $t3_position++;
 
-            $output .= '           <li class="megamenu-item'.$count_attributes.'">'.l($leaf['link']['link_title'], $leaf['link']['link_path']).'</li>'."\n";
+            $output .= '           <li class="megamenu-item megamenu-item-'.$count_attributes.'">'.l($leaf['link']['link_title'], $leaf['link']['link_path']).'</li>'."\n";
           } // END leaf iteration
 
           $output .= '  	 </ul>'."\n";

Comment #5

danielhonrade commented 28 August 2010 at 00:13

Status	File	Size
new	Screenshot-sba.webtheming.com - Mozilla Firefox.png	198.86 KB

Hi FilmKnurd,

To show you why I added the tags in the patch, I attached my custom megamenu, I use the above patch to add necessary tags to customize each level and column

Comment #6

Anonymous (not verified) commented 28 August 2010 at 03:33

Thanks! Did you make that menu with this module?

Comment #7

danielhonrade commented 15 September 2010 at 07:03

Just the theming or conversion to megamenu and not the design, thanks to your module.

Comment #8

danielhonrade commented 2 September 2010 at 23:41

Here's the CSS

/* Navigation Area */
#navbar { width: 970px; padding: 0; height: 32px; position: relative; z-index: 100; background: url(images/nav_bg.png) 0 0 scroll no-repeat; margin: 15px auto 0; }
#navbar-inner, #navbar .block-megamenu, #navbar .block-megamenu .block-inner, #navbar .block-megamenu .block-inner .content { padding: 0; margin: 0; width: 970px; height: 32px; }
#navbar ul, #navbar ul li { margin: 0; padding: 0; display: block; list-style: none; float: left; }
#navbar ul li a { display: block; float: left; font-size: 1em; }
/* level 1 */
ul#megamenu-primary-links li a { line-height: 2em; color: #fff; padding: 0 30px; height: 32px; background: url(images/nav_div.png) 0 0 scroll no-repeat; }
ul#megamenu-primary-links li.megamenu-parent:hover h2 a { background-color: #F8F8F8; border-top: 1px solid #999; border-bottom: 1px solid #999; color: #101F59; }
ul#megamenu-primary-links li.first a { background: none; }
/* level 2 */
ul#megamenu-primary-links ul.megamenu-slots-columnar { padding: 0; display: none; }
ul#megamenu-primary-links ul.megamenu-slots-columnar a { color: #000; height: auto; padding: 5px 10px; line-height: normal; }
ul#megamenu-primary-links ul.megamenu-slots-columnar li.megamenu-slot { float: left; }
ul#megamenu-primary-links ul.megamenu-slots-columnar li.megamenu-slot h3 { float: none; }
ul#megamenu-primary-links ul.megamenu-slots-columnar li.megamenu-slot h3 a { float: none; }
ul#megamenu-primary-links ul.megamenu-slots-columnar ul.megamenu-items li { list-style: disc; display: list-item; float: none; }
ul#megamenu-primary-links li:hover ul.megamenu-slots-columnar { top: 32px !important; display: block; }
ul#megamenu-primary-links ul.megamenu-slots-columnar li.megamenu-slot { list-style: none; list-style-image: none; }
ul#megamenu-primary-links ul.megamenu-slots-columnar li.megamenu-slot a { background: none; font-family: Arial, Helvetica, sans-serif; color: #101F59; }
ul#megamenu-primary-links ul.megamenu-slots-columnar li.megamenu-slot h3.megamenu-slot-title a { padding: 5px 0; color: #333; font-weight: bold; font-size: .9em; }
ul#megamenu-primary-links ul.megamenu-slots-columnar ul.megamenu-items { float: none; padding-left: 20px; color: #101F59; }
ul#megamenu-primary-links ul.megamenu-slots-columnar ul.megamenu-items li.megamenu-item { padding: 0 0 3px; }
ul#megamenu-primary-links ul.megamenu-slots-columnar ul.megamenu-items li.megamenu-item a { float: none; font-size: .75em; padding: 0; line-height: 1.1em; }
ul#megamenu-primary-links ul.megamenu-slots-columnar ul.megamenu-items li.megamenu-item a:hover { text-decoration: underline; }
ul#megamenu-primary-links li.megamenu-parent h2.megamenu-parent-title { }
ul#megamenu-primary-links li.megamenu-parent-2 h2.megamenu-parent-title { }

/* Contrating Menu */
ul#megamenu-primary-links li.megamenu-parent-2 ul.megamenu-slots-columnar { left: -280px !important; height: 305px; width: 755px !important; background: url(images/mega_contracting_bg.png) 0 0 scroll no-repeat; }
ul#megamenu-primary-links li.megamenu-parent-2 ul.megamenu-slots-columnar li.megamenu-slot { position: absolute; }
ul#megamenu-primary-links li.megamenu-parent-2 ul.megamenu-slots-columnar li.megamenu-slot-0 { top: 5px; left: 10px; width: 160px; }
ul#megamenu-primary-links li.megamenu-parent-2 ul.megamenu-slots-columnar li.megamenu-slot-1 { top: 150px; left: 10px; width: 160px; }
ul#megamenu-primary-links li.megamenu-parent-2 ul.megamenu-slots-columnar li.megamenu-slot-2 { top: 5px; left: 190px; width: 170px; }
ul#megamenu-primary-links li.megamenu-parent-2 ul.megamenu-slots-columnar li.megamenu-slot-3 { top: 5px; left: 380px; width: 160px; }
ul#megamenu-primary-links li.megamenu-parent-2 ul.megamenu-slots-columnar li.megamenu-slot-4 { top: 6px; left: 559px; width: 160px; padding: 5px 10px; background: url(images/mega_block_bg.png) 0 0 scroll no-repeat; height: 130px; width: 160px; }
ul#megamenu-primary-links li.megamenu-parent-2 ul.megamenu-slots-columnar li.megamenu-slot-5 { top: 149px; left: 559px; width: 160px; padding: 5px 10px; background: url(images/mega_block_bg.png) 0 0 scroll no-repeat; height: 130px; width: 160px; }

Comment #9

jwilde commented 3 September 2010 at 08:36

Thanks Daniel!

Comment #10

asak commented 5 September 2010 at 21:59

Excellent stuff Daniel - thanks for sharing. I'll give it a shot ;)

Comment #11

jonthomas83 commented 8 September 2010 at 09:29

Can anyone comment on how this works with JavaScript disabled? Does the menu still appear (using CSS etc)? We're looking to use it but need a bit more info before we invest time in setting it up.

Many thanks

Comment #12

danielhonrade commented 8 September 2010 at 13:24

Hi jonthomas83,

I just deleted the megamenu.js just to test, and it still works fine since my custom megamenu has fixed width and I added css, display: none when not active.

Comment #13

Anonymous (not verified) commented 8 September 2010 at 16:18

The CSS part of the men should function like any menu. The javascript primarily improves the mouse over behavior and fixes the angle problem (the menu disappearing after moving the mouse from one column to another). So, the JS is really just to improve usability.

Comment #14

erykmynn commented 8 September 2010 at 18:50

I had originally envisioned a descending ID scheme, but I think it should be optional (admin option) because it adds a lot of HTML for those who only need class selection.

something like this

parent-1
parent-1-slot-2
parent-1-slot-2-item-3

It would be easy to implement, but I think it should have an admin option as well.

Comment #15

danielhonrade commented 9 September 2010 at 01:42

Hi erykmynn,

I implemented an ID system based on mlid from menu_links table, so that my css won't have to change every time I change the sequence of the main menu, and also for every megamenu-slot-columnar to follow specific formatting.

Here's my patch:

--- Downloads/megamenu/megamenu.module	2010-05-19 03:58:57.000000000 +0800
+++ Drupal/drupal6/sites/all/modules/megamenu/megamenu.module	2010-09-09 09:21:16.744208371 +0800
@@ -179,9 +179,8 @@
     $t1_position++;
 
     // TODO: Add an ID scheme (for faster js and css selection)
-    $output .= '  <li class="megamenu-parent'.$count_attributes.'">'."\n";
+    $output .= '  <li id="megamenu-' . $branch['link']['mlid'] . '" class="megamenu-parent megamenu-parent-'.$count_attributes.'">'."\n";
     $output .= '    <h2 class="megamenu-parent-title">'.l($branch['link']['link_title'], $branch['link']['link_path']).'</h2>'."\n";
-
     if ($branch['below']){
       $output .= '    <ul class="megamenu-bin megamenu-slots-'.$slot_orientation.'">'."\n";
 
@@ -192,7 +191,7 @@
         $t2_position++;
 
         // TODO: Add na ID scheme (for faster js and css selection)
-        $output .= '      <li class="megamenu-slot '. $count_attributes .'">'."\n";
+        $output .= '      <li id="megamenu-' . $twig['link']['mlid'] . '"  class="megamenu-slot megamenu-slot-'. $count_attributes .'">'."\n";
         $output .= '        <h3 class="megamenu-slot-title">'.l($twig['link']['link_title'], $twig['link']['link_path']).'</h3>'."\n";
 
         if ($twig['below']){
@@ -204,7 +203,7 @@
             $count_attributes = _megamenu_count_attributes($t3_position, $leaf_count);
             $t3_position++;
 
-            $output .= '           <li class="megamenu-item'.$count_attributes.'">'.l($leaf['link']['link_title'], $leaf['link']['link_path']).'</li>'."\n";
+            $output .= '           <li id="megamenu-' . $leaf['link']['mlid'] . '"  class="megamenu-item megamenu-item-'.$count_attributes.'">'.l($leaf['link']['link_title'], $leaf['link']['link_path']).'</li>'."\n";
           } // END leaf iteration
 
           $output .= '  	 </ul>'."\n";

Output:

<ul class="megamenu-menu horizontal megamenu-skin-sbaskin" id="megamenu-primary-links">
  <li class="megamenu-parent megamenu-parent-0 odd half-1 leaf-0 first" id="megamenu-527">
    <h2 class="megamenu-parent-title"><a href="/category/starting-managing-business">Starting &amp; Managing a Business</a></h2>
  </li>
  <li class="megamenu-parent megamenu-parent-1 even half-1 leaf-1" id="megamenu-528">
    <h2 class="megamenu-parent-title"><a href="/category/loans-grants">Loans &amp; Grants</a></h2>
  </li>
  <li class="megamenu-parent megamenu-parent-2 odd half-1 leaf-2" id="megamenu-529">
    <h2 class="megamenu-parent-title"><a href="/category/contracting">Contracting</a></h2>
    <ul class="megamenu-bin megamenu-slots-columnar" style="top: -9000px; left: 0px; width: 40px;">
      <li class="megamenu-slot megamenu-slot-0 odd half-1 leaf-0 first" id="megamenu-533">
        <h3 class="megamenu-slot-title"><a class="active" href="/">Getting Started</a></h3>
  	 <ul class="megamenu-items ">
           <li class="megamenu-item megamenu-item-0 odd half-1 leaf-0 first" id="megamenu-534"><a class="active" href="/">Am I a Small Business?</a></li>
           <li class="megamenu-item megamenu-item-1 even half-1 leaf-1" id="megamenu-535"><a class="active" href="/">Registering with CCR and ORCA</a></li>
           <li class="megamenu-item megamenu-item-2 odd half-1 leaf-2" id="megamenu-796"><a class="active" href="/">Getting a DUNS Number</a></li>
           <li class="megamenu-item megamenu-item-3 even half-2 leaf-3" id="megamenu-797"><a class="active" href="/">Determining Size Standards</a></li>
           <li class="megamenu-item megamenu-item-4 odd half-2 leaf-4 last" id="megamenu-798"><a class="active" href="/">Identifying NAICS Codes</a></li>
  	 </ul>
      </li>
      <li class="megamenu-slot megamenu-slot-1 even half-1 leaf-1" id="megamenu-799">
        <h3 class="megamenu-slot-title"><a class="active" href="/">Doing Business with the Government</a></h3>
  	 <ul class="megamenu-items ">
           <li class="megamenu-item megamenu-item-0 odd half-1 leaf-0 first" id="megamenu-800"><a class="active" href="/">Small Business Federal Contracting Tools</a></li>
           <li class="megamenu-item megamenu-item-1 even half-1 leaf-1" id="megamenu-801"><a class="active" href="/">Small Business Innovation Research (SBIR)</a></li>
           <li class="megamenu-item megamenu-item-2 odd half-2 leaf-2" id="megamenu-802"><a class="active" href="/">Contracting Support</a></li>
           <li class="megamenu-item megamenu-item-3 even half-2 leaf-3 last" id="megamenu-803"><a class="active" href="/">Contracting Rulebook</a></li>
  	 </ul>
      </li>
      <li class="megamenu-slot megamenu-slot-2 odd half-1 leaf-2" id="megamenu-804">
        <h3 class="megamenu-slot-title"><a class="active" href="/">Contracting Opportunities</a></h3>
  	 <ul class="megamenu-items ">
           <li class="megamenu-item megamenu-item-0 odd half-1 leaf-0 first" id="megamenu-805"><a class="active" href="/">Federal Business Opportunities</a></li>
           <li class="megamenu-item megamenu-item-1 even half-1 leaf-1" id="megamenu-806"><a class="active" href="/">Federal Procurement Database Systems - Next Generation</a></li>
           <li class="megamenu-item megamenu-item-2 odd half-1 leaf-2" id="megamenu-807"><a class="active" href="/">USA Spends</a></li>
           <li class="megamenu-item megamenu-item-3 even half-1 leaf-3" id="megamenu-808"><a class="active" href="/">GSA Schedules</a></li>
           <li class="megamenu-item megamenu-item-4 odd half-1 leaf-4" id="megamenu-809"><a class="active" href="/">Sub-Contracting Opportunities</a></li>
           <li class="megamenu-item megamenu-item-5 even half-2 leaf-5" id="megamenu-810"><a class="active" href="/">Green Contracting Opportunities</a></li>
           <li class="megamenu-item megamenu-item-6 odd half-2 leaf-6" id="megamenu-811"><a class="active" href="/">Manufacturing Opportunities</a></li>
           <li class="megamenu-item megamenu-item-7 even half-2 leaf-7" id="megamenu-812"><a class="active" href="/">Energy Reduction Opportunities</a></li>
           <li class="megamenu-item megamenu-item-8 odd half-2 leaf-8 last" id="megamenu-813"><a class="active" href="/">Veterans &amp; Service Disabled Owned Small Business Contracting</a></li>
  	 </ul>
      </li>
      <li class="megamenu-slot megamenu-slot-3 even half-2 leaf-3" id="megamenu-814">
        <h3 class="megamenu-slot-title"><a class="active" href="/">For Contracting Officials</a></h3>
  	 <ul class="megamenu-items ">
           <li class="megamenu-item megamenu-item-0 odd half-1 leaf-0 first" id="megamenu-815"><a class="active" href="/">Size Standards</a></li>
           <li class="megamenu-item megamenu-item-1 even half-1 leaf-1" id="megamenu-816"><a class="active" href="/">Historically Underutilized Business Zones (HUBZone)</a></li>
           <li class="megamenu-item megamenu-item-2 odd half-1 leaf-2" id="megamenu-817"><a class="active" href="/">Small Business Goaling</a></li>
           <li class="megamenu-item megamenu-item-3 even half-1 leaf-3" id="megamenu-818"><a class="active" href="/">Non-Manufacturer Waives</a></li>
           <li class="megamenu-item megamenu-item-4 odd half-1 leaf-4" id="megamenu-819"><a class="active" href="/">Fraud, Waste and Abuse</a></li>
           <li class="megamenu-item megamenu-item-5 even half-2 leaf-5" id="megamenu-820"><a class="active" href="/">Protests</a></li>
           <li class="megamenu-item megamenu-item-6 odd half-2 leaf-6" id="megamenu-821"><a class="active" href="/">Federal Acquisition Regulations (FAR)</a></li>
           <li class="megamenu-item megamenu-item-7 even half-2 leaf-7" id="megamenu-822"><a class="active" href="/">Procurement Center Representatives</a></li>
           <li class="megamenu-item megamenu-item-8 odd half-2 leaf-8 last" id="megamenu-823"><a class="active" href="/">Area Directors</a></li>
  	 </ul>
      </li>
      <li class="megamenu-slot megamenu-slot-4 odd half-2 leaf-4" id="megamenu-824">
        <h3 class="megamenu-slot-title"><a class="active" href="/">Recommended Reading</a></h3>
  	 <ul class="megamenu-items ">
           <li class="megamenu-item megamenu-item-0 odd half-1 leaf-0 first" id="megamenu-825"><a class="active" href="/">Leading Your Company</a></li>
           <li class="megamenu-item megamenu-item-1 even half-1 leaf-1" id="megamenu-826"><a class="active" href="/">Preparing for Growth</a></li>
           <li class="megamenu-item megamenu-item-2 odd half-1 leaf-2" id="megamenu-827"><a class="active" href="/">Growing Your Business</a></li>
           <li class="megamenu-item megamenu-item-3 even half-2 leaf-3" id="megamenu-828"><a class="active" href="/">Running a Business</a></li>
           <li class="megamenu-item megamenu-item-4 odd half-2 leaf-4 last" id="megamenu-829"><a class="active" href="/">Business Law &amp; Regulations</a></li>
  	 </ul>
      </li>
      <li class="megamenu-slot megamenu-slot-5 even half-2 leaf-5 last" id="megamenu-830">
        <h3 class="megamenu-slot-title"><a class="active" href="/">Popular Content</a></h3>
  	 <ul class="megamenu-items ">
           <li class="megamenu-item megamenu-item-0 odd half-1 leaf-0 first" id="megamenu-831"><a class="active" href="/">Leading Your Company</a></li>
           <li class="megamenu-item megamenu-item-1 even half-1 leaf-1" id="megamenu-832"><a class="active" href="/">Preparing for Growth</a></li>
           <li class="megamenu-item megamenu-item-2 odd half-1 leaf-2" id="megamenu-833"><a class="active" href="/">Growing Your Business</a></li>
           <li class="megamenu-item megamenu-item-3 even half-2 leaf-3" id="megamenu-834"><a class="active" href="/">Running a Business</a></li>
           <li class="megamenu-item megamenu-item-4 odd half-2 leaf-4 last" id="megamenu-835"><a class="active" href="/">Business Law &amp; Regulations</a></li>
  	 </ul>
      </li>
    </ul>
  </li>
  <li class="megamenu-parent megamenu-parent-3 even half-2 leaf-3" id="megamenu-530">
    <h2 class="megamenu-parent-title"><a href="/category/guidance-training">Guidance &amp; Training</a></h2>
  </li>
  <li class="megamenu-parent megamenu-parent-4 odd half-2 leaf-4" id="megamenu-531">
    <h2 class="megamenu-parent-title"><a href="/category/sba-direct">SBA Direct</a></h2>
  </li>
  <li class="megamenu-parent megamenu-parent-5 even half-2 leaf-5 last" id="megamenu-532">
    <h2 class="megamenu-parent-title"><a href="/category/lenders">For Lenders</a></h2>
  </li>
</ul>

Thanks

Comment #16

jonthomas83 commented 9 September 2010 at 14:15

@danielhonrade & @FilmKnurde, thank you - will crack on and install! :) Appreciate your time!

Comment #17

jonthomas83 commented 9 September 2010 at 15:17

Sorry for the double post, have just installed megamenu and the drop down doesn't work with JavaScript disabled? :s

Can anyone, who has this working, advise how I go about it?

Many thanks

English

Gainesville, FL, US

commented 19 November 2010 at 20:02

subscribe on this! I'll try the patch in #15 in the meantime.

Comment #21

lobo235 commented 17 January 2011 at 17:33

Assigned:	Unassigned	» lobo235
Status:	Active	» Fixed

I just committed danielhonrade's patch to the 6.x-2.x branch. See commit #483630.

Comment #22

Anonymous (not verified) commented 17 January 2011 at 19:37

Status:

Fixed

» Closed (fixed)

Comment #23

Anonymous (not verified) commented 18 January 2011 at 15:13

Status:

Closed (fixed)

» Fixed

Comment #24

1 February 2011 at 15:20

Status:

Fixed

» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

List items for menu parents, bins, and slots need IDs

Comments

Comment #1

Comment #2

Comment #3

Comment #4

Comment #5

Comment #6

Comment #7

Comment #8

Comment #9

Comment #10

Comment #11

Comment #12

Comment #13

Comment #14

Comment #15

Comment #16

Comment #17

Comment #18

Comment #19

Comment #20

Comment #21

Comment #22

Comment #23

Comment #24

News items

Our community

Documentation

Drupal code base

Governance of community