recherche

Maison >interface Web >js tutoriel >Code d'effet du menu de navigation secondaire horizontal bleu implémenté par jQuery css_jquery

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

PHP中文网
PHP中文网original
2016-05-16 15:39:461391parcourir

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


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

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Effet de menu simple à plusieurs niveaux de pliage et d'expansion implémenté par les compétences JS CSS_javascriptArticle suivant：Effet de menu simple à plusieurs niveaux de pliage et d'expansion implémenté par les compétences JS CSS_javascript

Articles Liés

Voir plus