Js mobile phone multi-level navigation sharing, js navigation

Js mobile phone multi-level navigation sharing, js navigation

The corresponding navigation of js mobile phones can be used when the screen is adaptive. When the screen of a website is small to a certain extent, the navigation will appear. The navigation effect is as follows: Multi-Level navigation!

The main design idea is:: A menu contains many contents or sub-menus with multiple levels. To simplify and save space, in this drop-down menu, each sub-menu is hidden under a main navigation button. When you click it, it is displayed through a subtle animation. When you click the level menu again, the next menu can be displayed in different forms of animation. This menu is Fluid layout, so it can be easily adapted to responsive layout.

Html code:

<div id="dl-menu" class="dl-menuwrapper"><button>Open Menu</button><ul class="dl-menu"><li><a href="#">Fashion</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Men</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Shirts</a></li><li><a href="#">Jackets</a></li><li><a href="#">Chinos & Trousers</a></li><li><a href="#">Jeans</a></li><li><a href="#">T-Shirts</a></li><li><a href="#">Underwear</a></li></ul></li><li><a href="#">Women</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Jackets</a></li><li><a href="#">Knits</a></li><li><a href="#">Jeans</a></li><li><a href="#">Dresses</a></li><li><a href="#">Blouses</a></li><li><a href="#">T-Shirts</a></li><li><a href="#">Underwear</a></li></ul></li><li><a href="#">Children</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Boys</a></li><li><a href="#">Girls</a></li></ul></li></ul></li><li><a href="#">Electronics</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Camera & Photo</a></li><li><a href="#">TV & Home Cinema</a></li><li><a href="#">Phones</a></li><li><a href="#">PC & Video Games</a></li></ul></li><li><a href="#">Furniture</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Living Room</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Sofas & Loveseats</a></li><li><a href="#">Coffee & Accent Tables</a></li><li><a href="#">Chairs & Recliners</a></li><li><a href="#">Bookshelves</a></li></ul></li><li><a href="#">Bedroom</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Beds</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Upholstered Beds</a></li><li><a href="#">Divans</a></li><li><a href="#">Metal Beds</a></li><li><a href="#">Storage Beds</a></li><li><a href="#">Wooden Beds</a></li><li><a href="#">Children's Beds</a></li></ul></li><li><a href="#">Bedroom Sets</a></li><li><a href="#">Chests & Dressers</a></li></ul></li><li><a href="#">Home Office</a></li><li><a href="#">Dining & Bar</a></li><li><a href="#">Patio</a></li></ul></li><li><a href="#">Jewelry & Watches</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Fine Jewelry</a></li><li><a href="#">Fashion Jewelry</a></li><li><a href="#">Watches</a></li><li><a href="#">Wedding Jewelry</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Engagement Rings</a></li><li><a href="#">Bridal Sets</a></li><li><a href="#">Women's Wedding Bands</a></li><li><a href="#">Men's Wedding Bands</a></li></ul></li></ul></li></ul></div><!-- /dl-menuwrapper -->

Animation style

.dl-menu.dl-animate-out-1 {    animation: MenuAnimOut1 0.4s linear forwards;}@keyframes MenuAnimOut1 {    50% {        transform: translateZ(-250px) rotateY(30deg);    }    75% {        transform: translateZ(-372.5px) rotateY(15deg);        opacity: .5;    }    100% {        transform: translateZ(-500px) rotateY(0deg);        opacity: 0;    }}.dl-menu.dl-animate-in-1 {    animation: MenuAnimIn1 0.3s linear forwards;}@keyframes MenuAnimIn1 {    0% {        transform: translateZ(-500px) rotateY(0deg);        opacity: 0;    }    20% {        transform: translateZ(-250px) rotateY(30deg);        opacity: 0.5;    }    100% {        transform: translateZ(0px) rotateY(0deg);        opacity: 1;    }}

Javascript code:

$( '#dl-menu' ).dlmenu({    animationClasses : { in : 'animation-class-name', out : 'animation-class-name' }});

Demo download: http://download.csdn.net/detail/confidence68/7633057

Js multi-level tree navigation menu, vertical, it is best to explain the code?

.

How does div + css implement multi-level navigation when the mouse passes?

Download Free template materials online. Div + css navigation code. Refer to others' practices. It is generally implemented using js .. If you do not know the URL, you can search for "static webpage template" on Baidu"