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

时间：2021-05-26

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

直接贴代码:

1. HTML 页面及 JS 交互， 注意引入 Jquery 文件
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://mentModule"><span>外刊评论</span></a>
</div>

<div class="nav_list" id="baikebo">
<a href="#" class="select" id="wikiModule"><span>WIKI百科</span></a>
<a href="#" id="zhihuModule"><span>知乎</span></a>
</div>

<div class="nav_list" id="scisrcbo">
<a href="#" class="select" id="acmModule"><span>ACM</span></a>
</div>

<div class="nav_list" id="morebo">
<a href="#" class="select" id="xiamiModule"><span>虾米音乐</span></a>
<a href="#" id="opencourseModule"><span>网易公开课</span></a>
</div>

</div>
</div>
<div id="content">
<iframe id="maincontent" frameborder="0" width="100%"></iframe>
</div>

</body>
</html>

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;
}


#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;
}


#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. 效果图

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章