Example code of jQuery gradient glow navigation menu_jquery

Let me share with you the specific implementation process.

HTML tag structure:

Copy code The code is as follows:

                                                                                                              
 
• 
     Menu TwoMenu Two
    

 < ;li>
                                                                                            🎜>                                                                                                                              🎜>

CSS style:
li style:

Copy code

The code is as follows:

.animation_menu li{ /*Block mode Display and make it tile horizontally */ display:block; float: left; /*The width and height are the background image*/ width: 111px;

height: 50px;

/*Set text to be centered vertically and horizontally*/
line-height: 50px;
text-align: center;
font-weight: bold;

font-size: 18px;
list-style-type:none;
}

The style of a initially seen:

Copy code

The code is as follows:

.animation_menu li a { /*Here is Our background image*/ background-image: url("images/bg-sprite-topmenu.png"); background-repeat: no-repeat; /*Set the position attribute as In order for the span inside to be positioned based on a*/ position: relative;

display: block;

/*We don’t use solid black*/
color: #292724;
text-decoration:none;
}

The style of span seen after hover:

Copy code

The code is as follows:

.animation_menu li a span { /*Here It’s our background image*/ background-image: url("images/bg-sprite-topmenu.png"); background-repeat: no-repeat; /*Set block mode display, and set the width and height to be the same as the width and height of a, and the absolute position. This is to make it overlap with the text in a*/ display: block;

height : 50px;

width: 111px;
text-align: center;
position: absolute;
top: 0;
left: 0;

color: #FFE2BB ;
}



Use sprite technology to position, style a and span various states:





Copy code

The code is as follows:

/*일반 상태의 스타일*/
.animation_menu li a {
/*일반 회색 배경*/
background-position: 0 -153px;
}
/*파란색 하이라이트 배경에 마우스 오버*/
.animation_menu li a 범위 {
background-position: 0 -102px;
}

/*링크가 활성일 때 스타일*/
.animation_menu li.current a {
/*일반 회색 강조 배경*/
background-position: 0 0;
}
/*노란색 배경 강조 표시*/
.animation_menu li.current a 범위 {
background-position: 0 -51px;
}

Css 작업은 여기까지 하고 javascript를 살펴보겠습니다.

마지막으로 JavaScript
메뉴의 그라데이션 효과는 주로 불투명도 조절을 통해 구현됩니다. 아래 코드를 참조하세요.

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

// 불투명도를 0으로 설정하면, 스팬 스타일과 텍스트는 숨겨져 있습니다
$(".animation_menu li aspan").css("opacity", "0");

// 호버 이벤트 바인딩
$(".animation_menu li aspan").hover(
//이벤트에 마우스를 올리세요
function () {
// 불투명도를 0에서 0까지 동적으로 변경합니다. 1,
$(this).stop().animate({
opacity: 1
}, " Slow"); },
//마우스 아웃 이벤트
function () {
// 마우스가 멀어지면 동적이 0으로 변경되므로 a의 원래 스타일을 참조하세요.
//클릭 이벤트 바인딩, 현재 연결 클릭, 현재 클래스를 li에 추가, 동시에 다른 li의 현재 클래스 제거
$(".animation_menu li a").click(function ( ) {
$(".animation_menu li a").each(함수(색인, 항목) {
$(item).parent().removeClass("current");
});
$(this ).parent().addClass("현재");

});

이것이 전부입니다. 이 jQuery 탐색 메뉴가 여러분에게 영감을 줄 수 있기를 바랍니다.