Html+Css+jQuery实现导航栏

最新推荐文章于 2024-07-24 16:53:23 发布

gly_technology

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量526

点赞数

文章标签： jquery html css

本文链接：https://blog.csdn.net/gly_technology/article/details/122535724

版权

Html部分

Css部分

Html部分

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>导航栏</title>
       
       <link rel="stylesheet" type="text/css" href="css/dhl.css" />
       
       <script src="js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
       
       <script src="js/dhl.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body>
       
       <nav>
           <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>
               <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>
               <li><a href="#">热搜</a></li>
               <li><a href="#">赚钱</a></li>
               <li><a href="#">视频</a></li>
           </ul>
       </nav>
   </body>
</html>

Css部分

* {
margin: 0;
padding: 0;
}

body {
width: 100%;
height: 100%;
}

nav {
   width: 100%;
   height: 50px;
   background-color: #000;
   /* 父用相对定位 */
   position: relative;
}

nav ul {
   /* 子用绝对定位 */
   position: absolute;
   left: 20%;
   top: 0px;
}

nav ul li {
   text-align: center;
   width: 90px;
   height: 50px;
   /* 去掉li前面的小圆点 */
   list-style: none;
   /* 浮动操作 */
   float: left;
}

nav ul li a {
   /* 去掉a的下划线 */
   text-decoration: none;
   position: relative;
   top: 12px;
   color: #fff;
}

jQuery部分

$(function() {
   // 当鼠标悬浮时样式
   $('nav ul li').mouseover(function() {
       $(this).css('background-color','#ff3838');
       $(this).css('cursor','pointer');
   });
   // 当鼠标离开时的样式
   $('nav ul li').mouseout(function() {
       $(this).css('background-color','');
       $(this).css('cursor','');
   });
})