Gyancode

A free library of HTML, CSS, JS

Search This Blog

Showing posts with label Mega Menu Off Canvas Menu for all screen. Show all posts
Showing posts with label Mega Menu Off Canvas Menu for all screen. Show all posts

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>