html+css+js实现四种导航条的制做

2022年05月13日 阅读数:3
这篇文章主要向大家介绍html+css+js实现四种导航条的制做,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

今天为你们介绍四种不一样的形式的导航条,在网页制做中想制做比较好看的菜单导航条,那么看看哪一种形式是你的喜好。html

第一种,垂直菜单导航条的制做this

代码:url

<!doctype html>

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>垂直菜单的制做</title>
  <style>
   ul{ list-style:none; width:100px;}
   ul li{ height:30px; line-height:30px; width:100px; background:#999; margin-bottom:1px;  }
   ul li a{ text-decoration:none;padding-left:10px; text-indent:10px;}
   li hover{ background:red; }
  </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>

效果以下:code

第二种,伸缩菜单导航条制做(须要用到js,记得引入.js文件)htm

代码:blog

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>伸缩菜单的制做——水平方向</title>
  <style>
   *{ margin:0; padding:0; font-size:14px;}
   ul{ list-style:none; padding-left:30px; border-bottom:5px solid #F60; height:50px;}
   li{ float:left;  margin-top:20px;  }
   a{display:block; text-decoration:none; text-align:center;height:30px; line-height:30px; width:120px;  margin-bottom:1px; background:#999;  }
   .on,a:hover{ background:#f60;  color:white;  }
  </style>
  <script>
   window.οnlοad=function(){
      var aA=document.getElementsByTagName('a');
      var timer=null;
      
      for(var i=0;i<aA.length;i++){
         aA[i].οnmοuseοver=function (){
            clearInterval(timer);
            var This=this;
            timer=setInterval(function (){
               This.style.width=This.offsetWidth+8+'px';
               if(This.offsetWidth>=160){
                  clearInterval(timer);
               }
            },30);
         }
         aA[i].οnmοuseοut=function (){
            clearInterval(timer);
            var This=this;
            timer=setInterval(function (){
               This.style.width=This.offsetWidth-8+'px';
               if(This.offsetWidth<=120){
                  This.style.width='120px';
                  clearInterval(timer);
               }
            },30);
         }
      }
   }
  </script>
 </head>
 <body>
   <ul class="nav">
      <li><a href="#" class="on">首页</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>

效果以下:ip

第三种,水平导航条的制做get

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>水平菜单的制做</title>
  <style>
   ul{ list-style:none; }
   li{ float:left;   }
   li a{display:block; text-decoration:none; text-align:center;height:30px; line-height:30px; width:100px;  margin-bottom:1px; background:#999;}
    a:hover{ background:red;  color:black;}
  </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>

效果以下:it

第四种、圆角菜单的制做io

代码:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
   *{ margin:0; padding:0; font-size:14px;}
   ul{ list-style:none; padding-left:30px; border-bottom:5px solid #F60; height:50px;}
   li{ float:left;  margin-top:20px; }
   a{display:block; text-decoration:none; text-align:center;height:30px; line-height:30px; width:120px;  margin-bottom:1px; background:#999;  background:url(images/53846438000168f901200060.jpg);}
   .on,a:hover{ background-position:0 -30px;  color:black;}
  </style>
 </head>
 <body>
   <ul>
      <li><a href="#" class="on">首页</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>

效果以下:

注:导航条的颜色根据需求能够进行更改。