jQuery css_jquery로 구현된 파란색 가로 보조 탐색 메뉴 효과 코드-JS 튜토리얼-php.cn

jQuery css_jquery로 구현된 파란색 가로 보조 탐색 메뉴 효과 코드

PHP中文网

풀어 주다： 2016-05-16 15:39:46

원래의

1420명이 탐색했습니다.

이 문서의 예에서는 jQuery CSS로 구현된 파란색 가로 보조 탐색 메뉴 효과를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

이것은 파란색 클래식 jQuery CSS 수평 보조 탐색 메뉴입니다. 마음에 드실 거라 믿습니다. 파란색은 다른 웹사이트에서 가져온 매우 클래식한 스타일이므로 매우 좋습니다. 모든 사람과 공유하고 싶습니다.

런닝 효과 스크린샷은 다음과 같습니다.

jQuery css_jquery로 구현된 파란색 가로 보조 탐색 메뉴 효과 코드

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-menu-codes/

구체적인 코드는

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>蓝色水平二级导航菜单</title> 
<style> 
*{font-size:12px; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; } 
body{margin:0; padding:0; background:white; } 
img{border:0; } 
a:link,a:visited,a:active{text-decoration:none; } 
a:hover{text-decoration:underline; } 
/********** header **********/ 
.header{width:100%; 
background:url(images/header_bg.gif) 
#ffffff repeat-x 0 0; text-align:center; } 
.header .padder{width:910px; margin:0 auto; 
background:url(images/header_bg.gif) 
#ffffff repeat-x 0 0; 
padding-bottom:4px; 
text-align:left; 
} 
.header 
.padder 
.nav{background:url(images/vertical.gif) 
repeat-x 0 -36px; height:36px; } 
.header 
.padder 
.navLeftBg{background:urlvertical.gif) 
no-repeat 0 0; height:36px; } 
.header 
.padder 
.navRightBg{background:url(images/icons.gif) 
no-repeat right -146px; height:36px; } 
.header 
.padder 
.nav 
.mainNav{padding-left:24px; position:absolute; } 
.header 
.padder 
.nav 
.mainNav 
a:link,
.header 
.padder 
.nav 
.mainNav a:visited,.header .padder .nav .mainNav 
a:active{width:90px; height:36px; 
display:inline-block; text-align:center; color:#ffffff; 
font-weight:bold; font-size:14px; line-height:36px; margin-left:11px; } 
.header .padder .nav .mainNav a:hover{text-decoration:none; } 
.header .padder .nav .mainNav a.actived:link,.header .padder .nav 
.mainNav a.actived:visited,.header .padder .nav .mainNav a.actived:hover,.header 
.padder .nav .mainNav a.actived:active{background:url(images/icons.gif) no-repeat 0 -27px; color:#000000; }
 .header .padder .secondNav{line-height:21px; text-align:left; } 
 .header .padder .secondNav a{color:#266392; 
 display:in

로그인 후 복사

위는 jQuery CSS로 구현한 파란색 가로 보조 탐색 메뉴 효과 code_jquery의 내용입니다. PHP 중국어 홈페이지(www.php.cn)!