欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-04 14:33:59
...
主要用于运维系统, 对界面要求不高的场合。 深深感到自己页面设计能力弱爆了,只能借鉴一下了, 交互逻辑还可以胜任一点。

直接贴代码:

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. 效果图
jquery 实现两级导航菜单附效果图_jquery