jquery implements two-level navigation menu with renderings_jquery

Mainly used for operation and maintenance systems where the interface requirements are not high. I deeply feel that my page design ability is extremely weak, and I can only learn from it. The interaction logic is still a little more competent.

Post the code directly:

1. HTML page and JS interaction, pay attention to the introduction of Jquery file

Copy codeThe code is as follows:

两级导航菜单

两级导航菜单的示例

[ 你好: admin ]

[ 提建议 ]

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

我的博客

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

WIKI百科
知乎

ACM

虾米音乐
网易公开课

2. CSS file

[css] view plaincopyprint? View the code piece on CODE derived to My code piece

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

/*
* Header 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;
margin: -0px -0px;
}

#firstHeader {
height: 56px;
}

#logo {
float: left;
font-size: 28pt;
margin: 10px 0px 10px 20px;
font-family: official script, Microsoft Yahei, Song Dynasty, san-serif!important;
}

#target {
float: left;
font-size: 10.5pt;
font-style: italic;
font-weight: 1.5em;
margin : 25px 30px 0px 5px;
}

#toolbar {
float: right;
margin: 0px 3px;
}

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

#content {
background-color: #45b97c;
}

/* the top menu */
#topnav {
float: left;
background-color: #426ab3;
width: 100%;
}

#topnav .topnav_list {
float:left; width: 100%; height:29px; color:#333; margin: 0px 0px -1px 0px;
font-size: 11pt!important; font-weight:bold;
border-radius: 5px;
}

#topnav .topnav_list a {
display:inline-block; height:24px; padding: 2px 0 2px 18px;
color:#fff; vertical-align:middle; line- height:22px; *line-height:24px; cursor:pointer;
border-radius: 5px; border-right: 2px outset #00BFFF;
}

#topnav .topnav_list a span {
display:inline-block; height:22px; padding:0 20px 0 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border -bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}

#topnav .topnav_list a:hover, #topnav .topnav_list a.select {
position:relative; z-index:9;
background-color: #45b97c;
color:#fff; text-decoration:none;
border-top-left-radius: 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: both;
}

/* the first menu */
#nav {
font-size: 10pt;
}

#nav .nav_list {
float:left; padding: 3px 0 3px 0; font-weight:bold;height:25px;
}

#nav .nav_list a {
display:inline-block;
padding: 2px 15px 2px 15px;
color:#fff; vertical-align:middle; line-height:22px; *line-height:24px; cursor:pointer;
border-radius: 8px;
border-radius: 8px;
}

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

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

#nav .nav_list a:hover, #nav .nav_list a :hover span {
background-color: #007d65;
color: #fff;
}

#nav .nav_list a.select, #nav .nav_list a.select span {
background-color: #fff;
color: #ca0000;
}

3. Rendering