垂直菜单的实现（使用hovor+无序列表）

最新推荐文章于 2022-12-26 13:20:15 发布
最新推荐文章于 2022-12-26 13:20:15 发布
阅读量793 收藏 1
点赞数
分类专栏： h5 CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xqiitan/article/details/88800481
版权
h5 同时被 2 个专栏收录
48 篇文章 0 订阅
订阅专栏
CSS
27 篇文章 0 订阅
订阅专栏 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>导航菜单</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				font-size: 14px;
			}
			ul {
				list-style: none;
				width: 100px
			}
			a {
				color: #333;
				text-decoration: none
			}
			.nav li a {
				display: block;
				text-indent: 20px;
				height: 30px;
				line-height: 30px;
				width: 100px;
				background-color: #efefef;
				margin-bottom: 1px;
			}
			.nav li a:hover {
				background-color: #F60;
				color: #fff
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<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>
	</body>
</html>

===================================

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>水平导航菜单</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				font-size: 14px;
			}
			ul {
				list-style: none;
			}
			a {
				color: #333;
				text-decoration: none
			}
			li {
				float:left; // 浮动菜单item
			}
			/* 文本缩进，不影响整体的宽度：text-indent: 20px; */
			.nav li a {
				display: block;
				height: 30px;
				line-height: 30px;
				width: 100px;
				background-color: darkslategray;
				margin-left: 2px;
				text-align: center;
			}
			.nav li a:hover {
				background-color: #F60;
				color: #fff
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<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>
	</body>
</html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航菜单</title>
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
a{color:#333;text-decoration:none}
.nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}
.nav li{float:left}
.nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; background:url(http://img.mukewang.com/53846438000168f901200060.jpg); margin-left:1px;}
.nav li a.on, .nav li a:hover{ background-position: 0 -30px; color:#fff;}
</style>
</head>
<body>

<ul class="nav">
    <li><a class="on" href="#">首　　页</a></li>
    <li><a href="#">新闻快讯</a></li>
    <li><a href="#">产品展示</a></li>
    <li><a href="#">售后服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</body>
</html>

切换时，变化菜单的宽高例子，使用js或jquery控制item的宽高。

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>水平，圆角导航菜单</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				font-size: 14px;
			}

			ul {
				list-style: none;
				height: 30px;
				margin-top: 20px;
				border-bottom: 5px solid #f60;
				padding-left: 30px;
			}

			a {
				color: #333;
				text-decoration: none
			}

			.nav li {
				float: left; // 浮动菜单item
				padding-top: 20px;
			}

			/* 文本缩进，不影响整体的宽度：text-indent: 20px; */
			.nav li a {
				display: block;
				height: 30px;
				line-height: 30px;
				width: 100px;
				background-color: yellowgreen;
				margin-right: 3px;
				text-align: center;
			}

			/* on默认状态，和鼠标选中状态是一样的 */
			.nav li a:hover {
				margin-top: -10px;
				height: 40px;
				color: #fff;
				line-height: 40px;
			}
		</style>
		<!-- 使用jquery替代js，实现菜单动画效果。代码简化 -->
		<!-- <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$('a').hover {
					function(){
						$(this).stop().animate({"width":"160px"}, 200);
					},
					function(){
						$(this).stop().animate({"width":"120px"}, 200);
					}
				}
			})
		</script> -->
		<script type="text/javascript">
			window.onload = function() {
				var aA = document.getElementsByTagName('a');
				for (var i = 0; i < aA.length; i++) {
					// 添加mouseOver事件
					aA[i].onmouseover = function() {
						clearInterval(this.time);
						var This = this;
						This.time = setInterval(function() {
							This.style.width = This.offsetWidth + 8 + "px";
							if (This.offsetWidth >= 120) {
								clearInterval(This.time);
							}
						}, 30);
					};
					aA[i].onmouseout = function() {
						clearInterval(this.time);
						var This = this;
						This.time = setInterval(function() {
							This.style.width = This.offsetWidth - 8 + "px";
							if (This.offsetWidth <= 120) {
								This.style.width = "120px";
								clearInterval(This.time);
							}
						}, 30);
					};
				}
			}
		</script>
	</head>
	<body>
		<ul class="nav">
			<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>
	</body>
</html>

=======中英文切换菜单实现======

