Gyancode

A free library of HTML, CSS, JS

Search This Blog

Thursday 15 September 2016

Mega menu for mobile off-canvas

<link type="text/css" rel="stylesheet" href="menubar/jquery.mmenu.all.css" />
<script type="text/javascript" src="menubar/jquery.mmenu.min.all.js"></script>

<script type="text/javascript">
    var jq = jQuery.noConflict();
    jq(function() {
        jq('#navlinks').mmenu();
    });   
</script>

<style>
.nav { background:#9f0f1a; line-height:40px; -moz-box-sizing: border-box; box-sizing:border-box; width:70%; height:40px; padding:0 0px; display:block; position:fixed; top:0; left:0; z-index:9999999999 !important; border-right:1px #6c040c solid;}
.nav a {background:url(../images/nav-icon.png) no-repeat 10px 10px; display:block; width:auto; height:40px; float:left; padding-left:40px; font-size:13px; font-weight:bold; color:#fff; text-decoration:none; text-transform:uppercase;}

</style>
<div class="nav"><a href="#navlinks" id="menucat">Products Categories</a></div>


<div id="navlinks1">
  <div id='left-categories1'>
    <ul>
      <li> <a href='list/mobilesandtablets'>Mobiles and Tablets</a>
        <div class='megamenu1'>
          <ul>
            <li> <a href='list/mobiles'>Mobiles <span class="ico"></span></a>
              <ul>
                <li><a href="list/smartphones">Smartphones</a></li>
                <li><a href="list/feature-phones">Feature Phones</a></li>
              </ul>
            </li>
            <li> <a href='list/mobile-accessories'>Mobile Accessories <span class="ico"></span></a>
              <ul>
                <li><a href="list/batteries">Batteries</a></li>
                <li><a href="list/cases-covers">Cases & Covers</a></li>
                <li><a href="list/mobile-spare-parts">Mobile Spare Parts</a></li>
                <li><a href="list/screen-guards">Screen Guards</a></li>
              </ul>
            </li>
          </ul>
          <ul>
            <li> <a href='list/bluetooth-devices'>Bluetooth Devices<span class="ico"></span></a>
              <ul>
                <li><a href="list/bluetooth-devices">Bluetooth Speakers</a></li>
                <li><a href="list/bluetoothheadphone">Headphones</a></li>
                <li><a href="list/bluetoothheadsets">Headsets</a></li>
                <li><a href="list/stereo-headsets">Stereo Headsets</a></li>
              </ul>
            </li>
            <li> <a href='list/headphones-headsets-earphones'>Headphones And Headsets And Earphones<span class="ico"></span></a>
              <ul>
                <li><a href="list/carchargers">Earphones</a></li>
                <li><a href="list/earphones">Car Kits</a></li>
                <li><a href="list/headphones">Headphones</a></li>
                <li><a href="list/headsets">Headsets</a></li>
              </ul>
            </li>
            <li><a href='list/memory-cards'>Memory Cards <span class="ico"></span></a></li>
            <li><a href='list/on-the-go-pendrives'>On-the-Go Pendrives <span class="ico"></span></a></li>
            <li><a href='list/tablets'>Tablets <span class="ico"></span></a></li>
          </ul>
          <ul>
            <li> <a href='list/all-other-essentials'>All Other Essentials <span class="ico"></span></a>
              <ul>
                <li><a href="list/chargers">Chargers</a></li>
                <li><a href="list/cleaning-kits">Cleaning Kits</a></li>
                <li><a href="list/docks-stands">Docks And Stands</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>



No comments :

Post a Comment