Create a mega e-commerce menu in CSS, HTML and JQuery
Mega menus are becoming quite common in e-commerce and blogs, because they offer a clean layout and the ability to navigate a website easily since they can display many products and categories.
We will create a simple yet slick menu using CSS3, HTML5 and JQuery. Then menu will look like the one below:
For our menu we will use nested lists, and the menu dropdown items will be clickable so users will need to click to activate the drop down.
HTML Markup
In the <head> tag add the following link and script tags:
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="script.js" type="text/javascript"></script>
In the <body> tag add the following mark-up.=:
<div id="wrapper">
<nav class="mega-menu-wrapper">
<ul class="menu">
<li><a href="#" >Computers & Parts</a>
<ul class="menu-dropdown">
<span class="block">
<li class="heading"><a href="">CPUs</a></li>
<li><a href="">AMD</a></li>
<li><a href="">Intel</a></li>
</span>
<span class="block">
<li class="heading"><a href="">Motherboards</a></li>
<li><a href="">AMD</a></li>
<li><a href="">Intel</a></li>
</span>
<span class="block">
<li class="heading"><a href="">Graphics Cards</a></li>
<li><a href="">ATI</a></li>
<li><a href="">Nvidia</a></li>
</span>
<span class="block">
<li class="heading"><a href="">PSU</a></li>
<li><a href="">Corsair</a></li>
<li><a href="">XFX</a></li>
</span>
<span class="block">
<li class="heading"><a href="">RAM</a></li>
<li><a href="">8GB</a></li>
<li><a href="">12GB+</a></li>
</span>
<span class="block">
<li class="heading"><a href="">Cables</a></li>
<li><a href="">HDMI</a></li>
<li><a href="">VGA</a></li>
</span>
<span class="block">
<li class="heading"><a href="">Audio</a></li>
<li><a href="">Sound Cards</a></li>
<li><a href="">Speakers</a></li>
</span>
<span class="block">
<li class="heading"><a href="">Cards</a></li>
<li><a href="">Bluetooth Cards</a></li>
<li><a href="">TV Tuners</a></li>
</span>
</ul>
</li>
<li><a href="#">Home Furniture</a>
<ul class="menu-dropdown">
<span class="block">
<li class="heading"><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
</span>
<span class="block">
<li class="heading"><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
</span>
<span class="block">
<li class="heading"><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
</span>
<span class="block">
<li class="heading"><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
</span>
<span class="block">
<li class="heading"><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
</span>
<span class="block">
<li class="heading"><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
</span>
<span class="block">
<li class="heading"><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
</span>
<span class="block">
<li class="heading"><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
</span>
</ul>
</li>
<li><a href="#">Clothing</a>
<ul class="menu-dropdown">
<span class="block">
<li class="heading"><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
</span>
<span class="block">
<li class="heading"><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
</span>
<span class="block">
<li class="heading"><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
</span>
<span class="block">
<li class="heading"><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
</span>
<span class="block">
<li class="heading"><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
</span>
<span class="block">
<li class="heading"><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
</span>
<span class="block">
<li class="heading"><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
</span>
<span class="block">
<li class="heading"><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
</span>
</ul>
</li>
</ul>
</nav>
</div>
We have only added a small amount of mark-up to avoid the page getting long.
[ Continue ]