App-Like Mega Menu with CSS3 and jQuery - AM Menu

- September 20, 2018

The "AM Menu" is a responsive, customizable and App style mega menu that comes with built-in image lightbox, dropdowns, (auto colorful) cloud tags and variety of CSS3 and SVG animations.

AM Menu UI Features

  1. Place for Brand Logo
  2. Search Form
  3. Navigation Links
  4. Dropdowns
  5. Items Grid
  6. Photo Gallery
  7. Colorful Cloud Tags

Main Features

  • Fully Responsive, Android, iPhone and Windows Phone Friendly (looks on these devices like a native app).
  • Unlimited number of Main Items, Sub Items and Dropdowns can be added.
  • Automatically Set Colors for Cloud Tags and Makes them Attractive and Colorful.
  • Built-in Image Gallery with Light Box, in which Unlimited number of Images can be added.
  • Automatically Detect Caption of the Images from alt text and Show them on the Image.
  • Animated Search Form and Menu Trigger.
  • Clean and Easily Modifiable HTML Structure.
  • Chrome, Safari, Firefox, Opera, IE7+, IOS, Android and windows phone supported.
  • CSS3, SVG and jQuery Animations Enabled.
  • Font Awesome icons and +38 Macaron SVG icons Installed.
  • User and SEO Friendly, Easy to Navigate and Implement.

How to use:

1. Include the jQuery library, am-menu.js, menu main.js script file and am-menu.css file between the <head> tag of your website.

<!--jQuery-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <!--AM Menu Plugin Script-->
   <script src="js/am-menu.js"></script>
   <!--AM Menu Main Script-->
   <script src="js/main.js"></script>
   <!--AM Menu CSS-->
   <link rel="stylesheet" href="css/am-menu.css" />

2. Create a HTML structure, and add your main links, sub items, dropdowns and images links into it.

<!--AM Menu Start-->
<header class="am-header">
   <div class="logo" title="Place for your Logo">AM Menu</div>
   <div class="search-trigger">
      <div class='s-wrapper'>
         <div id='circle'></div>
         <div id='bar'></div>
      </div>
   </div>
   <!--Search-trigger-->
   <div class="search-container">
      <div class="search-box">
         <div class="search-icon">
            <i class="fa fa-search search-icon"></i>
         </div>
         <form action="#search_page_link" class="search-form">
            <input type="text" name="q" placeholder="Search" id="search" autocomplete="off">
         </form>
      </div>
      <!--//search-box-->
   </div>
   <!--//search-container-->
   <!--Menu Icon-->
   <div class="menu-trigger"></div>
