pc网站 简易头部导航

复制粘贴，，更改 jq 引用路径

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <meta http-equiv="x-ua-compatible" content="ie=edge" />
  6         <meta name="keywords" content="html" />
  7         <meta name="description" content="01" />
  8         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
  9         <link rel="shortcut icon" type="image/x-icon" href="" />
 10         <script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
 11         <title>header</title>
 12         <style type="text/css">
 13             *{
 14                 margin: 0;
 15                 padding: 0;
 16                 text-decoration: none;
 17                 list-style: none;
 18                 color: #000;
 19             }
 20             .herder_posi{
 21                 width: 100%;
 22                 background-color: rgba(0,0,0,0);
 23             }
 24             .herder_fixed{
 25                 position: fixed;
 26                 top: 0;
 27                 background-color: rgba(0,0,0,.6);
 28             }
 29             .herder{
 30                 width: 1200px;
 31                 height: 80px;
 32                 margin: 0 auto;
 33                 display: flex;
 34                 justify-content: space-between;
 35                 align-items: center;
 36             }
 37             /* 左侧logo */
 38             .header_left{
 39                 width: 300px;
 40                 height: 100%;
 41             }
 42             .header_left>a{
 43                 width: 100%;
 44                 height: 100%;
 45                 display: flex;
 46                 justify-content: flex-start;
 47                 align-items: center;
 48                 color: #fff;
 49             }
 50             .header_left .header_logo{
 51                 width: 78px;
 52                 height: 32px;
 53             }
 54             /* 右侧导航 */
 55             .header_right{
 56                 width: 800px;
 57                 height: 100%;
 58             }
 59             .navigation{
 60                 width: 100%;
 61                 height: 100%;
 62                 display: flex;
 63                 align-items: center;
 64                 justify-content: flex-end;
 65             }
 66             .navigation>li{
 67                 min-width: 100px;
 68                 height: 100%;
 69                 box-sizing: border-box;
 70                 padding: 0 14px;
 71                 margin: 0 6px;
 72                 position: relative;
 73                 
 74             }
 75             .navigation>li>a{
 76                 width: 100%;
 77                 height: 100%;
 78                 display: flex;
 79                 justify-content: center;
 80                 align-items: center;
 81             }
 82             .header_li li::after{
 83                     display: block;
 84                     content: '';
 85                     height: 2px;
 86                     background-color: #fff;
 87                     position: absolute;
 88                     left: 50%;
 89                     width: 0%;
 90                     bottom: 0;
 91                     transition: all .3s;
 92             }
 93             .header_li li.active::after{
 94                 left: 0%;
 95                 width: 100%;
 96             }
 97             
 98             .nav_item{
 99                 display: none;
100                 position: absolute;
101                 left: 0;
102                 top: 80px;
103                 width: 100px;
104                 background-color: #fff;
105                 border-radius: 5px;
106                 transition: all .3s;
107                 box-shadow: 0 0 3px rgba(0,0,0,.1);
108             }
109             .nav_item:after{
110             display: block;
111             content: '';
112             border: 10px solid transparent;
113             border-bottom-color: #fff;
114             position: absolute;
115             top: -10px;
116             left: 40%;
117             transform: translate(0, -50%)
118             }
119             .nav_item ul{
120                 width: 100%;
121                 height: 100%;
122                 padding: 15px 0;
123                 overflow: hidden;
124             
125             }
126             .nav_item ul li{
127                 line-height: 40px;
128                 width: 100%;
129                 margin: 0;
130                 padding: 0;
131                 text-align: center;
132                 position: relative;
133                 box-sizing: border-box;
134             }
135             
136             
137             .nav_item li:hover{
138                 background-color: #f2f2f2;
139             }
140             
141             .nav_item li a{
142                 display: block;
143                 width: 100%;
144                 height: 100%;
145             }
146             .nav_item li:hover a{
147                 color: #333;
148             }
149         </style>
150     </head>
151     <body>
152         <div class="herder_posi">
153             <div class="herder fontsize14">
154                 <!-- 左侧logo -->
155                 <div class="header_left">
156                     <a href="#" >
157                         <img src="" class="header_logo">
158                         <!-- zhitui -->
159                     </a>
160                 </div>
161                 <!-- 右侧导航 -->
162                 <div class="header_right">
163                     <ul class="navigation header_li">
164                         <li class=" ">
165                             <a href="#">首页</a>
166                         </li>
167                         <li>
168                             <a href="#">产品</a>
169                             <div class="nav_item">
170                                 
171                             </div>
172                         </li>
173                         <li>
174                             <a href="#">新闻</a>
175                         </li>
176                         <li>
177                             <a href="#">品牌</a>
178                         </li>
179                         <li>
180                             <a href="#">关于</a>
181                             <div class="nav_item ">
182                                 <ul class="header_li">
183                                     <li><a class="colorone" href="#">我们</a></li>
184                                     <li><a class="colorone" href="#">还有</a></li>
185                                 </ul>
186                             </div>
187                         </li>
188                     </ul>
189                 </div>
190             </div>
191             
192         </div>
193         <div id="" style="height: 1000px;">
194             
195         </div>
196         <script type="text/javascript">
197             $(document).scroll(function(){
198                 if($(document).scrollTop() > 0 ){
199                     $(".herder_posi").addClass("herder_fixed")
200                 }else{
201                     $(".herder_posi").removeClass("herder_fixed")
202                 }
203             })
204             
205             $(".navigation li").mouseover(function(){
206                 if( $(this).find(".nav_item").length == 0 ){
207                     $(this).addClass("active").siblings().removeClass("active")
208                 }else{
209                     // $(this).removeClass("active")
210                     $(this).find(".nav_item").css({"display":"block"})
211                     $(this).siblings().find(".nav_item").css({"display":"none"})
212                 }
213             })
214             $(".navigation li").mouseout(function(){
215                 $(this).removeClass("active")
216                 $(this).find(".nav_item").css({"display":"none"})
217             })
218             
219         </script>
220     </body>
221 </html>

 

posted @ 2020-12-01 15:19  伊人兮明眸秋水  阅读(1163)  评论(0)  编辑  收藏  举报