jQuery导航栏特效

最新推荐文章于 2021-03-11 13:47:27 发布

SHUKEd

最新推荐文章于 2021-03-11 13:47:27 发布

阅读量512

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/SHUKEd/article/details/106772710

版权

实现导航栏效果,当用户单击不同的商品名称链接，显示相应的内容，同时高亮显示当前选择的商品。

效果如下：

特效代码:

内容代码：

<div class="box">
   <ul class="menu">
       <li class="level1">
           <a href="#none">衬衫</a>
           <ul class="level2">
               <li><a href="#none">短袖衬衫</a></li>
               <li><a href="#none">长袖衬衫</a></li>
               <li><a href="#none">短袖T恤</a></li>
               <li><a href="#none">长袖T恤</a></li>
           </ul>
       </li>
       <li class="level1">
           <a href="#none">卫衣</a>
           <ul class="level2">
               <li><a href="#none">开襟卫衣</a></li>
               <li><a href="#none">套头卫衣</a></li>
               <li><a href="#none">运动卫衣</a></li>
               <li><a href="#none">童装卫衣</a></li>
           </ul>
       </li>
       <li class="level1">
           <a href="#none">裤子</a>
           <ul class="level2">
               <li><a href="#none">短裤</a></li>
               <li><a href="#none">休闲裤</a></li>
               <li><a href="#none">牛仔裤</a></li>
               <li><a href="#none">免烫卡其裤</a></li>
           </ul>
       </li>
   </ul>
</div>