CODEWITHSUNDEEP
javascripthtmlcssmegamenu
Alex Hazlett
Alex Hazlett

Reputation: 43

Tips on creating a mega menu using css and javascript

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.sstatic.net/kN83O.png <- image of what I am looking to do

Upvotes: 0

Views: 385

Answers (1)

Sander Koedood
Sander Koedood

Reputation: 6337

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;
}

Upvotes: 2

Related Questions