Blauer horizontaler sekundärer Navigationsmenü-Effektcode, implementiert von jQuery css

Blauer horizontaler sekundärer Navigationsmenü-Effektcode, implementiert von jQuery css_jquery

PHP中文网

Freigeben： 2016-05-16 15:39:46

Original

1421 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt den blauen horizontalen sekundären Navigationsmenüeffekt, der von jQuery CSS implementiert wird. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:

Dies ist ein blaues, klassisches horizontales sekundäres jQuery-CSS-Navigationsmenü. Ich glaube, es wird Ihnen gefallen, blau, ein super klassischer Stil, der von anderen Websites übernommen wurde Ich möchte es gerne mit allen teilen.

Der Screenshot des Laufeffekts lautet wie folgt:

Blauer horizontaler sekundärer Navigationsmenü-Effektcode, implementiert von jQuery css_jquery

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code ist wie folgt:

<!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

Nach dem Login kopieren

Das Obige ist der Inhalt des blauen horizontalen sekundären Navigationsmenüeffekts code_jquery, der von jQuery CSS implementiert wird. Weitere verwandte Inhalte finden Sie unter PHP chinesische Website (www.php.cn)!