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

最新推荐文章于 2025-12-20 20:37:31 发布

原创最新推荐文章于 2025-12-20 20:37:31 发布 · 置顶 · 5.1k 阅读

69 ·

CC 4.0 BY-SA版权

文章标签：

#css #js #html #css3 #jquery

本文分享了如何使用HTML、CSS和JavaScript实现四种不同风格的导航条：垂直菜单、伸缩菜单、水平导航条和圆角菜单。通过示例代码和展示效果，帮助网页制作者选择适合自己的导航条样式。

今天为大家介绍四种不同的形式的导航条，在网页制作中想制作比较好看的菜单导航条，那么看看哪种形式是你的喜爱。

第一种，垂直菜单导航条的制作

代码：

<!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>

效果如下：

第二种，伸缩菜单导航条制作（需要用到js，记得引入.js文件）

代码：

<!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>

效果如下：

第三种，水平导航条的制作

<!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>

效果如下：

第四种、圆角菜单的制作

代码：

<!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>

效果如下：