그렇다면 우 리 는 어떻게 이동 내 비게 이 션 메뉴 를 실현 해 야 합 니까?1.효과 그림마우스 가 Menu 를 지나 가면 알림 정 보 를 표시 합 니 다.2.구현 절차 1,CSS 코드

 
menuBarHolder { width: 730px; height:45px; background-color:#000; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;} 
#menuBarHolder ul{ list-style-type:none; display:block;} 
#container { margin-top:100px;} 
#menuBar li{ float:left; padding:15px; height:16px; width:50px; border-right:1px solid #ccc; } 
#menuBar li a{color:#fff; text-decoration:none; letter-spacing:-1px; font-weight:bold;} 
.menuHover { background-color:#999;} 
.firstchild { border-left:1px solid #ccc;} 
.menuInfo { cursor:hand; background-color:#000; color:#fff; 
width:74px; font-size:11px;height:100px; padding:3px; display:none; 
position:absolute; margin-left:-15px; margin-top:-15px; 
-moz-border-radius-bottomright: 5px; 
-moz-border-radius-bottomleft: 5px; 
-webkit-border-bottom-left-radius: 5px; 
-webkit-border-bottom-right-radius: 5px; 
-khtml-border-radius-bottomright: 5px; 
-khtml-border-radius-bottomleft: 5px; 
border-radius-bottomright: 5px; 
border-radius-bottomleft: 5px; 
} 

menu BarHolder:메뉴 Menu 의 고정 용기,너비=730 px.menu Info:알림 정보의 전시 여 부 를 제어 합 니 다.2.HTML 코드

 
<div id="menuBarHolder"> 
<ul id="menuBar"> 
<li class="firstchild"><a href="javascript:#">Home</a> 
<div class="menuInfo">I am some text about the home section</div></li> 
<li><a href="javascript:#">Services</a> 
<div class="menuInfo">I am some text about the services section</div></li> 
<li><a href="javascript:#">Clients</a> 
<div class="menuInfo">I am some text about the clients section</div></li> 
<li><a href="javascript:#">Portfolio</a> 
<div class="menuInfo">I am some text about the portfolio section</div></li> 
<li><a href="javascript:#">About</a> 
<div class="menuInfo">I am some text about the about section</div></li> 
<li><a href="javascript:#">Blog</a> 
<div class="menuInfo">I am some text about the blog section</div></li> 
<li><a href="javascript:#">Follow</a> 
<div class="menuInfo">I am some text about the follow section</div></li> 
<li><a href="javascript:#">Contact</a> 
<div class="menuInfo">I am some text about the contact section</div></li> 
</ul> 
</div> 

UI LI 요소:목록 요소.DIV 요소:내용 정 보 를 알려 줍 니 다.3.Javascript 코드

 
$(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]):고도 변화(위로 감소)를 통 해 일치 하 는 모든 요 소 를 동적 으로 숨 깁 니 다.숨 기기 완료 후 선택 적 으로 반전 함 수 를 촉발 합 니 다. $(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(); }); });

Fluid NavigationCSS & jQuery Tutorial by Addy Osmani

• Home
  I am some text about the home section
• Services
  I am some text about the services section
• Clients
  I am some text about the clients section
• Portfolio
  I am some text about the portfolio section
• About
  I am some text about the about section
• Blog
<<
• <<<>Fol
<<<<Contact<<<<<<<<<<<>

<>>외부 Js 도입 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Jquery에서 동일한 NAME 또는 id 행 삭제 작업 가져오기

//Jquery 같은 수를 가져오고 줄 수와 인자를 삭제합니다. //ID'''또는this를 통해 본 줄의 두 번째 tdeq를 획득(1) 0부터 $("#"+id+"").parents("tr").find("td:eq(1...

---

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.