Mobile nav menu

html css responsive-design mobile

Solution 1:

Below code working proper for mobile navigation

HTML

<div class="header__logo">
                                <a href="index.html">
                                    Logo
                                </a>
                            </div>
                            <div class="mobile-navigation-icon d-block d-xl-none" id="mobile-menu-trigger">
                                    <i>Menu</i>
                                </div>
    
    <!--====================  mobile menu overlay ====================-->
    <div class="mobile-menu-overlay" id="mobile-menu-overlay">
        <div class="mobile-menu-overlay__inner">
            <div class="mobile-menu-overlay__header">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <div class="col-md-6 col-8">
                            <!-- logo -->
                            <div class="logo">
                                <a href="index.html">
                                    Logo
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6 col-4">
                            <!-- mobile menu content -->
                            <div class="mobile-menu-content text-right">
                                <span class="mobile-navigation-close-icon" id="mobile-menu-close-trigger"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mobile-menu-overlay__body">
                <nav class="offcanvas-navigation">
                    <ul class="mainMenu">
                        <li><a href="index.html">Home</a></li>
                        <li class="has-children"><a>Dropdown menu</a>
                            <ul class="sub-menu">
                                <li><a href="#">Dropdown menu</a></li>
                                <li><a href="#">Dropdown menu</a></li>
                                <li><a href="#">Dropdown menu</a></li>
                                <li><a href="#">Dropdown menu</a></li>
                            </ul>
                        </li>
                        <li class="has-children"><a>Dropdown menu</a>
                            <ul class="sub-menu">
                                <li><a href="#">Dropdown menu</a></li>
                                <li><a href="#">Dropdown menu</a></li>
                                <li><a href="#">Dropdown menu</a></li>
                                <li><a href="#">Dropdown menu</a></li>
                            </ul>
                        </li>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Investors</a></li>
                        <li><a href="#">Partner</a></li>
                        <li><a href="#">Contact us</a></li>
                    </ul>
                    
                </nav>
            </div>
        </div>
    </div>

CSS

