집 >웹 프론트엔드 >JS 튜토리얼 >Jquery CSS Fluid Navigation_jquery를 사용하여 유동적인 탐색 메뉴 만들기

Jquery CSS Fluid Navigation_jquery를 사용하여 유동적인 탐색 메뉴 만들기

WBOY원래의: 2016-05-16 18:34:141085검색

그렇다면 모바일 내비게이션 메뉴를 어떻게 구현해야 할까요?
1. 렌더링

메뉴에 마우스를 올리면 프롬프트 정보가 표시됩니다.
2. 구현 단계
1. CSS 코드

코드 복사 코드는 다음과 같습니다.

 
menuBarHolder { 너비: 730px; 배경색:#000; 글꼴-가족:Arial; margin-top:20px; menuBarHolder ul{ list-style-type:none; display:block;} 
#container { margin-top:100px;} 
#menuBar li{ float:left; 높이:16px; 50px; 테두리 -오른쪽:1px 솔리드 #ccc; } 
#menuBar li a{color:#fff; letter-spacing:-1px; { 배경색:#999;} 
.firstchild { 테두리 왼쪽:1px 단색 #ccc;} 
.menuInfo { 커서:손 배경색:#000; 너비:74px; 높이:100px; 패딩:3px; 
위치:절대값:-왼쪽:-15px; -반경-하단오른쪽: 5px; : 5px; 
-khtml-border-radius-bottomright: 5px; 
-khtml-border-radius-bottomleft: 5px; 
border-radius-bottomright: 5px; 🎜> 
menuBarHolder: menuMenu의 고정 컨테이너, 너비=730px. 
menuInfo: 프롬프트 정보 표시 여부를 제어합니다. 
2. HTML 코드 




코드 복사

코드는 다음과 같습니다.

< div id= "menuBarHolder">

클라이언트 섹션에 대한 텍스트입니다

포트폴리오 섹션에 대한 텍스트입니다

정보 섹션에 대한 텍스트입니다

블로그

블로그 섹션에 대한 텍스트입니다

팔로우

팔로우 섹션에 대한 텍스트입니다

연락처

연락처 섹션에 대한 텍스트입니다< ;/div>

$( document).ready(function()
{
$('#menuBar li').click(function()
{
var url = $(this).find('a') .attr( 'href');

document.location.href = url }) $('#menuBar li').hover(function() { $ (this) .find('.menuInfo').slideDown(); }, function()

{

$(this).find('.menuInfo').slideUp() ;
});
});
click(), hover(): 클릭 이벤트와 마우스 오버 이벤트를 Li 요소에 바인딩합니다.
find() 함수: 지정된 표현식과 일치하는 모든 요소를 검색합니다. 이 함수는 처리 중인 요소의 하위 요소를 찾는 좋은 방법입니다.
slideDown(speed, [callback]): 높이 변경(아래로 증가)을 통해 일치하는 모든 요소를 동적으로 표시하고 선택적으로 표시가 완료된 후 콜백 함수를 트리거합니다.
slideUp(speed, [callback]): 높이를 변경(위로 감소)하여 일치하는 모든 요소를 동적으로 숨기고 선택적으로 숨기기가 완료된 후 콜백 함수를 트리거합니다.

[Ctrl A Select All 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]

성명：

이전 기사：jquery 유효성 검사기 플러그인에 날짜 비교 방법 추가_jquery다음 기사：jquery 유효성 검사기 플러그인에 날짜 비교 방법 추가_jquery

Jquery CSS Fluid Navigation_jquery를 사용하여 유동적인 탐색 메뉴 만들기

관련 기사