jquery 实现两级导航菜单附效果图_jquery-js教程-PHP中文网

jquery 实现两级导航菜单附效果图_jquery

WBOY

发布： 2016-05-16 16:56:20

原创

1090 人浏览过

主要用于运维系统，对界面要求不高的场合。深深感到自己页面设计能力弱爆了，只能借鉴一下了，交互逻辑还可以胜任一点。

直接贴代码:

1. HTML 页面及 JS 交互，注意引入 Jquery 文件

复制代码代码如下:

两级导航菜单的示例

2. CSS 文件

[css] view plaincopyprint?在CODE上查看代码片派生到我的代码片

div:not(#topnav, #logo){font-size:10pt!important}
*{font-family: 微软雅黑, 宋体, 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: 隶书, 微软雅黑, 宋体, 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;
border-radius: 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. 效果图