1. 全栈程序员必看首页

纵向、横向导航菜单及二级弹出菜单

全栈程序员-站长 • • 未分类 • 阅读 11

纵向、横向导航菜单及二级弹出菜单一、纵向导航菜单及二级弹出菜单首先在body中添加一个div标签，其中包含ulliul的标签结构存放网站菜单，效果如下：<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%><%Stringpath=request.getContextPath();StringbasePath=…

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

一、纵向导航菜单及二级弹出菜单

首先在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.net/159464.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • 实现labelme批量json_to_dataset方法

    实现labelme批量json_to_dataset方法

    实现labelme批量json_to_dataset方法labelme可以帮助我们快速的实现Mask-RCNN中数据集json文件的生成，然而还需要我们进一步的将json转成dataset，可以直接在cmd中执行labelme_json_to_dataset.exeC:\Users\Administrator\Desktop\total\1.json(路径)，但是这个过程需要我们一个json文件的生成，过程很慢。一、打开abelm…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月11日
    0
  • pycharm英文读音_pycharm英文界面翻译

    pycharm英文读音_pycharm英文界面翻译

    pycharm英文读音_pycharm英文界面翻译使用的是PyCharm2018.3.4代码的自动补全在PyCharm中找到PowerSaveMode选项，将前面的对勾去掉。在左上角File的展开栏的倒数第二行在PyCharm的最右下角有个????的样子(在????旁边)，单击点开就可看到PowerSaveMode选项在这个Currentinspectionprofile中可以设置HighlightingLevel即检查代码严格程度。(过多的不…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月27日
    3
  • Ubuntu命令行下树莓派连接WiFi操作方法

    Ubuntu命令行下树莓派连接WiFi操作方法

    Ubuntu命令行下树莓派连接WiFi操作方法第一种方法：通过配置/etc/network/interfaces文件实现终端输入sudovim/etc/network/interfaces修改后文件内容如下：autoloifaceloinetloopbackifaceeth0inetdhcpautowlan0allow-hotplugwlan0ifacewlan0inetdhcpwpa-ssid”你的wifi名称”wpa-p

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月10日
    60
  • VMWare虚拟机上网的方法

    VMWare虚拟机上网的方法

    VMWare虚拟机上网的方法VMWare虚拟机上网的方法1推荐局域网方式：如果主机是在局域网内通过网关或代理上网，那虚拟机的网络方式设为Bridged连接，把IP地址设为同主机在一个网段，比如主机IP是192.168.0.45，网关是192.168.0.1，那虚拟机的IP设为192.168.0.2－254中的一个，注意不要和已有的IP重复，然后网关也设为192.168.0.1，就可以上网了。宽带拨号方式

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月19日
    40
  • 惠普笔记本连接不了无线网_惠普电脑连接不了无线网

    惠普笔记本连接不了无线网_惠普电脑连接不了无线网

    惠普笔记本连接不了无线网_惠普电脑连接不了无线网关于惠普电脑连不上无线网的问题，一些网友不太清楚该怎么办，那么下面就由学习啦小编来给你们说说惠普电脑连不上无线网的解决方法吧，希望可以帮到你们哦!惠普电脑连不上无线网的解决方法一：电脑连不上wifi，图标会有黄色叹号(我的连上所以没有)，在右下角右键点击无线wifi图标，再点击打开网络和共享中心。在网络和共享中心里面点击左上角的更改适配器设置。进去以后一般可以看到3个连接，一个是蓝牙的，一个是有线…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月13日
    3
  • WinRAR去广告心得

    WinRAR去广告心得

    WinRAR去广告心得学习winAPI函数CreateWindow函数 软件创建窗口分为1首先注册2开始创建3显示分别有各自函数形成 还要有消息传递机制每个窗口有自己的类注意类函数参数问题   Winrar5.4去广告首先下断创建窗口函数进而多次运行暂停知道找到广告出现的窗口class追踪函数入口ret掉注意堆栈平衡

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月23日
    26

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号