소스 코드 download_html5 튜토리얼 기술을 사용하여 HTML5 코드 기반의 접기 메뉴 구현

소스코드 다운로드를 통해 html5 코드 기반의 폴딩 메뉴를 구현합니다. 렌더링은 아래와 같습니다. 마음에 드는 사람은 소스 코드를 다운로드할 수도 있습니다!

효과 표시 소스코드 다운로드

hmtl 코드 :

코드 복사

코드는 다음과 같습니다.

러브 프로그래밍

• 
  러브 프로그래밍 ;
  


• 
  < ; /i> jQuery 특수 효과
  


• 
  < i class='fa fa-bolt'> CSS3 특수 효과
  


• 
  HTML5 특수 효과
  


• 
  음향 효과 다운로드
  < / li>
  
• 
  플래시 애니메이션
  

js 코드:

코드 복사

코드는 다음과 같습니다.

(함수($) {
var 카드 = $('.card-drop'), 토글러 = 카드 찾기('.toggle'), 링크 = 카드 찾기('ul>li>a'), li = 링크.부모(' li') , count = link.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');
토글러.removeClass(' active') ;
}
setClosed();
Togger.on('mousedown', function () {
var $this = $(this);
if ($this. is(' .active')) {
setClosed();
} else {
$this.addClass('active');
li.removeClass('closed');
li.each (함수 (색인) {
$(this).css('top', 60 * (색인 1)).css('width', '100%').css('margin-left' , '0px ');
});
}
});
link.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');
}
토글러.어린이('스팬').text(레이블);
토글러.어린이('i').removeClass( ).addClass(아이콘);
setClosed();
e.preventDefault;
});
}(jQuery));