【HTML/CSS】导航菜单的制作

最新推荐文章于 2024-05-29 12:36:50 发布
最新推荐文章于 2024-05-29 12:36:50 发布
阅读量575 收藏 2
点赞数 2
分类专栏： HTML小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/idealistic/article/details/78048154
版权

1.垂直菜单

<!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=utf-8" />
<title>垂直菜单</title>
<style>
*{margin:0;padding:0;font-size:14px;}
ul{list-style:none;width:100px;}清除圆点
a{text-decoration:none;height:30px;line-height:30px;background:#999;margin-bottom:2px;text-indent:20px;display:block;}
<!--li{height:30px;line-height:30px;background:#999;margin-bottom:2px;text-indent:20px;}-->//a转为块状，清除下划线，文字缩进
a:hover{background-color:#0FF;color:#F0F;}
</style>
</head>
<body>
<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>
</body>
</html>

2.水平菜单

<!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=utf-8" />
<title>垂直菜单</title>
<style>
*{margin:0;padding:0;font-size:14px;}
ul{list-style:none;}
a{text-decoration:none;height:30px;line-height:30px;background:#999;margin-bottom:2px;display:block;text-align:center;}
a:hover{background-color:#0FF;color:#F0F;}
li{float:left;width:100px;margin-right:2px;}
</style>
</head>
<body>
<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>
</body>
</html>

3.圆角菜单 

<!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=utf-8" />
<title>圆角菜单</title>
<style>
*{margin:0;padding:0;font-size:14px;}
ul{padding-left:30px;list-style:none;border-bottom:10px solid #F30;height:50px;}
a{text-decoration:none;height:30px;line-height:30px;background:url(../../../Pictures/Camera%20Roll/QQ%E5%9B%BE%E7%89%8720170220182239.jpg);margin-bottom:2px;display:block;text-align:center;border-radius:10px 10px 0 0;}
a:hover{color:#F0F;background-position:0 30px;}
li{float:left;width:120px;margin-right:2px;margin-top:20px;}
</style>
</head>
<body>
<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>
</body>
</html>

3.伸缩菜单

垂直方向延伸：height:40px;使高度延伸   margin-top:-10px;使向上延伸       line-height:40px;使文字垂直居中

水平方向延伸：（JavaScript）点击打开链接

<!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=utf-8" />
<title>圆角菜单</title>
<style>
*{margin:0;padding:0;font-size:14px;}
ul{padding-left:30px;list-style:none;border-bottom:10px solid #F30;height:50px;}
a{text-decoration:none;height:30px;line-height:30px;background:#999;;margin-bottom:2px;display:block;text-align:center;border-radius:10px 10px 0 0;width:120px;}
a:hover{color:#F96;;background:#0FF;}
li{float:left;margin-right:2px;margin-top:20px;}
</style>
<script>
window.οnlοad=function(){
	var A=document.getElementsByTagName('a');
	for(var i=0;i<A.length;i++){
		A[i].οnmοuseοver=function(){
			clearInterval(this.time);
			<!--清除动画，避免重叠-->
			var This=this;
			This.time=setInterval(function(){
				This.style.width=This.offsetWidth+8+"px";
				if(This.offsetWidth>=160){
					clearInterval(This.time)}
				},30)<!--定时器-->
			}
			<!--鼠标离开时还原-->
			A[i].οnmοuseοut=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>
  <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>


水平延伸（jQuery）

 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script>	
$(function(){
	$('a').hover(
	function(){
		$(this).stop().animate({"width":"160px"},300)},
	function(){
		$(this).stop().animate({"width":"120px"},300)
		}
	)
	})
</script>

动画菜单：

<!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=utf-8" />
<title>动画菜单</title>
<style type="text/css">
* { margin: 0; padding: 0; font-size: 14px; }
a { color: #333; text-decoration: none }
ul{ list-style: none; }
.nav {height: 30px; border-bottom: 5px solid #F60; margin-left:50px; width:600px;}
.nav li { float: left; position:relative; height:30px; width:120px }
.nav li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; }
.subNav{ position:absolute; top:30px; left:0; width:120px; height:0; overflow:hidden}
.subNav li a{ background:#ddd }
.subNav li a:hover{ background:#efefef}
</style>
<script>
window.οnlοad=function(){
    var aLi=document.getElementsByTagName('li');
	for(var i=0; i<aLi.length; i++){
		aLi[i].οnmοuseοver=function(){
            //鼠标经过一级菜单，二级菜单动画下拉显示出来
	 var sub=this.getElementsByTagName('ul')[0];
	 if(sub) {
	    var This=sub;
	    clearInterval(This.time);
	 This.time=setInterval(function(){
	     This.style.height=This.offsetHeight+16+"px";
	     if(This.offsetHeight>=120)
	     clearInterval(This.time);
	 },30) 
	 }
    
		}
        //鼠标离开菜单，二级菜单动画收缩起来。		
		aLi[i].οnmοuseοut=function(){
		var sub=this.getElementsByTagName('ul')[0];
	 if(sub) {
	    var This=sub;
	    clearInterval(This.time);
	 This.time=setInterval(function(){
	     This.style.height=This.offsetHeight-16+"px";
	     if(This.offsetHeight<=0)
	    
	     clearInterval(This.time);
	 },30) 	
            
		}
		
		}
	}
}
</script>
</head>
<body>
<ul class="nav">
    <li><a href="#">一级菜单</a>
    	<ul class="subNav">
        	<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 class="subNav">
        	<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></li>
    <li><a href="#">一级菜单</a></li>
    <li><a href="#">一级菜单</a></li>
</ul>
</body>
</html>





idealistic
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html导航栏下拉，实现代码
as953的博客
09-14 9693
代码如下（示例）： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{padding: 0px;margin: 0px;box-sizing: border-box;} ul,ol{list-style-type: none;} a{text-decora
jquery+css右侧浮动html菜单导航
06-05
本项目聚焦于实现一个“jquery+css右侧浮动html菜单导航”，这种类型的导航菜单常见于许多电商网站，如购物车功能，能跟随用户的滚动保持在屏幕的右侧行动，提供持续的访问选项。 首先，我们需要理解HTML基础。HTML...
HTML5导航栏菜单的设计与实现
YQEMMMM的博客
08-09 1万+
导航栏菜单的设计与实现 导航栏菜单的设计与实现 头条 娱乐 热点 体育 财经 科技 ...
html实现好看的多种风格导航菜单(附源码)
xcLeigh
06-29 4万+
html实现好看的多种风格导航菜单(附源码)，导航菜单，源码下载，分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格，总共23种风格，各种风格都有，代码上手简单，代码独立，可以直接使用，效果酷炫，总有一款你喜欢的。也可直接预览效果。
前端Vue自定义个性化导航栏菜单组件的设计与实现
最新发布
chenchuang0128的博客
05-29 807
随着前端技术的飞速发展和业务场景的日益复杂，组件化开发已成为提升开发效率和降低维护成本的关键手段。本文将以Vue uni-app平台为例，介绍如何通过自定义导航栏菜单组件，实现业务逻辑与界面展示的解耦，以及如何通过组件化开发提升系统的可维护性和可扩展性。
HTML+CSS设计一个简单的水平一级导航栏
m0_58291075的博客
12-19 9335
(3)为了能够改变里的高度和宽度，我们首先让display：inline-block；这里是重点，因为属于inline类型不能够改变高度和宽度，只有转换类型为inline-block才能够改变。(2)#nav里设置导航栏的宽度以及外边框属性（此处font-size=0是为了防止每个超链接选项出现间隙，你可以删除此项对比效果）前面我学习了一段时间的HTML和CSS知识，下面我们来运用知识实现一个简单的水平一级导航栏。这里是在中使用三个标签，为了方便我没有使用或者.
CSS之——设置列表样式和创建导航菜单
weixin_39941298的博客
07-24 3001
一、设置列表的符号  list-style-type: 属性；//设置列表样式 list-style-type: none; //清楚样式 属性有很多可以自己去试：circle，disc,decimal。。。。     二、设置列表图片符号 为ul,ol设置图片符号 ul,ol{     list-style-image: url("li.png") } 代码： &l...
纯CSS制作二级导航下拉列表
04-30
在网页设计中，二级导航菜单是一种常见的...然而，对于一个简单的导航菜单，纯CSS解决方案已经足够高效。在实际项目中，可以将这些CSS代码整合到你的样式表中，或者通过行内样式或`<style>`标签直接应用到HTML文件中。
纯html+css制作三级下拉菜单
09-24
总之，纯HTML+CSS制作的三级下拉菜单是一个实用的网页设计技巧，通过HTML的结构化标签和CSS的样式控制，可以创建出用户友好的导航界面。理解这个过程不仅有助于提升网页设计技能，还能为构建更复杂的交互功能打下...
纯HTML+CSS3制作导航菜单(附源码)
09-25
纯HTML+CSS3制作的导航菜单支持浏览器IE9/GoogleChrome/FireFox/Safari 等等，感兴趣的朋友可以下载试用，希望对你学习css3有所帮助
纯CSS3制作红色下拉导航菜单代码
06-24
通过这个教程，你应该掌握了如何使用纯CSS3制作红色下拉导航菜单的基本步骤和关键知识点，包括transition属性的应用。现在，你可以尝试下载提供的"jiaoben5844"文件，查看示例代码，并根据自己的需要进行修改和扩展...
用CSS3设计响应式导航菜单
蒋宇捷的专栏
02-07 9463
春节将至，先祝大家新年快乐。我在这段时间内将会抽出时间由浅入深的发表几篇CSS3、HTML5最新的技术文章，涉及原理、实现、应用的几个层面，代表了国外HTML5最新发展的趋势，希望能给大家带来新的启迪。         下面的这篇文章非常简单，是响应式设计的一个具体实现。我希望能带给刚入门的朋友一些思路和帮助。         ……………………………………✄……………………………………
HTML5导航菜单栏的设计与实现
ldd19991115的博客
03-10 3303
HTML5导航菜单栏的设计与实现 底板颜色可以自己换，这里推荐一个好看颜色的网页给大家：http://www.fynas.com/system-drawing-color <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜单栏的设计与实现&lt...
HTML＋CSS导航栏及下拉菜单的实现
zhxzrd的博客
04-18 2万+
导航栏是位于页面顶部或者侧边区域的，在页眉横幅图片上边或下边的一排水平导航按钮，起着链接站点或者软件内的各个页面的作用。 关于位于页面顶部的导航栏究竟是如何实现的，希望下面的代码可以对朋友们有帮助。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>书香之家</title> <style type="text/c
HTML导航栏的四种制作方法
热门推荐
lovey030821的博客
10-17 15万+
1.首先，大家可以直接使用html5中的导航栏标签&lt;nav&gt;&lt;/nav&gt; 具体代码如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;导航栏&lt;/title&gt; &lt;/
基本的导航条的制作
weixin_30539625的博客
03-11 948
1、垂直导航条的制作一想到导航菜单就会想到用 ul li无序列表来制作。因为他的语义非常接近条目性的内容。<ul class="nav"> <li><a href="#">首　　页</a></li> <li><a href="#">关于我们</a>&l...
导航条菜单的制作
哆来咪er的博客
10-31 464
导航菜单是网站制作中不可缺少的部分，有水平方向的、垂直方向或用CSS样式的圆角导航条。 这里主要归纳一下导航条制作中的常用属性(通常用无序列表构建菜单)： .{margin:0; padding:0;} 全局基本样式清除 display:block 转换为块级标签 display:inline 转换为内联标签 display:inline-block 转换为内联块级标签
html5+css制作下拉菜单
04-28
好的，下面是一个简单的示例： HTML 代码： ```html <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li class="dropdown"> <a href="#">产品</a> <ul class="dropdown-menu"> <li><a href="#">产品1</a></li> <li><a href="#">产品2</a></li> <li><a href="#">产品3</a></li> </ul> </li> <li><a href="#">关于我们</a></li> </ul> </nav> ``` CSS 代码： ```css nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; position: relative; } nav li a { display: block; padding: 10px; text-decoration: none; color: #333; } .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 1; background-color: #fff; border: 1px solid #ccc; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { display: block; } .dropdown-menu li a { display: block; padding: 10px; text-decoration: none; color: #333; } .dropdown-menu li:hover { background-color: #f5f5f5; } ``` 解释： - `nav ul` 和 `nav li` 用来设置导航条的样式。 - `nav li a` 用来设置导航链接的样式。 - `dropdown` 类用来标记下拉菜单的父元素。 - `dropdown-menu` 类用来设置下拉菜单的样式，设置为绝对定位，隐藏起来。 - `dropdown:hover .dropdown-menu` 用来设置鼠标悬停在下拉菜单的父元素时，显示下拉菜单。 - `dropdown-menu li` 和 `dropdown-menu li a` 用来设置下拉菜单中的链接的样式。 - `dropdown-menu li:hover` 用来设置鼠标悬停在下拉菜单中的链接时的样式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值