jquery implémente un menu de navigation à deux niveaux avec Renderings

Maison

interface Web

js tutoriel

jquery implémente un menu de navigation à deux niveaux avec Renderings_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:56 PM

jquery 导航菜单

Principalement utilisé pour les systèmes d'exploitation et de maintenance où les exigences d'interface ne sont pas élevées. Je sens profondément que ma capacité de conception de pages est extrêmement faible et je ne peux qu'en tirer des leçons. La logique d'interaction est encore un peu plus compétente.

Publiez le code directement :

1. Page HTML et interaction JS, faites attention à l'introduction du fichier Jquery

Copier le code Le code est le suivant :

两级导航菜单的示例

2. Fichier CSS

[css] afficher le morceau de code dérivé de Mon morceau de code

div:not(#topnav, #logo){font-size:10pt!important}
*{font-family : Microsoft Yahei, Song Dynasty, san-serif!important}

/*
* En-tête CSS
*/

a{color:#2F649A;}
a:link{text-decoration:none;}
a :visited{text-decoration:none;}
a:hover{text-decoration:underline;}
a:active{text-decoration:none;}

body {
background -color : #dae7f6 ;
marge : -0px -0px
}

#firstHeader {
hauteur :
}

#logo {
float : gauche ;
taille de la police : 28 pts ;
marge : 10px 0px 10px 20px
famille de police : script officiel, Microsoft Yahei, Song Dynasty, san-serif !important ; }

#target {
float : gauche ;
taille de la police : 10,5 pt ;
style de police : italique
poids de la police : 1,5em
marge ; : 25px 30px 0px 5px;
}

#toolbar {
float: right;
marge: 0px 3px;

#toolbar a {
font-size : 10pt ;
}

#content {
background-color : #45b97c
}

/* le menu supérieur */
#topnav {
float : gauche ;
couleur de fond : #426ab3;
largeur :
}

#topnav .topnav_list {
float :gauche ; largeur : 100 % ; hauteur : 29 px ; couleur : #333 ; marge : 0px 0px -1px 0px ;
taille de la police : 11 pt ! important ; poids de la police : gras ; >}

#topnav .topnav_list a {
display:inline-block; padding: 2px 0 2px 18px
color:#fff; height:22px; *line-height:24px; curseur:pointeur;
border-radius: 5px; border-right: 2px outset
}

#topnav .topnav_list une étendue {
display:inline-block; height:22px; padding:0 20px 0 0;
border-top-left-radius: 8px; -radius inférieur gauche : 0px ;
rayon inférieur droit : 0px
}

#topnav .topnav_list a:hover, #topnav .topnav_list a.select {
position : relatif ; z-index : 9 ;
couleur d'arrière-plan : #45b97c ;
couleur :#fff ; décoration de texte :aucun
bordure-haut-gauche-rayon : 8px ; >border-top-right-radius: 8px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}

#topnav . topnav_list a:hover span, #topnav .topnav_list a.select span {
background-color: #45b97c;
color:#fff;
border-radius: 5px; 🎜>.clear {
clear : les deux ;
}

/* le premier menu */
#nav {
font-size :
}

#nav .nav_list {
float:left; padding: 3px 0 3px 0; font-weight:bold;height:25px; 🎜>display:inline-block;
padding: 2px 15px 2px 15px
color:#fff; vertical-align:line-height:22px; 🎜>border-radius : 8px ;
border-radius : 8px
}

#nav .nav_list a span {
display:inline-block
border- ; rayon : 8px ;
}

#nav .nav_list a:hover, #nav .nav_list a.select {
position:relative; z-index:9; aucun ;
border-radius : 8px ;
border-radius : 8px ;
}

#nav .nav_list a:hover, #nav .nav_list a :hover span {
couleur d'arrière-plan : #007d65 ;
couleur : #fff ;
}

#nav .nav_list a.select, #nav .nav_list a.select span {
couleur d'arrière-plan : # fff;
couleur : #ca0000
}

Rendu

Déclaration de ce site Web

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