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