팬더다이녀석들아
296
2020-12-14 19:22:07
2
128

슬라이드 토글 도움좀 주실분 계신가요ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ



<!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_m1_sub").hide();
			$(".b_m2_sub").hide();
			$(".b_m3_sub").hide();
			$(".b_m4_sub").hide();
			$(".b_m5_sub").hide();
            $(".b_m2_sub_sub").hide();
            
			$(".b_m1").click(function(){
				$(".b_m1_sub",this).slideToggle("fast");
			});
            $(".b_m2").click(function(){
				$(".b_m2_sub",this).slideToggle("fast");
			});
            $(".b_m3").click(function(){
				$(".b_m3_sub",this).slideToggle("fast");
			});
            $(".b_m4").click(function(){
				$(".b_m4_sub",this).slideToggle("fast");
			});
            $(".b_m5").click(function(){
				$(".b_m5_sub",this).slideToggle("fast");
			});
            $(".menu a").click(function(){
               $(".menu a").css("font-weight","bold");
            });


        });
	</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="b_m1"><a href="#">베홈소개</a>
				<ul class="b_m1_sub">
					<li><a href="#">브랜드스토리</a></li>
					<li><a href="#">사업영역</a></li>
					<li><a href="#">회사연혁</a></li>
					<li><a href="#">오시는길</a></li>
				</ul>
			</li>
			<li class="b_m2"><a href="#">제품소개</a>
				<ul class="b_m2_sub">
					<li><a href="#">붙박이장</a>
					    <ul class="b_m2_sub_sub">
					        <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 class="b_m3"><a href="#">카달로그</a>
				<ul class="b_m3_sub">
					<li><a href="#">2019 카달로그</a></li>
					<li><a href="#">2020 카달로그</a></li>
				</ul>
			</li>
			<li class="b_m4"><a href="#">시공사례</a>
				<ul class="b_m4_sub">
					<li><a href="#">붙박이장</a></li>
					<li><a href="#">주방가구</a></li>
				</ul>
			</li>
			<li class="b_m5"><a href="#">커뮤니티</a>
				<ul class="b_m5_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>

모바일 반응형 네비게이션 바를 만드는중인데요


2번째 메뉴-서브메뉴1-서브메뉴2를 보여주고싶은데 도대체 어떤 스크립트를 짜야할지 모르겠어요 ㅜㅜ..


검색을 해봐도 메뉴-서브메뉴1 까지만나오고 그이상은 검색을 아무리해도 안나오더라구요.. 어떻게하면 좋을지 해답을 주실분 계십니까 ㅜㅜ

0
  • 답변 2

  • howoni123
    878
    2020-12-15 10:46:54

    시간상 이미 해결했을거 같으시긴한데...


    <!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_m1_sub").hide();
    			$(".b_m2_sub").hide();
    			$(".b_m3_sub").hide();
                $(".b_m2_sub_sub_sub").hide();
                
    			$(".b_m1").click(function(){
    				$(".b_m1_sub",this).slideToggle("fast");
    			});
    
    			//
                $(".b_m2").click(function(){
    				$(".b_m2_sub").slideToggle("fast");
    			});
    			$(".b_m2sub").click(function(){
    				$(".b_m2_sub").slideToggle("fast");
    			});
    			$(".b_m2_sub_sub").click(function(){
    				$(".b_m2_sub_sub_sub").slideToggle("fast");
    			});
    
    			//
                $(".b_m3").click(function(){
    				$(".b_m3_sub").slideToggle("fast");
    			});
    			$(".b_m3_sub").click(function(){
    				$(".b_m3_sub").slideToggle("fast");
    			});
    
    
    			//
                $(".menu a").click(function(){
                   $(".menu a").css("font-weight","bold");
                });
            });
    	</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;}
    
        .tiny a{ font-size:0.7em; }
    	</style>
    </head>
    <body>
    	<div id="b_nav">
    		<ul class="menu">
    			<li class="b_m1"><a href="#">베홈소개</a>
    				<ul class="b_m1_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="#" class="b_m2">제품소개</a>
    				<ul class="b_m2_sub">
    					<li class="b_m2_sub_sub"><a href="#">붙박이장</a>
    					    <ul class="b_m2_sub_sub_sub tiny">
    					        <li class="b_m2sub"><a href="#">슬라이드</a></li>
    					    </ul>
    					</li>
    					<li class="b_m2sub"><a href="#">주방가구</a></li>
    					<li class="b_m2sub"><a href="#">바스&판넬</a></li>
    					<li class="b_m2sub"><a href="#">가구&소품</a></li>
    				</ul>
    			</li>
    			<li><a href="#" class="b_m3">카달로그</a>
    				<ul class="b_m3_sub">
    					<li><a href="#">2019 카달로그</a></li>
    					<li><a href="#">2020 카달로그</a></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    </body>
    </html>


  • 팬더다이녀석들아
    296
    2020-12-18 14:49:09
  • 로그인을 하시면 답변을 등록할 수 있습니다.