메뉴 만들기
설계 및 분석
1. 메뉴를 만들 아이템을 ul 태그, li 태그로 HTML 코딩한다.
2. CSS 로 가로 메뉴를 만든다.
코드를 하나 하나 추가하면서 어떻게 변경되는지 Editor(brackets 과 크롬브라우저 개발자 모드 활용)에서 확인
기본적인 메뉴 형태가 만들어졌다면 이제 제어를 위한 코드는 jQuery 를 이용하여 구현한다.
3. jQuery 를 이용하여 메뉴를 선택하면 배경 이미지가 변경되도록 코드 구현한다.
- 현재 적용된 class 를 제거한다.
- 선택된 li에 class 를 추가한다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> Title </title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(document).ready(function(){ $('#navigation li').on('click',function(){ $('#navigation li').removeClass('selected'); $(this).addClass('selected'); }); }); </script> <style> #navigation li { list-style: none; padding: 5px; float: left; cursor: pointer; } #navigation .selected { background-color: red; color: white; }
</style> </head> <body> <ul id="navigation"> <li>메뉴1</li> <li>메뉴2</li> <li>메뉴3</li> <li class="selected">메뉴4</li> <li>메뉴5</li> <li>메뉴6</li> </ul> </body> </html> |
Link2Me