</header>
<nav class="am-container">
   <h3> Photo Gallery  </h3>
   <ul class="grid-items">
      <li> <img src="images/sandwich.jpg" /> </li>
      <li> <img src="images/espresso.jpg" alt="Coffee Time, Smart Mega Menu" /></li>
      <li> <img src="images/mobile.jpg" /> </li>
      <li> <img src="images/space.jpg" alt="A man in Space" /></li>
      <li> <img src="images/desert.jpg" alt="What a nice desert scene" />  </li>
      <li>  <img src="images/boat.jpg" /> </li>
      <li> <img src="images/bicycle.jpg" /> </li>
      <li>  <img src="images/bird.jpg" /> </li>
   </ul>
   <h3>Navigation List Links </h3>
   <ul class="list-item">
   <li class="has-sub">  <span class="item-icon"> <img src="icons/mypaint.svg" /> </span> My Paint</li>
   <div class="sub-items">
      <ul>
         <li><a href="#4"> sub item 1from main item </a></li>
         <li class="dropdown"> Drop down </li>
         <!--dropdown-->
         <ul class="dropdown-items">
            <li><a href="#5"> dropdown item 1 </a> </li>
            <li> <a href="#5"> dropdown item 2 </a> </li>
            <li> <a href="#5"> dropdown item 3 </a> </li>
            <li> <a href="#5"> dropdown item 4 </a> </li>
         </ul>
         <li> <a href="#5"> sub item 3 </a> </li>
         <li> <a href="#5"> sub item 4 </a> </li>
         <li class="dropdown">Another Drop down </li>
         <!--dropdown-->
         <ul class="dropdown-items">
            <li> <a href="#5"> dropdown item 1 </a> </li>
            <li> <a href="#5"> dropdown item 2 </a> </li>
            <li> <a href="#5"> dropdown item 3 </a> </li>
            <li> <a href="#5"> dropdown item 4  </a></li>
            <li> <a href="#5"> dropdown item 5 </a></li>
            <li> <a href="#5"> dropdown item 6  </a></li>
         </ul>
      </ul>
      <!--sub-items-->
   </div>
   <!--//sub-items-->
   <li class="has-sub"> <span class="item-icon"> <img src="icons/calc.svg" /> </span> Calculator </li>
   <div class="sub-items">
      <h4> Anything Can be Put Here  </h4>
      <p> Some Grid items.... </p>
      <ul class="grid-items">
         <li> <img src="images/desert.jpg" alt="What a nice desert scene" />  </li>
         <li>  <img src="images/boat.jpg" /> </li>
         <li> <img src="images/bicycle.jpg" /> </li>
         <li>  <img src="images/bird.jpg" /> </li>
      </ul>
      <p> Some List Items..... </p>
      <ul>
         <li><a href="#4"> Web Design Tutorials</a></li>
         <li><a href="#4"> Codehim Best Plugins</a></li>
         <li><a href="#4">Free Web Projects </a></li>
   </div>
   <!--//sub-items-->
   <li> <a href="#1"> <span class="item-icon"> <img src="icons/file-manager.svg" /> </span> File Manager </a> </li>
   <li> <a href="#1"> <span class="item-icon"> <img src="icons/text-editor.svg" /> </span> Text Editor </a> </li>
   </ul>
   <h3>Colorful Cloud Tags</h3>
   <ul class="cloud-tags">
      <li><a href="#2"> Insurance </a> </li>
      <li> <a href="#2"> Policy </a> </li>
      <li> <a href="#2"> jQuery </a> </li>
      <li> <a href="#2"> JS </a> </li>
      <li> <a href="#2"> PHP </a></li>
      <li> <a href="#2"> MySQL </a></li>
      <li> <a href="#2"> XML </a></li>
      <li> <a href="#2"> Angular </a></li>
      <li> <a href="#2"> ASP </a></li>
      <li> <a href="#2"> SQL </a></li>
      <li> <a href="#2"> HTML5 </a></li>
      <li> <a href="#2"> CSS3 </a></li>
   </ul>
</nav>
<!-- End AM Mega Menu -->
    

3. Enable the App Style Mega Menu with default settings.

$("body").amMenu({
  // options here
});

4. To change the color scheme, just put the name of theme in the main.js script file.

    theme: 'default-theme',
Available Theme names are as follows:

Flat Colors

  1. theme:'red',
  2. theme:'green',
  3. theme:'blue',
  4. theme:'bnp',
  5. theme:'orange',
  6. theme:'black',
  7. theme:'pink',
  8. theme:'gol-b',
  9. theme:'greenish',
  10. theme:'wood',

Gradient Colors

  1. theme:'flickr',
  2. theme:'fb-messenger',
  3. theme:'moonlit',
  4. theme:'park-life',
  5. theme:'d2f',
  6. theme:'steel-man',
  7. theme:'amethyst',
  8. theme:'between-clouds',
  9. theme:'crazy-orange',
  10. theme:'endless-river',

5. Decide whether to make the App Style Mega Menu fixed on scroll. Default: true.

$("body").amMenu({
  fixed: true
});

6. Apply the text shadow and glass effect to the App Style Mega Menu.

$("body").amMenu({
  textShadow: false,
  glassEffect: false
});

7. Apply a background overlay to the main content when the App Style Mega Menu is activated. Default: true.

$("body").amMenu({
  dimOverLayer: true
});
 

Start typing and press Enter to search