jQuery 그래디언트 글로우 탐색의 예제 코드 menu_jquery

구체적인 구현 과정을 알려드리겠습니다.

HTML 태그 구조:

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

                                                                                            
 
• 
     메뉴 2메뉴 2
    

 < ;li>
                                                                                             🎜>   🎜> ~ 🎜>

CSS 스타일:
li 스타일:

코드 복사

코드는 다음과 같습니다.

.animation_menu li{ /* 블록 모드 표시 및 수평 타일링 */ display:block; float: left; /*너비와 높이는 배경 이미지입니다*/ width: 111px;

height: 50px;

/*텍스트가 수직 및 수평 중앙에 오도록 설정*/
line-height: 50px;
text-align: center;
글꼴 두께: 굵게;

글꼴 크기: 18px;
목록 스타일 유형: 없음;
}

처음 본 스타일 :

코드 복사

코드는 다음과 같습니다.

.animation_menu li a { / *여기에 배경 이미지가 있습니다*/ background-image: url("images/bg-sprite-topmenu.png"); background-repeat: no-repeat; /*설정 position 속성은 내부 범위가 a*/ position:relative;

을 기반으로 배치되도록 하기 위해 사용됩니다.

디스플레이: 블록;

/*단색 검정색을 사용하지 않습니다*/
color: #292724;
text-designation:none;
}

호버 후 보이는 스팬 스타일:

코드 복사

코드는 다음과 같습니다.

.animation_menu li aspan{ /*여기가 배경 이미지입니다*/ background-image: url("images/bg-sprite-topmenu.png"); background-repeat: no-repeat; /*블록 모드 표시를 설정하고, 너비와 높이를 a의 너비와 높이와 동일하게 설정하고, 절대 위치를 a*/ 표시의 텍스트와 겹치도록 설정합니다. : 블록;

높이: 50px;

너비: 111px;
텍스트 정렬: 가운데;
위치: 절대;
위쪽: 0;
왼쪽: 0;

색상: #FFE2BB ;
}



스프라이트 기술을 사용하여 다양한 상태를 배치하고 스타일을 지정합니다.





코드 복사

코드는 다음과 같습니다.

/*Style in normal state*/
.animation_menu li a {
/*General gray background*/
background-position: 0 -153px;
}
/*hover blue highlight background*/
.animation_menu li a span {
background-position: 0 -102px;
}

/*Style when link is active*/
.animation_menu li.current a {
/*General gray highlight background*/
background-position: 0 0;
}
/*hover yellow highlight background*/
.animation_menu li.current a span {
background-position: 0 -51px;
}

The work of css is over here, let’s take a look at javascript.

Finally, JavaScript
The gradient effect of the menu is mainly achieved by controlling opacity, please see the code below.

Copy code The code is as follows:

// By setting the opacity to 0, span Styles and text are hidden
$(".animation_menu li a span").css("opacity", "0");

// Bind hover event
$(".animation_menu li a span").hover(
//mouse on event
function () {
// dynamically change opacity From 0 to 1, the span style and text will be slowly displayed, covering the style of a
$(this).stop().animate({
opacity: 1
}, " slow");
},
//mouse out event
function () {
// When the mouse moves away, the dynamic changes to 0, so span is invisible again. See The original style of a.
//Bind click event, click on the current connection, add current class to li, and remove the current class of other li at the same time
$(".animation_menu li a").click(function () {
$(".animation_menu li a").each(function (index, item) {
$(item).parent().removeClass("current");
});

$(this ).parent().addClass("current");

});



That’s all. I hope this jQuery navigation menu can give you some inspiration.