html5--导航栏制作

「爱情、让人受尽委屈。」 2022-09-24 05:17 200阅读 0赞

效果展示：

![Center][]

效果介绍：

通过鼠标点击，点到哪个导航栏会显示不同的颜色与其内容

如何实现：（前提必须引进自己的jquery.js我这里的是jq.js）

导航栏效果二：

![Center 1][]

代码实现：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>导航栏制作</title>
      <link rel="stylesheet" href="css/lanren.css">
    </head>
    <style>
      *{margin:0;padding:0;border:0;list-style: none;}
      .menu{height:48px;display:block;padding:0px;width:1350px;margin: 0 auto;background-color: pink;}
      .menu ul{list-style:none;padding:0;margin:0;}
      .menu ul li{float:left;overflow:hidden;position:relative;line-height:48px;text-align:center;}
      .menu ul li a{position:relative;display:block;color:green;width:111px;height:48px;font-family:"楷体", "宋体";font-size:14px;text-decoration:none;cursor:pointer;font-weight:bold;line-height:48px;}
      .menu ul li a span{position:absolute;left:0;width:111px;}
      .menu ul li a span.out{top:0px;}
      .menu ul li a span.over,  .menu ul li a span.bg{top:-48px;}
      .menu ul li a span.over{color:#FFF;height:48px;width:111px;background-color: red;}
    </style>
    <body>
      
      <div class="menu">
        <ul>
          <li><a href="http://blog.csdn.net/haoyunyun888">郝云云博客</a></li>
          <li><a href="http://blog.csdn.net/haoyunyun888/article/details/52046424">javascript操作</a></li>
          <li><a href="http://blog.csdn.net/haoyunyun888/article/details/52027042">文字高亮显示</a></li>
          <li><a href="http://blog.csdn.net/haoyunyun888/article/details/52026284">jquery擦除效果</a></li>
          <li><a href="http://blog.csdn.net/haoyunyun888/article/details/52026284">http协议</a></li>
          <li><a href="http://blog.csdn.net/haoyunyun888/article/details/52026284">MVC设计思想</a></li>
          <li><a href="http://blog.csdn.net/haoyunyun888/article/details/52026284">YII框架</a></li>
          <li><a href="http://blog.csdn.net/haoyunyun888/article/details/52026284">CI框架</a></li>
          <li><a href="http://blog.csdn.net/haoyunyun888/article/details/52026284">LARAVEL框架</a></li>
          <li><a href="http://blog.csdn.net/haoyunyun888/article/details/52026284">SESSION与COOKIE</a></li>
          <li><a href="http://blog.csdn.net/haoyunyun888/article/details/52026284">MD5加密算法</a></li>
          <li><a href="http://blog.csdn.net/haoyunyun888/article/details/52026284">程序员的生活</a></li>
        </ul>
      </div>
      <script src="http://120.26.245.186/jquery.js"></script>
      <script>
      $(function(){
        $(".menu li a").wrapInner( '<span class="out"></span>');
        $(".menu li a").each(function() {
          $('<span class="over">' +  $(this).text() + '</span>').appendTo(this);
        });
        $(".menu li a").hover(function() {
          $(".out",this).stop().animate({'top':'48px'},300);
          $(".over",this).stop().animate({'top':'0px'},300);
        },function() {
          $(".out",this).stop().animate({'top':'0px'},300);
          $(".over",this).stop().animate({'top':'-48px'},300);
        });
      })
      </script>
      
    </body>
    </html>

[Center]: /images/20220719/7ae85f76026a40b895041ae552aa6578.png
[Center 1]: /images/20220719/f514201e92824a7f9d5a23e4bd5a48ff.png