jquery 메뉴 소스인데요. 가로로 나와야 하는데 세로로 나오네요 ㅠ 채택완료
이곳에서 퍼온 소스이구요. 위에 주소 들어가보시면, 메뉴가 가로로 나오는데,
제가 퍼왔더니, 메뉴가 세로로 나오네요 ㅠㅠ . 어디부분을 잘못 퍼온걸까요? jquery js 파일 버전이 안맞는건가요?
(아래는 제가 퍼온 소스입니다.)
Copy
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <style>#mainGnb ul,#mainGnb li {margin:0;padding:0;text-align:center;}#mainGnb ul {width:100%;height:41px;}#mainGnb li {vertical-align:middle;line-height:41px;}#gnb {width:100%;margin:0;padding:0;height:250px;}#mainGnb {position:relative;margin:0 auto;}#mainGnb li {color:#005199;background-color:white;}#mainGnb li a {display:block;width:100%;color:inherit;text-decoration:none;} #mainGnb li:hover {background-color:#005199;color:white;}#mainGnb li:focus {background-color:#005199;color:white;}</style><script>$(function(){ $("#mainGnb").manyGnb({ type:"click" // hover,click });});</script> <script>// Copyright 2014 @ desimin all rights reserved. (function($){ $.fn.extend({ manyGnb: function(options) { var defaults = { type : "hover", } var options = $.extend(defaults, options); return this.each(function(){ var etype = options; var obj = $(this); //대상 $("ul:visible", obj).hide(); $(this).find("a").keyup(opendepth); // 웹접근성을위한 keyup메서드 $(this).find("a").on(etype.type, opendepth); // 마우스hover시 $(this).find("ul").css({ position : "absolute", left : "0" }); autosort(); $(window).resize(autosort); /* 오픈 메인함수 */ function opendepth(event){ $(this).siblings("ul").children("li").css("width",obj.width()/$(this).siblings("ul").children("li").length); if($(this).siblings("ul").is(":hidden")){ //대상의 자식 ul의 이미지가 보이지 않는다면 $(this).parent().siblings("li").each(function(){ $(this).find("ul").hide(); // 대상의 자식중 보이는 ul의 초기화(모두 감춘다) }); $(this).siblings("ul").show(); // 대상의 자식 ul를 보이게 한다. }else{ // 대상의 자식 ul의 이미지가 보인다면 $(this).parent().siblings("li").each(function(){ $(this).find("ul").hide(); // 대상의 자식중 보이는 ul의 초기화(모두 감춘다) }); // 대상의 자식중 보이는 ul의 초기화(모두 감춘다) } } /* 메뉴갯수에따른 li 너비 균등하게 분배 */ function autosort(){ obj.find("> li").css("width",obj.width()/obj.find(">li").length); } /* 마우스 떠날시 초기화 */ obj.mouseleave(function(){ obj.find("ul").hide(); }); }); } });})(jQuery); </script> <div id="gnb"><ul id="mainGnb"> <li> <a href="#">menu1</a> <ul class="middleGnb"> <li> <a href="#">menu1-1</a> <ul class="endGnb"> <li><a href="#">menu1-1-1</a></li> <li><a href="#">menu1-1-2</a></li> </ul> </li> <li> <a href="#">menu1-2</a> <ul class="endGnb"> <li> <a href="#">menu1-2-1</a> <ul class="endGnb"> <li> <a href="#">menu1-2-1-1</a> </li> <li> <a href="#">menu1-2-1-2</a> </li> <li> <a href="#">menu1-2-1-1</a> </li> </ul> </li> <li> <a href="#">menu1-2-2</a> <ul class="endGnb"> <li> <a href="#">menu1-2-2-1</a> </li> <li> <a href="#">menu1-2-2-2</a> </li> <li> <a href="#">menu1-2-2-3</a> </li> <li> <a href="#">menu1-2-2-4</a> </li> </ul> </li> <li> <a href="#">menu1-2-3</a> <ul class="endGnb"> <li> <a href="#">menu1-2-3-1</a> </li> <li> <a href="#">menu1-2-3-2</a> </li> <li> <a href="#">menu1-2-3-3</a> </li> <li> <a href="#">menu1-2-3-4</a> </li> </ul> </li> </ul> </li> </ul> </li> <li> <a href="#">menu2</a> <ul class="middleGnb"> <li> <a href="#">menu2-1</a> <ul class="endGnb"> <li><a href="#">menu2-1-1</a></li> <li><a href="#">menu2-1-2</a></li> </ul> </li> <li> <a href="#">menu2-2</a> <ul class="endGnb"> <li> <a href="#">menu2-2-1</a> <ul class="endGnb"> <li> <a href="#">menu2-2-1-1</a> </li> <li> <a href="#">menu2-2-1-2</a> </li> <li> <a href="#">menu2-2-1-3</a> </li> </ul> </li> <li> <a href="#">menu2-2-2</a> <ul class="endGnb"> <li> <a href="#">menu2-2-2-1</a> </li> <li> <a href="#">menu2-2-2-2</a> </li> <li> <a href="#">menu2-2-2-3</a> </li> <li> <a href="#">menu2-2-2-4</a> </li> </ul> </li> <li> <a href="#">menu2-2-3</a> <ul class="endGnb"> <li> <a href="#">menu2-2-3-1</a> </li> <li> <a href="#">menu2-2-3-2</a> </li> <li> <a href="#">menu2-2-3-3</a> </li> <li> <a href="#">menu2-2-3-4</a> </li> </ul> </li> </ul> </li> </ul> </li> <li> <a href="#">menu3</a> <ul class="middleGnb"> <li> <a href="#">menu3-1</a> <ul class="endGnb"> <li><a href="#">menu3-1-1</a></li> <li><a href="#">menu3-1-2</a></li> </ul> </li> <li> <a href="#">menu3-2</a> <ul class="endGnb"> <li> <a href="#">menu3-2-1</a> <ul class="endGnb"> <li> <a href="#">menu3-2-1-1</a> </li> <li> <a href="#">menu3-2-1-2</a> </li> <li> <a href="#">menu3-2-1-3</a> </li> </ul> </li> <li> <a href="#">menu3-2-2</a> <ul class="endGnb"> <li> <a href="#">menu3-2-2-1</a> </li> <li> <a href="#">menu3-2-2-2</a> </li> <li> <a href="#">menu3-2-2-3</a> </li> <li> <a href="#">menu3-2-2-4</a> </li> </ul> </li> <li> <a href="#">menu3-2-3</a> <ul class="endGnb"> <li> <a href="#">menu3-2-3-1</a> </li> <li> <a href="#">menu3-2-3-2</a> </li> <li> <a href="#">menu3-2-3-3</a> </li> <li> <a href="#">menu3-2-3-4</a> </li> </ul> </li> </ul> </li> </ul> </li> </ul></div>답변 1개
채택된 답변
+20 포인트
BlueAngel
10년 전
css 말고요 html 안에있는 li쪽 style도 적용해 주세요
Copy
<div id="gnb"><ul id="mainGnb"> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer; width: 286px;"> <a href="javascript:;">menu1</a> <ul class="middleGnb" style="display: none; position: absolute; left: 0px;"> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer; width: 429px;"> <a href="javascript:;">menu1-1</a> <ul class="endGnb" style="display: none; position: absolute; left: 0px;"> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"><a href="javascript:;">menu1-1-1</a></li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"><a href="javascript:;">menu1-1-2</a></li> </ul> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer; width: 429px;"> <a href="javascript:;">menu1-2</a> <ul class="endGnb" style="display: none; position: absolute; left: 0px;"> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu1-2-1</a> <ul class="endGnb" style="display: none; position: absolute; left: 0px;"> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu1-2-1-1</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu1-2-1-2</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu1-2-1-1</a> </li> </ul> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu1-2-2</a> <ul class="endGnb" style="display: none; position: absolute; left: 0px;"> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu1-2-2-1</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu1-2-2-2</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu1-2-2-3</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu1-2-2-4</a> </li> </ul> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu1-2-3</a> <ul class="endGnb" style="display: none; position: absolute; left: 0px;"> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu1-2-3-1</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu1-2-3-2</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu1-2-3-3</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu1-2-3-4</a> </li> </ul> </li> </ul> </li> </ul> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer; width: 286px;"> <a href="javascript:;">menu2</a> <ul class="middleGnb" style="display: none; position: absolute; left: 0px;"> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer; width: 429px;"> <a href="javascript:;">menu2-1</a> <ul class="endGnb" style="display: none; position: absolute; left: 0px;"> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"><a href="javascript:;">menu2-1-1</a></li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"><a href="javascript:;">menu2-1-2</a></li> </ul> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer; width: 429px;"> <a href="javascript:;">menu2-2</a> <ul class="endGnb" style="display: none; position: absolute; left: 0px;"> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu2-2-1</a> <ul class="endGnb" style="display: none; position: absolute; left: 0px;"> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu2-2-1-1</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu2-2-1-2</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu2-2-1-3</a> </li> </ul> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu2-2-2</a> <ul class="endGnb" style="display: none; position: absolute; left: 0px;"> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu2-2-2-1</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu2-2-2-2</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu2-2-2-3</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu2-2-2-4</a> </li> </ul> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu2-2-3</a> <ul class="endGnb" style="display: none; position: absolute; left: 0px;"> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu2-2-3-1</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu2-2-3-2</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu2-2-3-3</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu2-2-3-4</a> </li> </ul> </li> </ul> </li> </ul> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer; width: 286px;"> <a href="javascript:;">menu3</a> <ul class="middleGnb" style="display: none; position: absolute; left: 0px;"> <li style="float: left; list-style: none;margin: 0px;padding: 0px;cursor: pointer;width: 429px;"> <a href="javascript:;">menu3-1</a> <ul class="endGnb" style="display: none; position: absolute; left: 0px;"> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"><a href="javascript:;">menu3-1-1</a></li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"><a href="javascript:;">menu3-1-2</a></li> </ul> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer; width: 429px;"> <a href="javascript:;">menu3-2</a> <ul class="endGnb" style="display: none; position: absolute; left: 0px;"> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu3-2-1</a> <ul class="endGnb" style="display: none; position: absolute; left: 0px;"> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu3-2-1-1</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu3-2-1-2</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu3-2-1-3</a> </li> </ul> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu3-2-2</a> <ul class="endGnb" style="display: none; position: absolute; left: 0px;"> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu3-2-2-1</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu3-2-2-2</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu3-2-2-3</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu3-2-2-4</a> </li> </ul> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu3-2-3</a> <ul class="endGnb" style="display: none; position: absolute; left: 0px;"> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu3-2-3-1</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu3-2-3-2</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu3-2-3-3</a> </li> <li style="float: left; list-style: none; margin: 0px; padding: 0px; cursor: pointer;"> <a href="javascript:;">menu3-2-3-4</a> </li> </ul> </li> </ul> </li> </ul> </li> </ul></div>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인