Melaksanakan menu lipatan berdasarkan kod HTML5 dengan kemahiran tutorial download_html5 kod sumber

Laksanakan menu lipatan berdasarkan kod html5 dengan muat turun kod sumber. Rendering ditunjukkan di bawah. Mereka yang menyukainya juga boleh memuat turun kod sumber!

Paparan kesan Muat turun kod sumber

kod hmtl :

Salin kod

Kodnya adalah seperti berikut:

Love Programming

• 
  ;
  


• 
  < ; /i> jQuery kesan khas
  


• 
  < i class='fa fa-bolt'> CSS3 kesan khas
  


• 
  Kesan khas HTML5
  


• 
  Muat turun kesan bunyi
  < / li>
  
• 
  animasi denyar
  

kod js:

Salin kod

Kodnya adalah seperti berikut:

(fungsi ($) {
kad var = $('.card-drop'), toggler = cards.find('.toggle'), pautan = cards.find('ul>li>a'), li = links.parent(' li') , kira = pautan.panjang, lebar = 100;
li.each(fungsi (i) {
$(ini).css('z-index', count - i);
});
set fungsiClosed() {
li.each(fungsi (indeks) {
$(this).css('atas', indeks * 4).css('lebar', lebar - indeks * 0.5 '%').css('margin-left', indeks * 0.25 '%');
});
li.addClass('closed');
toggler.removeClass(' aktif') ;
}
setClosed();
toggler.on('mousedown', function () {
var $this = $(this);
if ($this. is(' .active')) {
setClosed();
} else {
$this.addClass('active');
li.removeClass('closed');
li.each (fungsi (indeks) {
$(this).css('atas', 60 * (indeks 1)).css('lebar', '100%').css('margin-kiri' , '0px ');
});
}
});
links.on('klik', fungsi (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 (ikon);
setClosed();
e.preventDefault;
});
}(jQuery));