JQuery_jquery로 작성된 개인화된 탐색 메뉴

（一）：XHTML：

复system代码 代码如下:

• 홈


• 서비스


• FAQ


• 사용후기


• 알파카 소개


• 문의하기

(two)：JQuery

复代码 代码如下:

$(document).ready(function(){
$('#navigationMenu li .normalMenu').each(function(){
// 중복 하이퍼링크 및 위치 생성 현재 것보다 위에 있습니다
$(this).before($(this).clone().removeClass().addClass('hoverMenu'))
}); li').hover(function(){
//
$(this).find('.hoverMenu').stop().animate({marginTop:'0px' 위에 마우스를 놓으면 동작을 할당합니다. },200);
// 애니메이션 메서드는 수많은 가능성을 제공합니다
},
function(){
// 마우스아웃 시 작업
$(this).find(' .hoverMenu').stop().animate({marginTop:'-25px'},200)
});


(三)CSS

复代码 代码如下:

/* 페이지 스타일 */

body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
margin:0px
padding: 0px;
}
본체{
여백:20px
글꼴-가족:Arial, Helvetica, sans-serif
색상:#51555C
높이:100% ;
font-size:12px;
}
/* 탐색 메뉴 스타일 */
ul{
height:25px
font-family:Arial, Helvetica, sans-serif ;
글꼴 크기:12px;
ul li{
테두리:1px 솔리드
디스플레이:인라인 블록
높이 :25px;
list-style-type:none;
overflow:hidden
}
ul li a:hover,
ul li a:visited{
텍스트 장식:없음;
}
.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
개요:없음;
padding:5px 10px;
display:block;
}
.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
margin-top:-25px ;
배경:url(img/grey_bg.gif) 반복-x #eeeeee;
color:#444444;
}
.selectedMenu,.selectedMenu:visited {
margin:0;
}
.normalMenu, .normalMenu:visited{
color:white;
배경:url(img/dark_bg.gif) 반복-x #444444;
}


(4) 效果图