Creating a Responsive Menu with SmartMenus

In today's digital age, having a functional, user-friendly navigation system is essential for providing a smooth browsing experience. A well-organized menu not only helps visitors find the content they need but also contributes significantly to the overall user experience (UX) and SEO performance of a website. One effective solution for building a responsive and stylish navigation system is by utilizing the SmartMenus jQuery plugin, combined with CSS and HTML for styling.

In this guide, we will walk through how to create a sleek, mobile-responsive navigation menu using SmartMenus and custom CSS. By the end of this article, you'll be equipped with the knowledge to enhance your website’s menu for both desktop and mobile users.

What is SmartMenus?

SmartMenus is a jQuery plugin designed to simplify the creation of dynamic navigation menus. It supports various types of menus, including horizontal and vertical navigation, multi-level dropdowns, and mobile-friendly toggle buttons. This plugin ensures your website's menu is responsive, customizable, and easy to use across different devices.

Key Features of SmartMenus

• Multi-level Dropdown Menus: Easily create complex, nested menus that can be revealed on hover or click.

• Mobile-Responsive: Automatically converts the navigation menu into a mobile-friendly toggle button on smaller screens.

• Smooth Animations: Offers smooth dropdown animations for a more refined user experience.

• Cross-Browser Compatibility: Works seamlessly across modern browsers, ensuring a consistent experience for all users.

How to Create a Mobile-Responsive Menu

Let’s explore the steps to build a mobile-friendly, modern navigation system with SmartMenus, including the required HTML, CSS, and JavaScript. The following steps outline the integration process:

1. Structure the HTML

<nav class="main-nav" role="navigation">
  <!-- Mobile menu toggle button (hamburger/x icon) -->
  <input id="main-menu-state" type="checkbox" />
  <label class="main-menu-btn" for="main-menu-state">
    <span class="main-menu-btn-icon"></span> Toggle main menu visibility
  </label>

  <h2 class="nav-brand"><a href="#">Brand</a></h2>

  <!-- Sample menu definition -->
  <ul id="main-menu" class="sm sm-blue">    
    <li><a href="http://www.smartmenus.org/">Home</a></li>
    <li><a href="http://www.smartmenus.org/about/">About</a></li>
    <li><a href="http://www.smartmenus.org/about/">About</a>
      <ul>
        <li><a href="http://www.smartmenus.org/about/introduction-to-smartmenus-jquery/">Introduction to SmartMenus jQuery</a></li>
        <li><a href="http://www.smartmenus.org/about/themes/">Demos + themes</a></li>
        <li><a href="http://vadikom.com/about/#vasil-dinkov">The author</a></li>
        <li><a href="http://www.smartmenus.org/about/vadikom/">The company</a>
          <ul>
            <li><a href="http://vadikom.com/about/">About Vadikom</a></li>
            <li><a href="http://vadikom.com/projects/">Projects</a></li>
            <li><a href="http://vadikom.com/services/">Services</a></li>
            <li><a href="http://www.smartmenus.org/about/vadikom/privacy-policy/">Privacy policy</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="http://www.smartmenus.org/download/">Download</a></li>
    <li><a href="http://www.smartmenus.org/support/">Support</a></li>
    <li><a href="http://www.smartmenus.org/docs/">Docs</a></li>
    <li><a href="#">Test 1</a></li>
    <!-- Additional menu items can go here -->
  </ul>
</nav>

2. Styling the Navigation Menu with CSS

To create a visually appealing and responsive menu, we need to apply custom CSS. Below is an example that combines modern styling with a mobile-friendly design.

.main-nav {
  background: #3092c0;
  background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.main-nav:after {
  clear: both;
  content: "\00a0";
  display: block;
  height: 0;
}

.nav-brand {
  float: left;
  margin: 0;
  font-family: "PT Sans Narrow", Arial, Helvetica, sans-serif;
}

.nav-brand a {
  display: block;
  padding: 13px 24px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
}

#main-menu {
  clear: both;
  box-shadow: none;
}

@media (min-width: 768px) {
  #main-menu {
    float: left;
    clear: none;
  }
}

#main-menu:before {
  content: '';
  display: block;
  height: 1px;
  background: #2e8cb8;
}

@media (min-width: 768px) {
  #main-menu:before {
    display: none;
  }

  .nav-brand { display: none;}
}

.main-menu-btn {
  float: right;
  margin: 10px;
  width: 29px;
  height: 29px;
  cursor: pointer;
}

.main-menu-btn-icon {
  position: absolute;
  top: 50%;
  left: 2px;
  height: 2px;
  width: 24px;
  background: #fff;
  transition: all 0.25s;
}

#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
  height: 0;
  background: transparent;
}

#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
  top: 0;
  transform: rotate(-45deg);
}

#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
  top: 0;
  transform: rotate(45deg);
}

#main-menu-state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

#main-menu-state:not(:checked) ~ #main-menu {
  display: none;
}

#main-menu-state:checked ~ #main-menu {
  display: block;
}

3. JavaScript for Mobile Menu Toggle

This script will manage the behavior of the mobile toggle button and enable smooth transitions for opening and closing the menu.

$(function() {
  $('#main-menu').smartmenus({
    subMenusSubOffsetX: 1,
    subMenusSubOffsetY: -8
  });

  var $mainMenuState = $('#main-menu-state');
  if ($mainMenuState.length) {
    $mainMenuState.change(function(e) {
      var $menu = $('#main-menu');
      if (this.checked) {
        $menu.hide().slideDown(250, function() { $menu.css('display', ''); });
      } else {
        $menu.show().slideUp(250, function() { $menu.css('display', ''); });
      }
    });

    $(window).bind('beforeunload unload', function() {
      if ($mainMenuState[0].checked) {
        $mainMenuState[0].click();
      }
    });
  }
});

4. Implementing SmartMenus Features

In addition to simple dropdown menus, SmartMenus allows for additional customization such as multi-level submenus. The code provided above demonstrates how to configure the submenus and create dropdown links.