Tips on creating a mega menu using css and javascript

Question

So basically what I am looking for is a menu with 5 content tabs and inside of each of those tabs is about 7 items. Each of these items would need to have the potential of having a submenu of its own.

I am looking for what would be the best way to structure this so that it is able to be read and updated easily using only css, javascript(no jquery), and html. must also be compatible with IE 8 (a PITA to me).

Thank you for any tips or suggestions.

jsfiddle.net/nWxrY/2/

https://i.stack.imgur.com/kN83O.png <- image of what I am looking to do

score 2 · Answer 1 · answered May 14 '13 at 12:04

The code didn't work because it was wrapped in an onLoad (on the left side of the fiddle).

I made a small css solution for it, which you can build upon from here. I hope it suits your needs. Under "Change request" > "Infrastructure service" you can find another, css-based submenu under the first item.

jsFiddle

I added the following to #t4:

<div class="mnuItem" id="chgInfrastructureMnu">
   <img src="arr1.pngx" style="margin:-35px 0px 0px -10px;position:absolute"/>
   <div class="mnuSubItem"><a href="#">item</a> <!-- this part I added -->
       <div class="mnuSub">
            <a href="#">subitem</a>
      </div>
   </div><br/>
       <a href="#">item</a><br/>
</div>

I also added the following css:

.mnuSubItem .mnuSub {
    display: none;
    position: absolute;
    left: 50px;
    top: 0;
}
.mnuSubItem {
    position:relative;
}
.mnuSubItem:hover .mnuSub {
    display: block;
}

Tips on creating a mega menu using css and javascript

1 Answers1