HTML_基础_菜单栏

最新推荐文章于 2024-05-06 21:05:10 发布

Mr_HuangJW

最新推荐文章于 2024-05-06 21:05:10 发布

阅读量1.8k

点赞数

分类专栏： HTML_基础部分菜单栏设计文章标签： HTML css 菜单栏

本文链接：https://blog.csdn.net/mr_huangjw/article/details/53402051

版权

HTML_基础部分同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

菜单栏设计

1 篇文章 0 订阅

订阅专栏

mooc听课笔记

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航菜单</title>
  <!-- 增加JavaScript脚本，使得菜单被选中时有动态拉长效果 -->
  <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; 
          clearInterval(This.time);                 /*B*/
          This.time=setInterval(function(){  
          This.style.width=This.offsetWidth+4+"px"; /*此函数本身就是循环，只写这个的话，会一直变长,只要触发，每30豪秒运行一次，offsetWidth为对象的实际宽度，4为速度*/
          if(This.offsetWidth>=160){
            clearInterval(This.time) ;  /*就是停止了计时器，但只写到此处，鼠标移开，不会复原*/
          }

          },30) /*计时器，每30毫秒运行一次function（）*/
        }

        aA[i].οnmοuseοut=function(){
          var This=this;
          clearInterval(This.time);                   /* A*/
          This.time=setInterval(function(){ 
          This.style.width=This.offsetWidth-4+"px";  /*变为-4*/
          if(This.offsetWidth<=100){
            This.style.Width="100px";      
            clearInterval(This.time) ;
          }
        },30)    /*写到这里可以成功复原，但是有个缺点，若鼠标在到达规定长度前松开，会出错（伸缩），可以把速度设大点,或者在每个onmouseout、onmoutover的function的开头清除动画，如A，B所示*/
      }
    }
  }
  </script>
	<style >
    *{margin:0;padding:0;font-style: 14px;} /* 清除初始布局*/
    li{float:left;margin-top: 20px;margin-left:5px;}   /*   用marginleft使每个菜单间隔5px,对比竖向菜单，使用浮动，并将ul的宽度限制去掉 */
    ul{list-style: none;height:50px;border-bottom:5px solid #f60;padding-left:30px;background:black;}   /* 清除ul前原点,padding-left:菜单集体向右;padding内容与块，margin块间 */
    a{text-decoration:none;display:block;height:30px;line-height:30px;width:100px;background-color:#ccc;margin-bottom: 1px; text-indent:0px;text-align: center;border-radius:10px 10px 0 0; }
     /*1.将a标签变为块标签； 
        2.margin-bottom让每行菜单之间隔1px （垂直菜单需要）;
        3.text-indent为文本缩进，用padding-left也能让每行菜单的文字向右移动相应像素，但是会让li的宽度自动增加，文本缩进则不会
        4.height和line-height设置一样的值可以实现文字垂直居中，line-height与fontsize之差的一半加在字上与字下，line-height为li的高度（字加上下间距）；line-height中文字行数越多，实际文字高度越小，总高度不超过lineheight值，而height可以被撑大，因此在垂直居中后，若增大lineheight值，由于高度改变不了，文字向下（lineheight-fontsize变大了），若增大height值，高度可被撑大，多以灰色区域向下溢出(因为上界被li限制了)
        5.textalign居中，将缩进改为0缩进
        6.border-radius圆角菜单，但实现形式太简单，css3中有更好的实现*/   
    .on,a:hover{background-color: #f60;color:#fff;height:40px;margin-top: -10px;line-height:40px;}  /* 1.鼠标经过时背景色变为橘黄色，字体色为白色 
    2.为了让经过时，菜单变高，且文字保持不变，使用height改变on及a:hover的高度，但是会使高度向下增加，我们想让菜单向上增高，所以用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>

主要实现了菜单的定位，圆角菜单，JavaScript实现菜单动画，CSS实现hover效果。

CSS3中

Mr_HuangJW

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML_基础_菜单栏

mooc听课笔记导航菜单 window.onload=function(){ /*加载完最后才执行此代码*/ var aA=document.getElementsByTagName('a'); for (var i = 0; i <=aA.length; i++) { aA[i].onmouseover=function(){
复制链接

扫一扫

专栏目录