Copy
<div class="menu-group"> <h4>메뉴1번</h4> <ul> <li>메뉴1-1</li> <li>메뉴1-2</li> <li>메뉴1-3</li> </ul></div><div class="menu-group"> <h4>메뉴2번</h4> <ul> <li>메뉴2-1</li> <li>메뉴2-2</li> <li>메뉴2-3</li> </ul></div><div class="menu-group"> <h4>메뉴3번</h4> <ul> <li>메뉴3-1</li> <li>메뉴3-2</li> <li>메뉴3-3</li> </ul></div><div class="menu-group"> <h4>메뉴4번</h4> <ul> <li>메뉴4-1</li> <li>메뉴4-2</li> <li>메뉴4-3</li> </ul></div><ul class="main-menu"> <li><a href="#" class="menu">메뉴1번</a></li> <li><a href="#" class="menu">메뉴2번</a></li> <li><a href="#" class="menu">메뉴3번</a></li> <li><a href="#" class="menu">메뉴4번</a></li> </ul><style type="text/css">.menu-group {display:none;}.menu-group h4{font-size:14px; font-weight:bold;margin-bottom:10px; border-bottom:1px dashed #ddd}.menu-group {margin:10px; padding:20px; border:1px solid #ddd}.main-menu{ font-size:18px; font-weight:bold;margin:0 auto;}.main-menu li{border:1px solid #ddd; padding:10px;text-align:center;margin:2px;}</style><script type="text/javascript">function showMenu(){ var idx = $('.menu').index(this); $('.menu-group').each(function(i, ele){ if(idx==i) return; $('.menu-group').eq(i).hide(); }); $('.menu-group').eq(idx).toggle();}$(function(){ $('.menu').click(showMenu);})</script>현재 코드 입니다.
결과물은
1
2
3
4
이렇게 가로로 100%로 잡혀 있습니다.
근데 이걸
1 2
3 4
이런식으로 변경하고 싶구요..
클릭 했을경우 메뉴가 열리는데
1 2 3 4 위로 메뉴가 열립니다. 이걸 아래로 내리고 싶습니다. ㅠㅠ
답변 3개 / 댓글 1개
채택된 답변
+20 포인트
onlymilk47
2017-09-11 (월) 23:09:41
css 와 위치 수정했습니다.
Copy
<div class="menu_con"> <!-- 메뉴부분 --> <ul class="main-menu"> <li><a href="#" class="menu">메뉴1번</a></li> <li><a href="#" class="menu">메뉴2번</a></li> <li><a href="#" class="menu">메뉴3번</a></li> <li><a href="#" class="menu">메뉴4번</a></li> </ul> <!-- 메뉴그룹부분 --> <div class="menu-group"> <h4>메뉴1번</h4> <ul> <li>메뉴1-1</li> <li>메뉴1-2</li> <li>메뉴1-3</li> </ul> </div> <div class="menu-group"> <h4>메뉴2번</h4> <ul> <li>메뉴2-1</li> <li>메뉴2-2</li> <li>메뉴2-3</li> </ul> </div> <div class="menu-group"> <h4>메뉴3번</h4> <ul> <li>메뉴3-1</li> <li>메뉴3-2</li> <li>메뉴3-3</li> </ul> </div> <div class="menu-group"> <h4>메뉴4번</h4> <ul> <li>메뉴4-1</li> <li>메뉴4-2</li> <li>메뉴4-3</li> </ul> </div></div><style type="text/css">.menu_con{position:relative;width:100%;margin:0px;padding:0px;}.menu-group {display:none;}.menu-group h4{font-size:14px; font-weight:bold;margin-bottom:10px; border-bottom:1px dashed #ddd}.menu-group {margin:10px; padding:20px; border:1px solid #ddd}.main-menu:after {content:""; display:block; clear:both;}.main-menu{ position:relative;width:100%; font-size:18px; font-weight:bold;margin:0;padding:0px;}.main-menu li{list-style-type:none;float:left;width:50%;padding:0px;margin:0px;text-align:center;}.main-menu li a{display:block;padding:10px;margin:10px;border:1px solid #ddd;}</style><script type="text/javascript">function showMenu(){ var idx = $('.menu').index(this); $('.menu-group').each(function(i, ele){ if(idx==i) return; $('.menu-group').eq(i).hide(); }); $('.menu-group').eq(idx).toggle();}$(function(){ $('.menu').click(showMenu);})답변에 대한 댓글 1개
기다림00
2017-09-12 (화) 12:25:16
전체적으로 수정하셔야 할거 같네요. html도 아래처럼 작성하시고
<ul id="gnb">
<li>
<a href="">메뉴1</a>
<ul>
<li><a href="">메뉴1</a></li>
<li><a href="">메뉴1</a></li>
<li><a href="">메뉴1</a></li>
</ul>
</li>
<li>
<a href="">메뉴1</a>
<ul>
<li><a href="">메뉴1</a></li>
<li><a href="">메뉴1</a></li>
<li><a href="">메뉴1</a></li>
</ul>
</li>
</ul>
css를 대략 아래처럼 작성하시면 됩니다.
#gnb {display:inline-block; width:100%;}
#gnb > li {float:left; position:relative; width:20%;}
#gnb > li > ul {position:absolute; top:30px; left:0;}
2017-09-11 (월) 22:56:58
Copy
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>title</title> <style type="text/css"> .menu-group {display:none;} .menu-group h4{font-size:14px; font-weight:bold;margin-bottom:10px; border-bottom:1px dashed #ddd} .menu-group {margin:10px; padding:20px; border:1px solid #ddd} .main-menu{ font-size:18px; font-weight:bold;margin:0 auto;} .main-menu li{border:1px solid #ddd; padding:10px;text-align:center;margin:2px;} /* ------------- add ------------- */ .main-menu li { float: left; } .main-menu li:nth-child(odd) { clear: left; } .main-menu:after { content: ""; display: block; clear: left; } /* ------------- add ------------- */ </style> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript"> function showMenu(){ var idx = $('.menu').index(this); $('.menu-group').each(function(i, ele){ if(idx==i) return; $('.menu-group').eq(i).hide(); }); $('.menu-group').eq(idx).toggle(); } $(function(){ $('.menu').click(showMenu); }) </script></head><body> <ul class="main-menu"> <li><a href="#" class="menu">메뉴1번</a></li> <li><a href="#" class="menu">메뉴2번</a></li> <li><a href="#" class="menu">메뉴3번</a></li> <li><a href="#" class="menu">메뉴4번</a></li> </ul> <div class="menu-group"> <h4>메뉴1번</h4> <ul> <li>메뉴1-1</li> <li>메뉴1-2</li> <li>메뉴1-3</li> </ul> </div> <div class="menu-group"> <h4>메뉴2번</h4> <ul> <li>메뉴2-1</li> <li>메뉴2-2</li> <li>메뉴2-3</li> </ul> </div> <div class="menu-group"> <h4>메뉴3번</h4> <ul> <li>메뉴3-1</li> <li>메뉴3-2</li> <li>메뉴3-3</li> </ul> </div> <div class="menu-group"> <h4>메뉴4번</h4> <ul> <li>메뉴4-1</li> <li>메뉴4-2</li> <li>메뉴4-3</li> </ul> </div></body></html>답변을 작성하려면 로그인이 필요합니다.