JQuery로 아코디언의 형태로 사이트에 대한 수직 메뉴

메뉴, 여러분이 알다시피 - 사이트의 중요한 부분. 재미있는 탐색 온라인 자원이자 방문자 수있다. 또한, 모든 메뉴의 중요한 특성 - 그것의 소형. 간단한 수직 메뉴가 쉽게 HTML과 CSS를 사용하여 만들었습니다. 그러나 우리는 더 이상 갈 : 우리가 jQuery를의 도움으로 메뉴 - "아코디언"를 만들 수 배웁시다.

메뉴 - "아코디언"만들기

아코디언의 형태로 수직 메뉴는 무엇입니까? 이 탐색하기 쉽게 작성하고 세련된 사이트를 제공하는 드롭 다운 목록입니다. 메뉴는이 방식으로 수행, 당신은 하위 항목을 많이 끌 수 있습니다. 당신이 원하는 항목에서 마우스를 클릭 할 때 그들에게 액세스가 발생합니다. 누군가는 jQuery를 사용하지 않고 이런 식의 간단한 메뉴를 만들 수 있다는 것을 말할 수 있습니다. 네, 그렇습니다. 그러나이 객체는 스마트 폰 또는 태블릿의 소유자에게 매우 유용하지 않을 것입니다. 의 모든에 호소, 수직 메뉴를 만들어 보자. 그런 다음, 네비게이션 스타일링 색상을 변경, 어떤 사이트 디자인을 조정할 수있을 것입니다.

HTML 코드

그래서, 우리의 수직 메뉴를 만들려면 먼저 다음 행을 포함하는의 HTML 코드를 다이얼해야합니다

Accord_menu.html라는 파일에이 코드를 저장합니다.

당신이 볼 수 있듯이, 우리는 정렬되지 않은 목록을 만들었습니다. 그것은 3 개 주요 지점 구성

- 사진;

- 필름;

- 책.

각 항목은 몇 단락을 가지고있다. #있는 경우, 당신은 링크를 추가해야합니다. 지금은 스타일을 설명하는 것이 중요하다. 그것은 모든 인터넷 자원의 모양에 따라 달라집니다. 그 디자인에 조화롭게 통합해야합니다 사이트에 대한 수직 메뉴를 선택합니다.

CSS 코드

스타일을 사용하면 어렵지 않을 것이다. 우리는이 예에서 그라데이션 채우기를 사용하는 경우에만 있습니다. 여기에 CSS 코드는 다음과 같습니다

색상은 CSS 파일에 지정된 크기의 마커는 왼쪽에있는 목록의 항목에서 제거됩니다. 그것은 당신이 위에 마우스를 가져 가면 각 항목 및 하위 메뉴에서 행동하는 방법을 결정했다. 예를 들면 :

#의 e1fee2 -이 옅은 녹색의 서브.

# C4f0f7 당신이 그들 위에 마우스를 올려 -golubovaty 그늘 서브.

디스플레이 속성은 필요한 패딩 크기를 조정 블록 값을 부탁드립니다. 색상, 크기, 글꼴 유형, 위치 - 모든으로 CSS 파일에 설명되어있다. accordionmenu_my1.css, 예를 들어, 전화.

jQuery를 메뉴 개선 연결

당신이 기억다시피, 우리의 목표는 - 수직 메뉴 jQuery를 만들 수 있습니다. 이 기술에 익숙하지 않은 경우, 걱정하지 마십시오. 우리는 구글 저장소를 사용하고 JQuery와 스크립트를 연결합니다. 이것은 더 매력적으로 메뉴를 만들 것입니다. jQuery를 하이퍼 텍스트 마크 업 HTML과 자바 스크립트의 상호 작용에 따라 자바 스크립트 라이브러리입니다. jQuery를 사용하면 요소의 내용과 특성을 액세스 할 수 있습니다.

그래서, HTML 파일의 본문에 필요한 스크립트를 연결하고 경마 요소를 제외하고,이 개 변수의 저장에 대한 규칙을 설정합니다. 마우스 클릭이되는 하나의 개막식에서 다른 탭 닫기, 코드를 기여한다. 여기 보이는 방법은 다음과 같습니다

모든 변경 사항을 저장은 브라우저 메뉴의 모양을 참조하십시오. 즉의 일반적인 결과입니다 : 그 결과, 우리는 당신이 항상 자신의 선호에 따라 변경할 수있는 매력적인 메뉴를왔다. 그리고 jQuery를, CSS의 분야에서 새로운 지식을 획득, 당신은 자신의 능력을 향상, 사이트의 고유 한 요소를 생성합니다.