jQuery는 간단한 탐색 메뉴를 구현합니다. effect

jQuery는 간단한 탐색 메뉴를 구현합니다. effect_jquery

WBOY

풀어 주다： 2016-05-16 15:30:42

원래의

1129명이 탐색했습니다.

이 기사의 예에서는 JavaScript로 구현된 확장 및 축소 메뉴 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
실행 중인 효과의 스크린샷은 다음과 같습니다.

마우스를 가리키면 메뉴 항목이 파란색 배경에 흰색 텍스트로 위쪽으로 이동합니다. 클릭하면 현재 선택된 항목을 나타내는 파란색 막대가 하단에 나타납니다.

페이지 코드, 메뉴의 각 항목은 표시 텍스트 등을 배치하는 ul을 포함하는 div이고, 다른 div는 하단의 파란색 막대이며 첫 번째와 마지막에 다른 클래스를 설정해야 합니다. items. , 스타일을 사용해야 합니다:

<div id="nav">
　　<div class="navItem indexNavItem">
　　　　<ul class="navUl">
　　　　　　<li>首页</li>
　　　　　　<li class="hoverLi">首页</li>
　　　　</ul>
　　　　<div class="highlighter selectedNav"></div>
　　</div>
　　<div class="navItem">
　　　　<ul class="navUl">
　　　　　　<li>A</li>
　　　　　　<li class="hoverLi">A</li>
  </ul>
　　　　<div class="highlighter"></div>
　　</div>
　　<div class="navItem lastNavItem">
　　　　<ul class="navUl">
　　　　　　<li>A</li>
　　　　　　<li class="hoverLi">A</li>
　　　　</ul>
　　　　<div class="highlighter"></div>
　　</div>
　　<div id="logoutNavItem" class="navItem logoutNavItem lastNavItem">
　　　　<ul class="navUl">
　　　　　　<li>退出</li>
　　　　　　<li class="hoverLi">退出</li>
　　　　</ul>
　　　　<div class="highlighter"></div> 
　　</div>
</div>

로그인 후 복사

스타일, 주로 각 메뉴 항목의 왼쪽 및 오른쪽 테두리 설정과 ul 및 li의 위치 설정:

*
{
 padding: 0;
 margin: 0;
}
body
{
 background-color: #fffff3;
 font: 12px/1.6em Helvetica, Arial, sans-serif;
}
ul,li{
 list-style: none;
}
#nav
{
 text-align: center;
 height: 50px;
 font-size: 10px;
 line-height: 30px;
 background-color: #F0E6DB;
 margin-bottom: 10px;
}
.navItem
{
 cursor: pointer;
 position: relative;
 float: left;
 width: 100px;
 height: 50px;
 font-size: 15px;
 border-right: 2px solid rgb(255,255,255);
 border-left: 2px solid rgb(255,255,255);
 overflow: hidden;
 font-weight:bold;
}
.indexNavItem
{
 border-left: 4px solid rgb(255,255,255);
 margin-left: 10px;
}
.lastNavItem
{
 border-right: 4px solid rgb(255,255,255);
}
.logoutNavItem
{
 float: right;
 width: 120px;
 margin-right: 10px;
 border-left: 4px solid rgb(255,255,255);
}
.navUl
{
 position: relative;
 height: 100px;
 width: 100%;
 border-bottom: 5px solid rgb(2,159,212);
}
.navUl li
{
 height: 50px;
 line-height: 50px;
}
.highlighter
{
 position: absolute;
 bottom: 0;
 height: 5px;
 width: 100%;
}
.selectedNav
{
 background-color: #029FD4;
}
.hoverLi
{
 background-color: #029FD4;
 color: #ffffff;
}

로그인 후 복사

다음 단계는 메뉴에 대한 호버 및 클릭 이벤트에 대한 js 코드를 작성하는 것입니다. 호버링 시 ul을 li 높이까지 이동한 다음 마우스를 멀리 이동한 후 복원합니다. 파란색 막대 div에 스타일을 추가하면 됩니다.

$(function() {
 $(".navItem").hover(function() {
  $(this).children("ul").animate({
   top: "-50px"
  }, 100);
 }, function() {
  $(this).children("ul").animate({
   top: "0px"
  }, 100);
 });
 
 $(".navItem").click(function(event) {
  $(this).siblings().children('.highlighter').removeClass('selectedNav');
  $(this).children('.highlighter').addClass('selectedNav');
 });
})

로그인 후 복사

위 내용은 간단한 탐색 메뉴 효과를 구현하기 위한 jQuery의 핵심 코드입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.