导航条菜单的制作

最新推荐文章于 2020-05-14 19:40:10 发布
最新推荐文章于 2020-05-14 19:40:10 发布
阅读量331 收藏 2
点赞数 1
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36026822/article/details/80142755
版权

  1. 混合布局
  2. 垂直菜单
  3. 水平菜单
  4. 伸缩菜单的制作——改变高度
  5. 伸缩菜单的制作——水平方向
  6. 导航条菜单的制作


混合布局

任务1：完成顶部（top）、底部（foot）宽度自适应

任务2：中间分为2两栏，其中，左侧（left）宽度为200px， 右侧（right）宽度自适应

任务3：要求右侧（right）先加载，左侧（left）后加载

任务4：编写的代码要兼容ie6

<!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">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{height:100px;background:gray;margin:0 auto;}
.main{height:600px;background:red;}
.left{ height:600px;width:200px;background:blue;float:left;}
.right{height:600px; background:green; float:right;}
.foot{height:50px;background:orange;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
    <div class="right">right</div>
    <div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>


垂直菜单

任务1：请补充完整代码，把a标签定义成行内块

任务2：请补充完整代码，文字缩进20px

<!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;}
ul{ list-style:none; width:100px}
a{color:#333;text-decoration:none}
.nav li a{ 
    display:inline-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 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;}
ul{ list-style:none;}
a{color:#333;text-decoration:none}
.nav li{float:left;}
.nav li a{ display:block; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;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>


伸缩菜单的制作——改变高度

<!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; height:50px; border-bottom:5px solid #F60; padding-left:30px;}
ul li{float:left; margin-top:20px;}
a{display:block;height:30px;text-align:center; line-height:30px; width:120px; background-color:#ccc;}
a.on, a:hover{ color:#fff;background-color:#F60;height:40px;line-height:40px;  margin-top:-10px;
</style>
</head>
<body>
<ul>
    <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>


伸缩菜单的制作——水平方向

<!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; height: 30px; border-bottom: 5px solid #F60; margin-top: 20px; padding-left: 50px; }
ul li { float: left }
ul li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px;transition: width 1s; }
a.on, a:hover { background: #F60; color: #fff;width:160px; }

</style>
<!--<script>
window.οnlοad=function(){
    var aA=document.getElementsByTagName('a');
	for(var i=0; i<aA.length; i++){
		aA[i].οnmοuseοver=function(){
			var This=this;
			【任务1】(This.time);
			This.time=【任务2】(function(){
					This.style.width=This.offsetWidth+8+"px";
					if(This.【任务3】>=160)
					clearInterval(This.time);
				},30)
		}
		aA[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 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>


导航条菜单的制作

<!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 oSubNav=this.getElementsByTagName('ul')[0];
            if(oSubNav){
            var This=oSubNav;
            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 oSubNav=this.getElementsByTagName('ul')[0];
            if(oSubNav){
            var This=oSubNav;
            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>

小学林
关注
专栏目录
导航菜单的制作
点点带你
05-30 590
学完html\css一些基础知识后，制作导航菜单总结          首先要说的是，在网页布局中html是结构，css是表现，JavaScript是行为。 用无序列表构建菜单                             ul li a{display:block;}   定义的关键是将标签设置成块元素，这样就可以设置导航栏的宽度，高度。 .通过设置float属性
基本的导航条的制作
weixin_30539625的博客
03-11 974
1、垂直导航条的制作一想到导航菜单就会想到用 ul li无序列表来制作。因为他的语义非常接近条目性的内容。<ul class="nav"> <li><a href="#">首　　页</a></li> <li><a href="#">关于我们</a>&l...
【HTML/CSS】导航菜单的制作
~★sunshine☆的博客专栏
09-21 602
文字缩进 清除下划线 水平延伸 垂直延伸
导航条制作
xiaoyifeishuang1的博客
07-29 538
1.进行UI设置，xmle布局 2.从ID找到相关LinearLayout，然后进行导航条数据输入(需要一个数据源)。在这里设置监听，以方便后面获取相对应的fragment 3.通过导航条具体的某个数值，进入一个继承listFragment的类。获取这个导航(item)相对应的fragment。再将这个fragment装入一个集合里面list 4.通过一个pageview将这些fragmen
导航条菜单制作
05-25
在前端开发中，导航条菜单是网页设计的重要组成部分，它为用户提供直观的页面跳转路径，帮助用户快速访问网站的...压缩包中的《导航条菜单制作》课程源代码提供了实际操作的例子，对于学习和实践这个主题非常有帮助。
html实现好看的多种风格导航菜单(源码)
06-29
html实现好看的多种风格导航菜单(附源码)，导航菜单，源码下载，分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格，总共23种风格，各种风格都有，代码上手简单，...
js导航菜单插件制作js顶部导航菜单和侧面js导航菜单
11-24
本文将深入探讨如何使用JavaScript（js）制作导航菜单，包括顶部导航菜单和侧面导航菜单。这两种菜单在现代网页设计中非常常见，它们为用户提供了一种直观、易用的交互方式。 1. **JavaScript基础** 在开始制作...
网站下拉菜单制作企业网站导航菜单代码.rar
最新发布
06-23
网站下拉菜单制作企业网站导航菜单代码.rar 网站下拉菜单制作企业网站导航菜单代码.rar 网站下拉菜单制作企业网站导航菜单代码.rar 网站下拉菜单制作企业网站导航菜单代码.rar 网站下拉菜单制作企业网站导航菜单代码...
css利用一张背景图制作导航菜单实现思路及代码
09-25
利用一张背景图片来制作一个具有悬停效果的导航菜单，是一种在网页设计中常见的技术手段。这种方法可以使导航菜单看起来更加吸引人，同时减少页面加载时间，因为只需要加载一张背景图片而不是多个图片。实现这种效果...
简易导航条制作
09-12
简易的导航条制作，如有需要可以查看网页源代码查看设计框架，仅供参考！！
导航条的制作
任性的wo的博客
06-12 377
要点： 1、用无序列表构建菜单；ul/li 2、垂直菜单转变为水平菜单：float:left； 3、在制作圆角菜单时，背景图片贴在标签上； -------> 雪碧图的应用--- background-position 4、在制作改变高度的伸缩菜单时，实现高度向上延伸的技巧： ----> margin-top用负值； 5、用JS制作水平伸缩菜单时，“this”代表当前的标签。 jQuer
HTML导航条的制作
weixin_30823683的博客
07-13 1184
导航条的制作HTML代码：<nav> 　　<ul> 　　　　<li> 　　　　　　<a href="#"></a> 　　　　</li> 　　　　<li> 　　　　　　<a href="#"></a> 　　　　</li> 　　</ul> </na...
导航条的制作详解
小贾爱编程的博客
03-22 591
css文件编码： body{font-size:6px;} #globallink{width:800px;height:33px;background-image: url(../img/navbg.png);} #globallink ul{list-style: none;padding:0px;margin:0px;} #globallink li{float:left;width...
导航条菜单的制作（一）
moluchase的专栏
08-28 827
垂直菜单设计 同样的先写HTML结构 首页 新闻 产品 售后 在其中加入css样式 这里本来是设置的块级元素li的样式，由于块级元素只有一个a，就直接将a设置为块级元素，然后对a写鼠标经过事件 a:HOVER{background-color: red;color: #fff;}当鼠标经过的时候，a的背景颜色变为red，文本颜色变为白色 下面是样式，
导航栏制作
qq_37244548的博客
05-14 376
目标制作： 步骤： 1，制作一个url的li列表，因为每个导航都是一个超链接，所以要加上超链接a，因为字体颜色是白色的，所以看不到 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航栏</title> <style> /* 共有标签去掉内外间距 */ *{ margin: 0; padding: 0
导航栏的制作
qq_43592607的博客
10-24 314
导航栏的制作 红色的是鼠标悬浮样式，可以自己改颜色，也可以自己改字体颜色，大小，导航栏的背景也可以改颜色。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style> u...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值