复制粘贴，，更改 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>