[Template] Accordion menu- 아코디언 메뉴

Front-End/HTML5 + CSS

[Template] Accordion menu- 아코디언 메뉴

리딩리드 2017. 1. 8. 20:50

Accordion - 아코디언

1. HTML

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <link href="Accordion.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="Accordion.js"></script> </head> <div class="accordion"> <ul> <li class="open"> <a href="#"><span>HTML5</span></a> <ul> <li><a href="#">Area</a></li> <li><a href="#">Audio</a></li> <li><a href="#">Video</a></li> <li><a href="#">Map</a></li> </ul> </li> <li> <a href="#">CSS3</a> <ul> <li><a href="#">Background</a></li> <li><a href="#">Border</a></li> <li><a href="#">Animation</a></li> </ul> </li> </ul> </div>

2. CSS

/*태그 기본 설정*/ body, ul{ margin : 0; padding: 0; } a{ color: #666; text-decoration: none; } /*아코디언 메뉴*/ /*li에 포함된 a 태그에 block 속성을 지정해 한줄 전체를 차지하도록 함*/ .accordion ul li a{ display: block; } /*1레벨 메뉴의 텍스트 색상/여백/테두리/배경색 지정*/ .accordion > ul > li > a { color : #ffffff; padding : 20px 44px; border-bottom : 1px solid #e7e7e7; background-color : #677381; } /*1레벨 메뉴의 하위 메뉴가 펼쳐졌을 때의 배경색 지정*/ .accordion > ul > li.open > a{ background-color : #eb6b60; } /*2래밸 메뉴의 여백/테두리/배경색 지정*/ .accordion ul ul li a{ padding : 14px 44px; border-bottom : 1px solid #e7e7e7; background-color:white; }

3. javascript

/** * * Created by jeonghui on 2017. 1. 8.. */ $(document).ready(function(){ $('.accordion > ul > li > a').on('click', function(){ var element = $(this).parent('li'); //현재의 하위 메뉴 접음 if(element.hasClass('open')){ element.removeClass('open'); element.find('li').removeClass('open'); element.find('ul').slideUp(); } //하위 메뉴 펼침 else{ element.addClass('open'); element.children('ul').slideDown(); //아래 레코디언 메뉴 닫음 element.siblings('li').children('ul').slideUp(); element.siblings('li').removeClass('open'); element.siblings('li').find('li').removeClass('open'); element.siblings('li').find('ul').slideUp(); } }); //문서 로드 후 //2레벨 메뉴를 모두 접음 $('.accordion ul ul').hide(); //1레벨 메뉴중 open 으로 되어 있는 메뉴의 하위 펼침 $('.open').children('ul').slideDown(); });

4. view