Code d'effet du menu de navigation secondaire horizontal bleu implémenté par jQuery css

Code d'effet du menu de navigation secondaire horizontal bleu implémenté par jQuery css_jquery

PHP中文网

Libérer： 2016-05-16 15:39:46

original

1422 Les gens l'ont consulté

L'exemple de cet article décrit l'effet de menu de navigation secondaire horizontal bleu implémenté par jQuery css. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un menu de navigation secondaire horizontal jQuery CSS classique bleu, je pense que vous l'aimerez, bleu, un style super classique, tiré d'autres sites Web, je pense que c'est très bien, donc. J'aimerais le partager avec tout le monde.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Code deffet du menu de navigation secondaire horizontal bleu implémenté par jQuery css_jquery

L'adresse de la démonstration en ligne est la suivante :

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

Le code spécifique est comme suit :

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

Copier après la connexion

Ce qui précède est le contenu de l'effet de menu de navigation secondaire horizontal bleu code_jquery implémenté par jQuery css. Pour plus de contenu connexe, veuillez faire attention au. Site Web chinois PHP (www.php.cn) !