<!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>
    <title></title>
    <style type="text/css">
        .top-nav
        {
            font-size: 12px;
            font-weight: bold;
            list-style: none;
            border-bottom: 8px solid #DC4E1B;
            overflow: auto;
        }
        .top-nav li
        {
            float: left;
            margin-right: 1px;
        }
        .top-nav li a
        {
            line-height: 20px;
            text-decoration: none;
            background: #DDDDDD;
            color: #666666;
            display: block;
            width: 80px;
            text-align: center;
        }
        /*设置正常状态英文菜单隐藏*/
         .top-nav li a span{
             display:none;
         }
        /*鼠标移动到链接上面时将英文菜单显示*/
        .top-nav li:hover a span{
             display:block;
             background:#DC4E1B;
             color:white;
         }
        /*鼠标移动到链接上面时将中文菜单位置上移*/
         .top-nav li:hover a {
            margin-top:-20px;
         }
    </style>
</head>
<body>
    <ul class="top-nav">
        <li><a href="#">首页<span>Home</span></a></li>
        <li><a href="#">课程大厅<span>Course</span></a></li>
        <li><a href="#">学习中心<span>Learn</span></a></li>
        <li><a href="#">关于我们<span>About</span></a></li>
    </ul>
</body>
</html>

 

xqiitan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html下拉菜单hover,css用hover制作下拉菜单
weixin_33514582的博客
06-04 1657
首先我们的需求就是 制作一个鼠标移动到某个区域就会有下拉菜单的弹出,这样会有更多的子类内容,示例代码如下:Title*{margin: 0;}.title{background-color: #2b99ff;height: 50px;line-height: 50px;text-align: center;color: #3d2fa2;}.user{width: 180px;height: 50p...
响应式多级菜单 侧边菜单栏_大菜单，小屏幕：响应式，多级导航
Web design 教程小屋
07-09 2211
如果您曾经在响应式网站上工作，那么毫无疑问，您必须解决这个新兴领域中最棘手的问题之一：导航。 对于简单的导航，解决方案可以很简单。 但是，如果您要处理的事情有些复杂，可能有多个嵌套列表和下拉列表，则可能需要进行更戏剧性的重排。 在这种响应式导航方法中，我们将使用一种可以使用媒体查询和jQuery容纳大型多层导航菜单的方法，同时尝试使我们的标记简单而外部资源最少。 寻找快速解决方案？ 如...
19款绚丽实用的jQuery/CSS3侧边栏菜单
weixin_33795806的博客
10-12 1884
jQuery作为一款主流的JavaScript前端开发框架，深受广告开发者的亲睐，同时jQuery有着不计其数的插件，特别是菜单插件更为丰富，本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单，这些侧边栏菜单可以用在不同风格的网页上，如果你觉得不错，也可以进入其下载页面下载菜单源代码。 1、jQuery 3D 垂直多级菜单 可筛选菜单项 这是一款手风琴样式的垂直多级菜单，其特点是利用C...
水平和垂直方向的三级PopMenu-弹出菜单（DIV+CSS+JS）
weixin_30709635的博客
12-25 156
水平和垂直方向的三级PopMenu-弹出菜单（DIV+CSS+JS） 其实这种菜单个人认为应该称作二级，但很多朋友都习惯把它叫作三级，就顺其自然吧！在IE6.0 IE5.X Firefox1.x NS7.2 Opera8.0中都能正确显示，只用到很少的JS代码，使用时只要把<ul></ul>部分插入需要的地方即可。水平方...
html&css实验8.(3)CSS.hover实现两级菜单
I feel lost
04-17 1585
3、采用hover实现两级菜单：   （1）一级菜单的li采用inline-block和relative，使它们并列排放，并且可以用于二级菜单的绝对定位。   （2）二级菜单的ul默认不显示，只有hover到一级菜单的li时显示。   （3）字体颜色的变化采用过渡方式。 实现效果： 完整实现代码： menu body {
【移动端】仿hover效果触发导航菜单展开
Maximus_ckp的博客
09-18 4006
PC端，很多交互是由鼠标滑过触发伪类‘:hover’来实现的， 而移动端是没有鼠标hover事件的， 我们可以将原来响应:hover的DOM元素， 绑定监听touchstart和touchend， 动态添加/除去 ‘.hover’这个类来达到等价于PC端交互的效果。逻辑核心: **onTouchStart 相当于 onMouseOver， onTouchEnd 相当于 onMouseOu
信息安全_数据安全_eu-16-Hovor-Automating-Incident-.pdf
08-22
信息安全_数据安全_eu-16-Hovor-Automating-Incident- 云安全 应急响应 数据分析 风控系统 安全行业
CSS3百叶窗式鼠标hover图片动画效果
12-13
综上所述，这个CSS3百叶窗式鼠标hover图片动画效果是通过结合使用CSS3的多个新特性实现的，展示了CSS3在网页交互设计上的强大潜力。了解并掌握这些技术对于提升网页设计的动态效果和用户体验有着重要的作用。
简单的多级hover
qq_40756247的博客
05-28 356
简单的多级hover效果 以下是效果图： 效果十分简单就不解释了，下面是代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> ...
一级菜单hover进入二级菜单，二级菜单不消失
热门推荐
qq_34485818的博客
05-28 1万+
在写分级菜单时遇到问题：      设置一级菜单：hover效果显示二级菜单时，当鼠标从一级菜单移入二级菜单时，一级菜单因失去鼠标而导致二级菜单消失       根据一二级菜单DOM关系提出不同思路：               一级菜单包裹二级菜单                   一级菜单 二级菜单
垂直多级导航菜单展开收缩
06-04
垂直多级导航菜单展开收缩
Qt导航栏Demo之侧边垂直菜单
02-17
Qt自带菜单栏为水平菜单栏，在很多实际应用中，需要用到左侧菜单导航栏，即垂直导航栏，本示例使用QMenu、QDialog、事件过滤、QPushButton、鼠标钩子函数等实现了侧边垂直菜单导航栏。
html展开折叠菜单,纯CSS竖向滑动展开折叠菜单
weixin_42117267的博客
05-31 1425
纯CSS竖向滑动可折叠菜单-www.mb5u.com#dlmenu {height:10em;}#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:15em; background:#fff; z-index:100;}#menu li {display:block; padding:0...
html导航栏制作css伪类,利用:hover伪类制作二级导航菜单
weixin_39641334的博客
06-22 495
该楼层疑似违规已被系统折叠隐藏此楼查看此楼/*重置所有元素的三个样式为零，一般不推荐这样使用，但是我测试一般这么写*/* {margin:0; padding:0; border:0;}a {text-decoration:none; color:#000;}body {font-size:12px; font-family:"微软雅黑";}ul,ol {list-style:none;}ul ...
多级菜单 jquery折叠菜单
hhhhiiii的博客
02-09 1046
原文https://blog.csdn.net/hhhhiiii/article/details/113705854 改进后的jquery折叠菜单前言分析 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 先上代码： <script> $(document).ready(function(){ //折叠菜单事件
jQuery插件——多级垂直导航菜单（适合后台系统）
liaogang_1983的博客
06-27 4822
最近自己做了一个适合后台系统的多级垂直导航菜单，给大家分享一下，可以作为练习实例或参考。HTML文件&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;!--导入jquery--&gt; &amp
java垂直多级导航栏_-垂直（水平）导航栏--转换-过度-动画-多列-瀑布流-事件
weixin_35133182的博客
02-24 220
----垂直导航栏效果ul{list-style-type:none;margin:0px;padding:0px;}a:link,a:visited{text-decoration:none;display:block;----------------------水平导航，删掉block---li{display:inline}background-color:burlywood;color:a...
jquery点击展开收缩垂直菜单代码_菜单导航一级二级分类可收缩和展开
最新发布
ICode联盟
12-26 707
下载地址 鼠标点击一级分类后自动展开二级分类，点击二级分类后实现跳转$(".ny_zblb1 ul li").click(function(){ var thisSpan=$(this); $(".ny_zblb1 ul li ul").prev("a").removeClass("cur"); $("ul", this).prev("a").addClass("cur"); $(this).children("ul").slideDown("fast"); $(this).siblings().chil
html--简单竖向菜单栏的实现
清徐柳的博客
03-23 1万+
(图片地址：https://panjiachen.github.io/vue-element-admin/#/dashboard) 如图示这种竖向排列的菜单栏，展示效果比较好，而且交互比较直观，下面来介绍一下实现步骤 1.先把整体布局写出来 由于子菜单展开收缩会变化div大小，所以使用flex弹性盒子。 <ul class="ulList"> <li class="liList"> <p>这是第一个子菜单</p> <ul style="dis.
竖直菜单 html,jQuery实现的网页竖向菜单效果代码
weixin_29061997的博客
06-16 510
本文实例讲述了jQuery实现的网页竖向菜单效果代码。分享给大家供大家参考。具体如下：这是一款基于jQuery实现竖向的网页菜单代码，可折叠展开的二级网页菜单，修改一下可用在后台管理中，显示在左侧的那种管理菜单。jquery加入后方便实现了菜单展开和合拢的功能，还加入了少许动画效果，兼容性好。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值