The foldable navigation menu implemented by css3 and jquery (applicable to mobile Web pages) and css3jquery

The foldable navigation menu implemented by css3 and jquery (applicable to mobile Web pages) and css3jquery

I have introduced several css3 navigation items. Today I am introducing a menu suitable for mobile phone webpage navigation. Click the drop-down menu under the List icon, and click Close to close the animation. The results are quite good. As follows:

 

Download Online Preview source code

 

This instance consists of css3 and jquery plug-ins. The following is the implementation code

Html code:

   <nav class="nav" role="navigation" style="height: 195px;">        <ul class="nav-items">            <li><a target=_blank href="http://www.w2bc.com">Home</a></li>            <li><a target=_blank href="http://www.w2bc.com">About</a></li>            <li><a target=_blank href="http://www.w2bc.com">Clients</a></li>            <li><a target=_blank href="http://www.w2bc.com">Contact Us</a></li>        </ul>    </nav>    
Css3 code:
  *        {            box-sizing: border-box;        }        body        {            font-family: "HelveticaNeue-Light" , "Helvetica Neue Light" , "Helvetica Neue" , Helvetica, Arial, "Lucida Grande" , sans-serif;            font-weight: 300;        }        nav        {            position: fixed;            -webkit-transform: translate3d(0, 0, 0);            left: 0;            transition: all 0.4s ease;            width: 100%;            background: #34495e;             height: 0;            overflow: hidden;            transition-delay: 0.25s;                     }        .active nav        {            transition-delay: 0s;        }        nav ul        {            width: 95%;            margin: 0 auto;        }        nav ul li        {            padding: 5px;            border-bottom: 1px solid white;         }        nav ul li:nth-child(1) a        {            transition-delay: 0.1s;        }        nav ul li:nth-child(2) a        {            transition-delay: 0.15s;        }        nav ul li:nth-child(3) a        {            transition-delay: 0.2s;        }        nav ul li:nth-child(4) a        {            transition-delay: 0.25s;        }        nav ul li:last-child        {            border: none;        }        nav ul li a        {            transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);            position: relative;            display: block;            text-decoration: none;            color: white;            font-size: 18px;            padding: 10px;            -webkit-transform: translate3d(100px, 0, 0);            opacity: 0;        }        .active nav ul li a        {            -webkit-transform: translateX(0);            opacity: 1;        }        header        {            transition: all 0.4s ease;            -webkit-transform: translate3d(0, 0, 0);            left: 0;            width: 100%;            position: fixed;            background: #27ae60;            color: white;            padding: 20px;            text-align: center;            font-size: 20px;            transition-delay: 0.25s;        }        .active header        {            transition-delay: .08s;        }        section        {            background: #f5f5f5;            padding-top: 80px;        }        article        {            background: white;            height: 500px;            width: 95%;            border-radius: 3px;            margin: 0 auto 20px auto;            border: 1px solid #e4e4e4;        }        .menu-button-target        {            background: transparent;            border: none;            outline: none;            cursor: pointer;            position: absolute;            z-index: 200;            left: 10px;            height: 50px;            top: 50%;            margin-top: -23px;            webkit-tap-highlight-color: rgba(0, 0, 0, 0);        }        .menu-button-target.active .menu-button        {            transition: background .2s ease;            background-color: transparent;        }        .menu-button-target.active .menu-button:before, .menu-button-target.active .menu-button:after        {            transition: top .3s ease, -webkit-transform .3s .2s ease;        }        .menu-button-target.active .menu-button:before        {            top: 0;            -webkit-transform: rotate(45deg);        }        .menu-button-target.active .menu-button:after        {            top: 0;            -webkit-transform: rotate(-45deg);        }        .menu-button        {            position: relative;            top: 50%;            left: 0;            display: block;            width: 40px;            height: 4px;            margin-top: -2px;            background-color: white;            border-radius: 10px;            transition: background .2s .2s;        }        .menu-button:before, .menu-button:after        {            content: "";            display: block;            position: absolute;            width: 100%;            height: 100%;            left: 0;            background-color: white;            transition: top .3s .2s ease, -webkit-transform .3s ease;            border-radius: 10px;            -webkit-transform-origin: 50% 50%;        }        .menu-button:before        {            top: -10px;            -webkit-transform: rotate(0deg);        }        .menu-button:after        {            top: 10px;            -webkit-transform: rotate(0deg);        }
Js Code:
var $menuTrigger = $('[data-ic-class="button-trigger"]'),    $menuOverlay = $('[data-ic-class="overlay"]'),    $menuItem = $('.menu-item'),    activeClass = 'active',    $nav = $('nav'),    $navULHeight = $('.nav-items').outerHeight(),    navOpen = false,    $header = $('header');        var isTouch = false;        if ($('html').hasClass('touch')) {            isTouch = true;        }        function menuFunction() {            $menuTrigger.toggleClass(activeClass);            if (!navOpen) {                $nav.height($navULHeight);                navOpen = true;                $('body').addClass('active');                $header.css('transform', 'translate3d(0, ' + $navULHeight + 'px, 0)');            } else {                $nav.height(0);                $header.css('transform', 'translate3d(0, 0, 0)');                navOpen = false;                $('body').removeClass('active');            }        }        if (isTouch) {            $menuTrigger.on('touchstart', function () {                menuFunction();            });        }        if (!isTouch) {            $menuTrigger.on('click', function () {                menuFunction();            });        }
Note: This article love programming Original article, reprint please indicate the original address: http://www.w2bc.com/Article/5377

I used css3 menu software to create a navigation bar and generated some code. I want to add it to my webpage without navigation. I don't know how to do this.
Create an html file for this navigation bar, such as menu.html.
Then use iframe to load the file:
<Iframe src = "menu.html">
</Iframe>

How to Create a menu piano for 360 website navigation (preferably css3)
It should be the transition of CSS3, followed by a mask, and then play the animation and make a sound during onhover.