jquery implémente un menu de navigation à deux niveaux avec Renderings_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 :

两级导航菜单

两级导航菜单的示例

[ 你好: admin ]

[ 提建议 ]

首页
IT学习
百科
学术资源
更多

我的博客

并发编程网
CSDN
Infoq
伯乐在线
外刊评论

WIKI百科
知乎

ACM

虾米音乐
网易公开课

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