我想在jsp页面上实现一个子菜单，鼠标放上去自动可以显示出下拉菜单。
就如同oracle官网这样，鼠标放到Country上，自动显示国家列表菜单。找了好多例子，都不行，本人前端比较薄弱，一直是从事后端开发，望懂前端的大神指点一二，在线等。...
就如同oracle官网这样，鼠标放到Country上，自动显示国家列表菜单。找了好多例子，都不行，本人前端比较薄弱，一直是从事后端开发，望懂前端的大神指点一二，在线等。
展开
1个回答
展开全部
跟JSP没关系，主要是前端技术，用HTML和CSS做好布局等设计，重点了解下CSS布局和定位的知识，display，position这两个属性。
然后用JS控制元素的display属性做显示和隐藏，用mouse事件触发自己的JS方法。
最简单的办法，找一个插件，比如bootstrap和jQuery，很简单的就能实现楼主想要的效果。
下面是Demo代码，原生开发和基于插件的方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子菜单</title>
<!--CDN上引入bootstrap样式和插件，可以不使用，自己写一样有效果-->
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
#subMenu {
display: none;
position: fixed;
top: 55px;
left: 10px;
}
</style>
<script>
function showSubMenu() {
var m = document.getElementById("subMenu");
m.style.display = "block";
}
function hiddenSubMenu() {
var m = document.getElementById("subMenu");
m.style.display = "none";
}
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#" onmouseover="showSubMenu()" onmouseout="hiddenSubMenu()">省市</a>
</div>
<div class="navbar-header">
<a class="navbar-brand" href="#" data-toggle="dropdown">插件子菜单</a>
<ul class="dropdown-menu">
<li><a href="#">江苏</a>
</li>
<li class="divider"></li>
<li><a href="#">山西</a>
</li>
</ul>
</div>
</nav>
<div id="subMenu" class="panel panel-default">
<div class="panel-body">
<li>河北</li>
<li>河南</li>
<li>山东</li>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
