smart seo mobile menu - Download Smart SEO-friendly Mobile Menu Plugin - jQuery smobileMenu

Download Smart SEO-friendly Mobile Menu Plugin – jQuery smobileMenu

By Posted on

This time I will share jQuery Plugin and tutorial about Smart SEO-friendly Mobile Menu Plugin – jQuery smobileMenu, hope it will help you in programming stack.

smart seo mobile menu - Download Smart SEO-friendly Mobile Menu Plugin - jQuery smobileMenu
File Size: 9.67 KB
Views Total: 1110
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

“

A smart, SEO-friendly navigation jQuery plugin that automatically transforms a nested HTML list into a fullscreen, mobile-friendly, multi-level navigation menu.

How to use it:

1. To get started, include jQuery and other required resources on the web page.

view source
1 <!-- Core -->
2 <link rel="stylesheet" href="dist/css/smart-mobile-menu.css">
3 <!-- Theme -->
4 <link rel="stylesheet" href="dist/css/smm-theme-default.css">
5 <!-- jQuery -->
6 <script src="/path/to/jquery.min.js"></script>
7 <!-- Plugin -->
8 <script src="dist/js/smart-mobile-menu.js"></script>

2. Add the following data attributes to the regular list based navigation menu:

  • data-smart-menu: trigger element to toggle the mobile menu
  • data-smart-menu-active-auto: auto open submenus
  • data-smart-menu-dropdown: enable/disable submenus
  • data-smart-menu-theme: theme name
  • data-smm-hidden: hide the menu in the mobile menu
  • data-smm-dropdown: enable/disable submenus in the mobile menu
view source
01 <ul id="menu"
02     data-smart-menu="#open_mobile_menu"
03     data-smart-menu-active-auto="true" 
04     data-smart-menu-dropdown="true"
05     data-smart-menu-theme="default">
06   <li><a href="#">Home</a></li>
07   <li class='test' data-smm-hidden="true"><a href="#"><a href="https://www.jqueryscript.net/tags.php?/Portfolio/">Portfolio</a></a></li>
08   <li>
09     <a href="#">Category</a>
10     <ul>
11       <li><a href="#">HTML5</a></li>
12       <li><a class="smm-active" href="#">CSS/CSS3</a></li>
13       <li>
14         <a href="#">JavaScript</a>
15         <ul>
16             <li><a href="#">jQuery</a></li>
17             <li><a href="#">VueJS</a></li>
18             <li><a href="#">ReactJS</a></li>
19         </ul>
20       </li>
21     </ul>
22   </li>
23   <li>
24     <a href="#">About</a>
25     <ul data-smm-dropdown="false">
26       <li><a href="#">About</a></li>
27       <li><a href="#">Contact</a></li>
28       <li><a href="#">Blog</a></li>
29     </ul>
30   </li>
31 </ul>

3. Create a trigger element to toggle the mobile menu.

view source
1 <button id="open_mobile_menu" type="button">Open <a href="https://www.jqueryscript.net/menu/">Menu</a></button>

4. You can also initialize the mobile menu in the JavaScript:

view source
1 $('#open_mobile_menu').smobileMenu({
2   dropdown: true,
3   getMenu: '#menu',
4   theme: 'default',
5   dropdownIcon: '<i class="fa fa-angle-down"></i>', //requires Font Awesome
6   linkActiveClass: 'smm-active',
7   activeAutoOpen: true
8 });

5. Create your own themes as you see in the smm-theme-default.css.

view source
01 ul.smobilemenu-theme-default {
02   background: black;
03   padding: 20px !important;
04   overflow-y: auto;
05  
06 }
07  
08 ul.smobilemenu-theme-default li {
09   border-bottom: #333 1px solid;
10   padding: 25px;
11 }
12  
13 ul.smobilemenu-theme-default li a {
14   font-size: 25px;
15   color: white;
16   text-decoration: none;
17   font-family: 'Roboto', sans-serif;
18 }
19  
20 ul.smobilemenu-theme-default li a.smm-active {
21   color: red;
22 }
23  
24 ul.smobilemenu-theme-default li a > i {
25   margin-left: 10px;
26 }
27  
28 /* close button */
29 #smobileMenu-close-btn {
30   position: absolute;<
source : jquery.net

Related posts: