팬더다이녀석들아
296
2020-12-14 16:44:46
0
117

선배님들 모바일용 토글 네비게이션 메뉴를 만들고 있는데요



<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>모바일 토글 메뉴 - FMW</title>
	<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#b_nav ul.sub").hide();
			$("#b_nav ul.menu li").click(function(){
				$(".sub",this).slideToggle("fast");
			});
            $(".menu a").click(function(){
               $(".menu a").css("font-weight","bold");
            });
            $(".sub1").hide();
            $(".sub a").click(function(){
                $(".sub1 a",this).slideToggle("fast");
                $(".sub1").show();
            });
		});
	</script>
	<style>
	#b_nav {text-align: center; }
	#b_nav ul{ width:100%; margin:0; padding:0; }
	#b_nav ul.menu li{ position:relative; float:left; width:100%; list-style-type:none; font-size:40px;}
	#b_nav ul.menu li a{ display:block; width:100%; height:100%; line-height:100px; text-indent:30px; color:#000; font-weight:normal; text-decoration:none; }
	#b_nav ul.menu li a:hover{ background:#eee; }
	#b_nav ul.menu li .sub a{ position:relative; float:left; display:block; width:100%; z-index:999; background:#ccc; }
	#b_nav ul.menu li .sub a:hover{ background:#444; color:#fff; }
        .sub1 a{position: relative; float: left; display: block; width: 100%; z-index: 999;}
	</style>
</head>
<body>
	<div id="b_nav">
		<ul class="menu">
			<li class="menu123"><a href="#">베홈소개</a>
				<ul class="sub">
					<li><a href="#">브랜드스토리</a></li>
					<li><a href="#">사업영역</a></li>
					<li><a href="#">회사연혁</a></li>
					<li><a href="#">오시는길</a></li>
				</ul>
			</li>
			<li><a href="#">제품소개</a>
				<ul class="sub">
					<li><a href="#">붙박이장</a>
					    <ul class="sub1">
					        <li><a href="#">슬라이드</a></li>
					    </ul>
					</li>
					<li><a href="#">주방가구</a></li>
					<li><a href="#">바스&판넬</a></li>
					<li><a href="#">가구&소품</a></li>
				</ul>
			</li>
			<li><a href="#">카달로그</a>
				<ul class="sub">
					<li><a href="#">2019 카달로그</a></li>
					<li><a href="#">2020 카달로그</a></li>
				</ul>
			</li>
			<li><a href="#">시공사례</a>
				<ul class="sub">
					<li><a href="#">붙박이장</a></li>
					<li><a href="#">주방가구</a></li>
				</ul>
			</li>
			<li><a href="#">커뮤니티</a>
				<ul class="sub">
					<li><a href="#">공지사항</a></li>
					<li><a href="#">실측&상담요청</a></li>
					<li><a href="#">자주하는 질문</a></li>
					<li><a href="#">상품후기</a></li>
				</ul>
			</li>
		</ul>
	</div>
</body>
</html>


1차까지는 메뉴가 잘나오는데

이제 중간에보시면 붙박이장을 누르면 또 한번 슬라이드가 나오는 메뉴바를 하고싶어요

스크립트 어느부분을 수정해야할까요?

아니면 알고 계시는 예시가 있으면 링크좀 부탁드리겠습니다 ㅜㅜ

0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.