Home > Web Front-end > H5 Tutorial > Implementing folding menu based on HTML5 code with source code download_html5 tutorial skills

Implementing folding menu based on HTML5 code with source code download_html5 tutorial skills

WBOY
Release: 2016-05-16 15:46:14
Original
2560 people have browsed it

Implement folding menu based on html5 code with source code download. The rendering is shown below. Those who like it can also download the source code!

Effect display Source code download

hmtl code :


Copy code
The code is as follows:

js code:


Copy code
The code is as follows:

(function ($) {
var cards = $('.card-drop'), toggler = cards.find('.toggle'), links = cards.find('ul>li>a'), li = links.parent('li') , count = links.length, width = 100;
li.each(function (i) {
$(this).css('z-index', count - i);
});
function setClosed() {
li.each(function (index) {
$(this).css('top', index * 4).css('width', width - index * 0.5 '%').css('margin-left', index * 0.25 '%');
});
li.addClass('closed');
toggler.removeClass('active') ;
}
setClosed();
toggler.on('mousedown', function () {
var $this = $(this);
if ($this.is(' .active')) {
setClosed();
} else {
$this.addClass('active');
li.removeClass('closed');
li.each (function (index) {
$(this).css('top', 60 * (index 1)).css('width', '100%').css('margin-left', '0px ');
});
}
});
links.on('click', function (e) {
var $this = $(this), label = $ this.data('label');
icon = $this.children('i').attr('class');
li.removeClass('active');
if ($this .parent('li').is('active')) {
$this.parent('li').removeClass('active');
} else {
$this.parent( 'li').addClass('active');
}
toggler.children('span').text(label);
toggler.children('i').removeClass().addClass (icon);
setClosed();
e.preventDefault;
});
}(jQuery));
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template