.mobile-menu-overlay, .page-oppen-off-sidebar {
          position: fixed;
          left: 0px;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: #333333;
          overflow: auto;
          -webkit-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
          -o-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
          transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
          z-index: 9999;
          background: rgba(0, 0, 0, 0.7);
          cursor: url(../images/icons/light-close.png) 16 16, pointer;
          visibility: hidden;
          opacity: 0;
        }

        .mobile-menu-overlay__inner, .page-oppen-off-sidebar__inner {
          -webkit-transform: translateX(120%);
              -ms-transform: translateX(120%);
                  transform: translateX(120%);
          width: 400px;
          height: 100%;
          float: right;
          cursor: default;
          background: #CD7341;
          -webkit-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
          -o-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
          transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
          overflow-y: auto;
        }

        @media only screen and (max-width: 479px) {
          .mobile-menu-overlay__inner, .page-oppen-off-sidebar__inner {
            width: 300px;
          }
        }

        .mobile-menu-overlay.active, .page-oppen-off-sidebar.active {
          visibility: visible;
          opacity: 1;
        }

        .mobile-menu-overlay.active .mobile-menu-overlay__inner, .page-oppen-off-sidebar.active .mobile-menu-overlay__inner {
          -webkit-transform: translateX(0%);
              -ms-transform: translateX(0%);
                  transform: translateX(0%);
        }

        .mobile-menu-overlay__header, .page-oppen-off-sidebar__header {
          background-color: #ffffff;
          padding: 15px 0;
        }

        .mobile-menu-overlay__header .mobile-navigation-close-icon, .page-oppen-off-sidebar__header .mobile-navigation-close-icon {
          position: relative;
          cursor: pointer;
          height: 40px;
          width: 40px;
          line-height: 40px;
          display: inline-block;
        }

        .mobile-menu-overlay__header .mobile-navigation-close-icon:before, .page-oppen-off-sidebar__header .mobile-navigation-close-icon:before {
          position: absolute;
          top: 23px;
          left: 8px;
          content: '';
          width: 24px;
          height: 3px;
          background: #333333;
          -webkit-transform-origin: 50% 50%;
              -ms-transform-origin: 50% 50%;
                  transform-origin: 50% 50%;
          -webkit-transform: rotate(45deg);
              -ms-transform: rotate(45deg);
                  transform: rotate(45deg);
          -webkit-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
          -o-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
          transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
        }

        .mobile-menu-overlay__header .mobile-navigation-close-icon:after, .page-oppen-off-sidebar__header .mobile-navigation-close-icon:after {
          position: absolute;
          top: 23px;
          left: 8px;
          content: '';
          width: 24px;
          height: 3px;
          background: #333333;
          -webkit-transform-origin: 50% 50%;
              -ms-transform-origin: 50% 50%;
                  transform-origin: 50% 50%;
          -webkit-transform: rotate(-45deg);
              -ms-transform: rotate(-45deg);
                  transform: rotate(-45deg);
          -webkit-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
          -o-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
          transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
        }

        .mobile-menu-overlay__header .mobile-navigation-close-icon:hover, .page-oppen-off-sidebar__header .mobile-navigation-close-icon:hover {
          color: #CD7341;
        }

        .mobile-menu-overlay__header .mobile-navigation-close-icon:hover:before, .mobile-menu-overlay__header .mobile-navigation-close-icon:hover:after, .page-oppen-off-sidebar__header .mobile-navigation-close-icon:hover:before, .page-oppen-off-sidebar__header .mobile-navigation-close-icon:hover:after {
          -webkit-transform: none;
              -ms-transform: none;
                  transform: none;
        }
            
                .mobile-menu-overlay__body, .page-oppen-off-sidebar__body {
          padding: 20px 40px 100px;
        }

        .mobile-menu-overlay__body .offcanvas-navigation, .page-oppen-off-sidebar__body .offcanvas-navigation {
          /* onepage style */
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li {
          border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li > a, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li > a {
          display: block;
          color: #ffffff;
          padding-top: 18px;
          padding-bottom: 18px;
          font-size: 16px;
          font-weight: 500;
          line-height: 1.5;
          -webkit-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
          -o-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
          transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li > a:hover, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li > a:hover {
          color: #ffffff;
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li:last-child, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li:last-child {
          border-bottom: 0;
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li.has-children, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li.has-children {
          position: relative;
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li.has-children.active .menu-expand:before, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li.has-children.active .menu-expand:before {
          content: '\f106';
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li.has-children .menu-expand, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li.has-children .menu-expand {
          position: absolute;
          right: 0;
          top: 12px;
          width: 40px;
          height: 40px;
          background: rgba(255, 255, 255, 0.1);
          color: #fff;
          text-align: center;
          line-height: 40px;
          cursor: pointer;
          -webkit-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
          -o-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
          transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li.has-children .menu-expand:hover, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li.has-children .menu-expand:hover {
          background: rgba(255, 255, 255, 0.2);
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li.has-children .menu-expand:before, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li.has-children .menu-expand:before {
          content: '\f107';
          font-size: 18px;
          font-family: "Font Awesome 5 Pro";
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li.has-children .sub-menu, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li.has-children .sub-menu {
          padding: 12px 0 14px 10px;
          border-top: 1px solid rgba(255, 255, 255, 0.15);
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li.has-children .sub-menu li, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li.has-children .sub-menu li {
          border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li.has-children .sub-menu li a, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li.has-children .sub-menu li a {
          display: block;
          font-size: 15px;
          color: rgba(255, 255, 255, 0.7);
          font-weight: 500;
          line-height: 1.5;
          padding: 10px 0;
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li.has-children .sub-menu li a:hover, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li.has-children .sub-menu li a:hover {
          color: #ffffff;
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li.has-children .sub-menu li:last-child, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li.has-children .sub-menu li:last-child {
          border-bottom: 0;
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li.has-children .sub-menu li.has-children, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li.has-children .sub-menu li.has-children {
          position: relative;
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li.has-children .sub-menu li.has-children.active .menu-expand:before, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li.has-children .sub-menu li.has-children.active .menu-expand:before {
          content: "\f106";
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li.has-children .sub-menu li.has-children .menu-expand, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li.has-children .sub-menu li.has-children .menu-expand {
          position: absolute;
          right: 0;
          top: 6px;
          width: 30px;
          height: 30px;
          background: rgba(255, 255, 255, 0.1);
          color: #fff;
          text-align: center;
          line-height: 30px;
          cursor: pointer;
          -webkit-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
          -o-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
          transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li.has-children .sub-menu li.has-children .menu-expand:hover, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li.has-children .sub-menu li.has-children .menu-expand:hover {
          background: rgba(255, 255, 255, 0.2);
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li.has-children .sub-menu li.has-children .menu-expand:before, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li.has-children .sub-menu li.has-children .menu-expand:before {
          content: '\f107';
          font-size: 16px;
          font-family: "Font Awesome 5 Pro";
          font-weight: 500;
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li.has-children .sub-menu .sub-menu li.has-children, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li.has-children .sub-menu .sub-menu li.has-children {
          position: relative;
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li.has-children .sub-menu .sub-menu li.has-children.active .menu-expand:before, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li.has-children .sub-menu .sub-menu li.has-children.active .menu-expand:before {
          content: "\f106";
        }

        .mobile-menu-overlay__body .offcanvas-navigation > ul > li.has-children .sub-menu .sub-menu li.has-children .menu-expand:before, .page-oppen-off-sidebar__body .offcanvas-navigation > ul > li.has-children .sub-menu .sub-menu li.has-children .menu-expand:before {
          content: '\f107';
          font-size: 16px;
          font-family: "Font Awesome 5 Pro";
          font-weight: 500;
        }

        .mobile-menu-overlay__body .offcanvas-navigation--onepage > ul > li.active > a, .page-oppen-off-sidebar__body .offcanvas-navigation--onepage > ul > li.active > a {
          font-weight: 700;
        }

JS

var $body = $('body');
        $("#mobile-menu-trigger").on('click', function(){
            $("#mobile-menu-overlay").addClass("active");
            $body.addClass('no-overflow');
        });
        
        $("#mobile-menu-close-trigger").on('click', function(){
            $("#mobile-menu-overlay").removeClass("active");
            $body.removeClass('no-overflow');
        });
        
        $(".offcanvas-navigation--onepage ul li a").on('click', function(){
            $("#mobile-menu-overlay").removeClass("active");
            $body.removeClass('no-overflow');
        });
            var $offCanvasNav = $('.offcanvas-navigation'),
            $offCanvasNavSubMenu = $offCanvasNav.find('.sub-menu');
        
        /*Add Toggle Button With Off Canvas Sub Menu*/
        $offCanvasNavSubMenu.parent().prepend('<span class="menu-expand"><i></i></span>');
        
        /*Close Off Canvas Sub Menu*/
        $offCanvasNavSubMenu.slideUp();
        
        /*Category Sub Menu Toggle*/
        $offCanvasNav.on('click', 'li a, li .menu-expand', function(e) {
            var $this = $(this);
            if ( ($this.parent().attr('class').match(/\b(menu-item-has-children|has-children|has-sub-menu)\b/)) && ($this.attr('href') === '#' || $this.hasClass('menu-expand')) ) {
                e.preventDefault();
                if ($this.siblings('ul:visible').length){
                    $this.parent('li').removeClass('active');
                    $this.siblings('ul').slideUp();
                } else {
                    $this.parent('li').addClass('active');
                    $this.closest('li').siblings('li').removeClass('active').find('li').removeClass('active');
                    $this.closest('li').siblings('li').find('ul:visible').slideUp();
                    $this.siblings('ul').slideDown();
                }
            }
        });

Related

Spring Mvc Java Could not resolve view with name 'home' in servlet with name 'dispatcher'
What is the Difference between Dart console-full and console-simple application?
Is there a way to take screenshot of a window in pyqt5 or qt5?
charts js, doughnut chart not rendering tooptips correctly
Graphical query designer for PostgreSQL
Sequelize query with count in inner join
Cut files into another folder, if they aren't open for a certain period of time - python script
VSTO in VBA: AddIn.Object returns Nothing (null) sometimes
Debugging a C# executable that crashes on launch
C# inheritance in generics question
Bash: Script Calling Gnome Terminal Leads To Child Process Error?
XCode 13 - The application's Info.plist does not contain a valid CFBundleVersion