Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

The javascript dropdown menu’s
 
jorries
Member
 
Avatar
Total Posts:  56
Joined:  2007-10-07
 

I really like the idea of the dropdown menu’s and tryd to mess a bit with the code and CSS myself. It was hard to change the varien code to something different for expirimenting, like adjusting the menu;s and submenu;s

Would it be possible for someone to who knows the source of the tabbed menu’s to post a website with instructions on how to properly configure and setup this menu? I would like to use the menu myself too.. I noticed on the magento community website (this website) the menu’s are also used.

 
Magento Community Magento Community
Magento Community
Magento Community
 
[db] DigitalBlueprint
Member
 
Avatar
Total Posts:  37
Joined:  2007-10-11
Eastbourne, UK
 

Hi Jorries,

It would probably be easier if you could specify what it is that you are trying to change on the menus. You should only need to edit the css to modify how the menu is displayed. For example you can see how I adapted the menu css slightly this afternoon to work with my vertical menu at http://bedroom.digitalblueprint.co.uk - take a look at the menu.css file that is imported by those pages, there is the original style in there referenced by #nav and the slightly modified code referenced by #left-nav

If you have any specific questions I’d be happy to help.

 
Magento Community Magento Community
Magento Community
Magento Community
 
jorries
Member
 
Avatar
Total Posts:  56
Joined:  2007-10-07
 

Its not the CSS
Its the menu definitions wink
Whenever i mess with them i find myself broken the menu or the layout doesent fit anymore correctly

Would you mind sharing some info? Thanks in advanche!

 
Magento Community Magento Community
Magento Community
Magento Community
 
[db] DigitalBlueprint
Member
 
Avatar
Total Posts:  37
Joined:  2007-10-11
Eastbourne, UK
 

Hmm. Sometimes it helps to have the code spaced properly with some comments on what’s happening. Hopefully the forums will keep the whitespace here…

<!-- Watch the id of the menumake sure it matches the css entries! -->
<
ul id="nav">

  <!-- 
First item of Root Menu starts -->
  <
li onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)" class="level0 parent">
    <
a href="http://bedroom.digitalblueprint.co.uk/catalog/category/view/s/accessories/id/9/"><span>Accessories</span></a>
    
    <!-- 
Sub Menu starts within its parents list item -->
    <
ul class="level0">
      <!-- 
Note the class levels, as far as I can tell these are just for additional style options -->
      <
li class="level1">
        <!-- 
Every entry must be a link as the a tags provide a lot of formatting -->
        <
a href="http://bedroom.digitalblueprint.co.uk/catalog/category/view/s/bookends/id/10/"><span>Bookends</span></a>
      </
li>
      <
li class="level1">
        <!-- 
Also note the span tags that must be around the text on each entry -->
        <
a href="http://bedroom.digitalblueprint.co.uk/catalog/category/view/s/clocks/id/11/"><span>Clocks</span></a>
      </
li>
      <!-- 
Take note of the last class on the final item in a menuthis allows for proper placement of dividers -->
      <
li class="level1 last">
        <
a href="http://bedroom.digitalblueprint.co.uk/catalog/category/view/s/storage/id/14/"><span>Storage</span></a>
      </
li>
    </
ul>
    <!-- 
Sub Menu ends -->
    
  </
li>
  <!-- 
Parents list item ends -->
  
  <!-- 
Second item of root menu -->
  <
li onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)" class="level0 parent">
    <
a href="http://bedroom.digitalblueprint.co.uk/catalog/category/view/s/childrens-bedding/id/15/"><span>Childrens Bedding</span></a>
    
    <!-- 
Sub Menu starts within its parents list item -->
    <
ul class="level0">
      <
li class="level1">
          <
a href="http://bedroom.digitalblueprint.co.uk/catalog/category/view/s/duvet-cover-sets/id/16/"><span>Duvet Cover Sets</span></a>
      </
li>
      <
li class="level1 last">
        <
a href="http://bedroom.digitalblueprint.co.uk/catalog/category/view/s/snuggle-sac-and-bed-tidys/id/17/"><span>Snuggle Sac &ampBed Tidy</span></a>
      </
li>
    </
ul>
    <!-- 
Sub Menu ends -->
    
  </
li>
  <!-- 
Second root menu item ends -->
  
  <!-- 
Third root menu item standard linkno sub menuNote that it doesn't have the parent class -->
  <li class="level0">
    <a href="http://bedroom.digitalblueprint.co.uk/catalog/category/view/s/clearance-items/id/30/"><span>Clearance Items</span></a>
  </li>
  <!-- Third root menu item ends -->

</ul>
<!-- Root menu ends -->

Let me know if that helps out at all. If you have some particular code that is broken, perhaps you could post it and someone here can see where the problem lies.

Note that I haven’t looked into the javascript that achieves the pop-outs yet so I’m not entirely certain that all of those class names are needed. From the css I would assume that the javascript just modifies the menu items to add/remove the ‘active’ class on mouseover/mouseout.

 
Magento Community Magento Community
Magento Community
Magento Community
 
jorries
Member
 
Avatar
Total Posts:  56
Joined:  2007-10-07
 

ok not completely got it working yet…
ive tryed to figure out the javascript but havent been able to locate what .js to include for the menus to appear..
also your code does not work with the orginal admin backend style

 
Magento Community Magento Community
Magento Community
Magento Community
 
[db] DigitalBlueprint
Member
 
Avatar
Total Posts:  37
Joined:  2007-10-11
Eastbourne, UK
 

You shouldn’t need to touch the JavaScript at all unless you are trying to change the fundamentals of how the menus operate.

The entire menu code is in js/varien/menu.js (it’s only 5 lines of actual code). Basically all it does it add/remove the ‘over’ css style to the lists as you mouse over them.

Also, that code shouldn’t be copied anywhere directly, it was simply a documented example of how the menu html is structured and how it works. You should have the drop down menus automatically generated by the drawItem function of the catalog navigation block if you are working with categories.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top