jq实现二级导航

最新推荐文章于 2024-08-09 11:49:58 发布

zyfacd

最新推荐文章于 2024-08-09 11:49:58 发布

阅读量764

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/zyfacd/article/details/105416565

版权

本文介绍了如何利用jQuery实现响应式的二级导航菜单。通过动态添加和移除类，实现了菜单项的高亮显示以及子菜单的展开和收起效果，提高了用户体验。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		    html{
   color:#666;background:#FFF;}
		    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,i,fieldset,legend,input,textarea,p,blockquote,th,td{
   margin:0;padding:0;}
		    body{
   font:12px/1.3 arial,helvetica,clean,sans-serif,\5b8b\4f53;}
		    h1,h2,h3,h4,h5,h6{
   font-size:100%;font-weight:normal}
		    table{
   border-collapse:collapse;border-spacing:0;}
		    img{
   border:none;}
		    a{
   text-decoration:none; color:#666;}
		    ul,li{
   list-style-type:none;}
		    .nav-con{
   width: 1210px;margin: 0 auto;height: 44px;position: relative;}
		    .nav-con-left{
   float: left; position: relative; width: 210px;height: 44px;z-index: 10;background: #B1191A;overflow: visible;}
		    .nav-con-lefttext a{
   display: block;width: 190px;height: 44px;padding: 0 10px;color: white;font: 400 15px/44px "microsoft yahei";}
		    .nav-variety{
   height: 94px;background: #c81623;}
		    .thing-variety li{
   border-left: 1px solid #b61d1d;position: relative;z-index: 10;height: 31px;color: white;}
		    .thing-variety .thname{
   height: 31px;}
		    .thing-variety .thname h4{
   position: absolute;z-index: 11;height: 31px;line-height: 30px;font-size: 14px;font-weight: 400;padding: 0 10px;}
		    .thing-variety .thname h4 a{
   color: white;}
		    .thing-variety .thname span{
   position: absolute;right: 14px;top: 9px;width: 4px;height: 14px;  font: 400 9px/14px consolas;z-index: 1;}
		    .thing-variety .showLi{
   background: #F7F7F7;}
		    #things .showA{
   color: #b61d1d;}
		    #things .showSpan{
   display: none;}
		    /*****************商品分类*****************/
		    .dropdown{
   width: 999px;position: absolute;left: 209px;top: 43px;background: #F7F7F7;border: 1px solid #b61d1d;overflow: hidden;}
		    .item-brands{
   float: right;display: inline;width: 168px;margin: 19px 20px 10px 0;}
		    .item-brands a{
   float: left;display: inline;margin: 1px 0 0 1px;}
		    .item-brands img,.item-promotions img{
   border: 0;vertical-align: top;}
		    .item-promotions{
   float: right;display: inline;width: 168px;margin-right: 20px;}
		    .item-promotions a{
   display: block;margin-bottom: 1px;}
		    .item-channels{
   width: 790px;float: left;display: inline;height: 24px;padding: 20px 0 0 20px;background: #F7F7F7;overflow: hidden;}
		    .item-channels .channels a{
   float: left;display: inline-block;padding: 0 0 0 8px;margin-right: 10px;line-height: 24px;
		        background: #7c7171;color: white;font-size: 12px;}
		    .item-channels .channels a span{
   display: inline-block;margin-left: 8px;width: 23px;height: 24px;font: 400 9px/24px consolas;background: #5c5252;text-align: center; }
		    .item-channels .channels a:hover{
   background:  #c81623;}
		    .item-channels .channels a:hover span{
   background:#b61d1d; }
		    .subitems{
   width: 790px;float: left;padding: 6px 0 1006px 20px;margin-bottom: -1000px;background: #F7F7F7;min-height: 409px;}
		    .subitems dl{
   width: 100%;line-height: 2em;overflow: hidden;font-size: 12px;}
		    .subitems dl dt{
   position: relative;float: left;width: 54px;padding: 8px 30px 0 0;text-align: right;font-weight: 700;font-size: 12px;}
		    .subitems dl dt span{
   position: absolute;top: 13px;right: 18px;width: 4px;height: 14px;font: 400 9px/14px consolas;}
		    .subitems dl dd{
   border-top: 1px solid #eee;width: 620px;padding: 6px 0;overflow: hidden;}
		    .subitems dl dd a{
   float: left; padding: 0 8px;margin: 4px 0;line-height: 16px;height: 16px;border-left: 1px solid #e0e0e0;}
		    .subitems .sub1 dd{
   border-top: none;}
		    .subitems dl dt a:hover{
   color: #b61d1d;}
		    .subitems dl dd a:hover{
    color: #b61d1d;}
		    .hiden{
   display: none;}
		</style>
	<!-- <link rel="stylesheet" href="css/base.css"> -->
	<!-- 引入公共样式的css 文件 -->
	<!-- <link rel="stylesheet" href="css/common.css"> -->
	<!-- 引入 首页的css文件 -->
	<!-- <link rel="stylesheet" href="css/index.css"> -->
	</head>
	<body>
		<div class="nav">
		    <div class="nav-con">
		        <div class="nav-con-left">
		            <div class="nav-con-lefttext">
		                <a href="#">全部商品分类</a>
		            </div>
		            <div class="nav-variety" id="things">
		                <ul class="thing-variety" id="variety">
		                    <li class="tab-item">
		                        <div class="thname">
		                            <h4><a href="#">图书、音像、电子书</a></h4>
		                            <span>&gt;</span>
		                        </div>
		                    </li>
		                    <li class="tab-item">
		                        <div class="thname">
		                            <h4><a href="#">彩票、旅行、充值、票务</a></h4>
		                            <span>&gt;</span>
		                        </div>
		                    </li>
		                    <li class="tab-item">
		                        <div class="thname">
		                            <h4><a href="#">理财、众筹、白条、保险