纵向、横向导航菜单及二级弹出菜单
大家好,又见面了,我是你们的朋友全栈君。
一、纵向导航菜单及二级弹出菜单
首先在body中添加一个div标签,其中包含ulli ul的标签结构存放网站菜单,效果如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'demo4.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body>
<div id="menu">
<ul>
<li><a href="#" target="blank">首页</a></li>
<li><a href="#">赛事指南</a>
<ul>
<li><a href="#">竞赛规程</a></li>
<li><a href="#">报名须知</a></li>
<li><a href="#">参赛声明</a></li>
<li><a href="#">比赛路线</a></li>
</ul>
</li>
<li><a href="#">赛事介绍</a>
<ul>
<li><a href="#">赛事简介</a></li>
<li><a href="#">特色活动</a></li>
<li><a href="#">精彩回顾</a></li>
</ul>
</li>
<li><a href="#">赛事报名</a>
<ul>
<li><a href="#">我的报名</a></li>
<li><a href="#">号码查询</a></li>
<li><a href="#">成绩查询</a></li>
<li><a href="#">证书查询</a></li>
<li><a href="#">照片查询</a></li>
</ul>
</li>
<li><a href="#">合作伙伴</a>
<ul>
<li><a href="#">冠名赞助商</a></li>
<li><a href="#">官方赞助商</a></li>
<li><a href="#">赛事支持商</a></li>
<li><a href="#">公益合作伙伴</a></li>
<li><a href="#">合作媒体</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
图中效果是标签自带的样式,现在需要先将默认样式清除,再添加自己的样式,在Head标签中添加css代码:
<style type="text/css">
/*设置body中字体样式*/
body{font-family:verdana;font-size:12px;line-height:1.5;}
/*设置菜单样式*/
#menu{width:100px;border:1px solid #CCC;}
#menu ul{list-style:none;margin:0;padding:0;}
/*重新设置超链接的样式*/
a{color:#000;text-decoration:none;}
/*设置鼠标悬浮超链接上时改变字体颜色*/
a:hover{color:#F00;}
</style>
下面是将同一子菜单下的菜单移动位置变为父级菜单的一部分,这里需要用到position属性。
1.position:relative;如果对一个元素进行相对定位,首先它将出现在它所在的位置上。然后通过设置垂直或水平位置,让这个元素”相对于”它的原始起点进行移动。(再一点,相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他框)
2.position:absolute;表示绝对定位,位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流,因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。(因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高,它显示的越在上层。)
3.父容器使用相对定位,子元素使用绝对定位后,这样子元素的位置不再相对于浏览器左上角,而是相对于父窗口左上角。
4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置,这四个属性只有在该元素使用定位后才生效,其它情况下无效。另外这四个属性同时只能使用相邻的两个,不能即使用上又使用下,或即使用左,又使用右。
我们要实现的效果是子菜单不占据空间,所以可以使用position:absolute;让子元素脱离文档流,使用left和top属性确定子菜单相对于父级菜单的位置。然后父级菜单使用position:relative;来固定在文档流中。
/*设置父级菜单样式*/
#menu ul li{background:#eee;padding:0px 7px;height:25px;line-height:25px;border-bottom:1px solid #CCC;position:relative;}
/*设置子菜单样式*/
#menu ul li ul{display:none;position:absolute;left:100px;top:0px;width:100px;border:1px solid #CCC;}
这里由于需要隐藏和显示子菜单,所以涉及到display属性。
display:none;不显示元素
display:block;可以将行内标签变为块标签,占据一行
display:inline;可以将块标签变为行内标签,占据一行内的一部分位置
我们需要实现,当鼠标悬浮到父级菜单上时显示子菜单,当鼠标离开父级菜单时隐藏子菜单,因此可以使用display的none属性隐藏菜单,当鼠标移动到父级菜单上时使用display:block显示菜单。
/*鼠标移动到父级菜单时显示子菜单*/
#menu ul li:hover ul{display:block;}
最后的页面代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'demo4.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
/*设置body中字体样式*/
body{font-family:verdana;font-size:12px;line-height:1.5;}
/*设置菜单样式*/
#menu{width:100px;border:1px solid #CCC;}
#menu ul{list-style:none;margin:0;padding:0;}
/*重新设置超链接的样式*/
a{color:#000;text-decoration:none;}
/*设置鼠标悬浮超链接上时改变字体颜色*/
a:hover{color:#F00;}
/*设置父级菜单样式*/
#menu ul li{background:#eee;padding:0px 7px;height:25px;line-height:25px;border-bottom:1px solid #CCC;position:relative;}
/*设置子菜单样式*/
#menu ul li ul{display:none;position:absolute;left:100px;top:0px;width:100px;border:1px solid #CCC;}
/*鼠标移动到父级菜单时显示子菜单*/
#menu ul li:hover ul{display:block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#" target="blank">首页</a></li>
<li><a href="#">赛事指南</a>
<ul>
<li><a href="#">竞赛规程</a></li>
<li><a href="#">报名须知</a></li>
<li><a href="#">参赛声明</a></li>
<li><a href="#">比赛路线</a></li>
</ul>
</li>
<li><a href="#">赛事介绍</a>
<ul>
<li><a href="#">赛事简介</a></li>
<li><a href="#">特色活动</a></li>
<li><a href="#">精彩回顾</a></li>
</ul>
</li>
<li><a href="#">赛事报名</a>
<ul>
<li><a href="#">我的报名</a></li>
<li><a href="#">号码查询</a></li>
<li><a href="#">成绩查询</a></li>
<li><a href="#">证书查询</a></li>
<li><a href="#">照片查询</a></li>
</ul>
</li>
<li><a href="#">合作伙伴</a>
<ul>
<li><a href="#">冠名赞助商</a></li>
<li><a href="#">官方赞助商</a></li>
<li><a href="#">赛事支持商</a></li>
<li><a href="#">公益合作伙伴</a></li>
<li><a href="#">合作媒体</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
二、横向导航菜单及二级菜单
横向菜单和纵向菜单类似
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'Test.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
body{font-family:Verdana;font-size:15px;line-height:1.5;}
a{color:#000;text-decoration:none;}
a:hover{color:#F00;}
#menu{border-bottom:3px solid #E10001;width:500px;height:25px;background:#eee;margin:0px auto;}
#menu ul{list-style:none;margin:0px;padding:0px;}
#menu ul li{float:left;margin-left:35px;}
<!--将超链接设置成块元素更美观-->
#menu ul li a{display:block;padding:0px auto;width:85px;height:25px;line-height:25px;text-align:center;font-size:15px;}
#menu ul li a:hover{background:#333;color:#fff;}
#menu ul li ul{border:1px solid #ccc;display:none;position:absolute;}
#menu ul li ul li{float:none;width:95px;background:#eee;margin:0 auto;}
#menu ul li ul li a{background:none;}
#menu ul li ul li a:hover{background:#333;color:#fff;}
#menu ul li:hover ul{display:block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#" target="blank">首页</a></li>
<li><a href="#">赛事指南</a>
<ul>
<li><a href="#">竞赛规程</a></li>
<li><a href="#">报名须知</a></li>
<li><a href="#">参赛声明</a></li>
<li><a href="#">比赛路线</a></li>
</ul>
</li>
<li><a href="#">赛事介绍</a>
<ul>
<li><a href="#">赛事简介</a></li>
<li><a href="#">特色活动</a></li>
<li><a href="#">精彩回顾</a></li>
</ul>
</li>
<li><a href="#">赛事报名</a>
<ul>
<li><a href="#">我的报名</a></li>
<li><a href="#">号码查询</a></li>
<li><a href="#">成绩查询</a></li>
<li><a href="#">证书查询</a></li>
<li><a href="#">照片查询</a></li>
</ul>
</li>
<li><a href="#">合作伙伴</a>
<ul>
<li><a href="#">冠名赞助商</a></li>
<li><a href="#">官方赞助商</a></li>
<li><a href="#">赛事支持商</a></li>
<li><a href="#">公益合作伙伴</a></li>
<li><a href="#">合作媒体</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/159464.html原文链接:https://javaforall.cn
相关文章
- wordpress导航菜单链接处添加nofollow
- Vue前端项目-主页布局-左侧导航菜单(静态)[通俗易懂]
- 7b2美化-鼠标悬停导航菜单翻转特效
- 7b2添加Pc区块菜单
- C/C++ Qt ListWidget 增加右键菜单
- C/C++ Qt Tree与Tab组件实现分页菜单
- 【C 语言】文件操作 ( 配置文件读写 | 框架搭建 | 主函数逻辑结构 | 启动无限循环 | 接收用户操作值 | 宏定义 | 显示操作菜单 )
- 20个让你爱不释手的汉堡菜单设计风格网站示例欣赏
- 提升效率利用Redis缓存优化菜单体验(redis缓存菜单)
- Popup对象实现右键菜单
- 几个不错的自动收缩菜单导航效果
- 自己做一款不错的二级导航菜单
- javascript采用数组实现tab菜单切换效果
- jquery实现二级/三级/多级联动菜单的思路及代码
- 仿当当网淘宝网等主流电子商务网站商品分类导航菜单
- jquery实现带二级菜单的导航示例