Heim >Web-Frontend >js-Tutorial >Blauer horizontaler sekundärer Navigationsmenü-Effektcode, implementiert von jQuery css_jquery

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

PHP中文网Original: 2016-05-16 15:39:461392Durchsuche

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

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einfacher Falt- und Erweiterungseffekt für mehrstufige Menüs, implementiert durch JS CSS_Javascript-KenntnisseNächster Artikel：Einfacher Falt- und Erweiterungseffekt für mehrstufige Menüs, implementiert durch JS CSS_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen