jsp左侧导航栏下拉菜单
时间: 2023-08-31 12:12:31 浏览: 166
你可以使用HTML和CSS实现一个左侧导航栏下拉菜单,结合JavaScript实现动态效果。以下是一个简单的示例:
HTML代码:
```
<div class="nav">
<ul>
<li><a href="#">菜单1</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a>
<ul>
<li><a href="#">子菜单4</a></li>
<li><a href="#">子菜单5</a></li>
</ul>
</li>
</ul>
</div>
```
CSS代码:
```
.nav {
width: 200px;
}
.nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav li {
position: relative;
}
.nav a {
display: block;
padding: 10px;
background-color: #eee;
color: #333;
text-decoration: none;
}
.nav ul ul {
position: absolute;
left: 100%;
top: 0;
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul ul li {
width: 200px;
float: none;
}
.nav ul ul a {
padding: 5px;
background-color: #ddd;
}
.nav ul ul ul {
left: 100%;
top: 0;
margin-left: 10px;
}
```
JavaScript代码:
```
// 在这里添加 JavaScript 代码来实现动态效果
```
上述代码实现了一个基本的左侧导航栏下拉菜单,你可以根据自己的需求进行修改。
阅读全文
相关推荐
js+css下拉导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>首页 - 铁煤集团协同办公平台</title>
</head>
<body id="newskin">
<script language=javascript>
var MyBlogName = "netoe";
function logonout()
{
document.getElementById("a_logon").href="../../utility.tool.hexun.com/quit.aspx@gourl="+document.location.href;
}
</script>
<script language=javascript>
var myblogName="netoe";
var homeDiv=5;
function ShowIndexDiv(index)
{
for(var i=1;i<= homeDiv;i++)
{
var e = document.getElementById("indexDiv_"+ i);
if( e == null)
continue;
if( i == index)
{
e.className="topnew_on";
}
else
{
e.className="topnew_out";
}
}
}
var indexLoc=document.location.href.toLowerCase();
if(indexLoc.indexOf("admin_index")>0)
{
ShowIndexDiv(1);
}
if(indexLoc.indexOf("admin_userfocus")>0||indexLoc.indexOf("admin_mefocus")>0||indexLoc.indexOf("admin_focusme")>0||indexLoc.indexOf("admin_focusmore")>0)
{
ShowIndexDiv(2);
}
if(indexLoc.indexOf("admin_myfriends1")>0)
{
ShowIndexDiv(3);
}
if(indexLoc.indexOf("admin_relatecircle")>0||indexLoc.indexOf("admin_mycircle1")>0)
{
ShowIndexDiv(4);
}
if(indexLoc.indexOf("admin_window")>0||indexLoc.indexOf("admin_window")>0)
{
ShowIndexDiv(5);
}
/* //lhj
*/
</script>
<script language="javascript">
</script>
个人设置
修改密码
留言板
隐私设置
闭环管理
安全管理
质量管理
C菜单项
C子菜单1
自定义模块
D菜单项
D子菜单1
E菜单项
E子菜单1
F菜单项
F子菜单1
G菜单项
G子菜单1
标签显示
H菜单项
H子菜单1
视频管理
专辑管理
</body>
</html>