jquery 메뉴 소스인데요. 가로로 나와야 하는데 세로로 나오네요 ㅠ
본문
이곳에서 퍼온 소스이구요. 위에 주소 들어가보시면, 메뉴가 가로로 나오는데,
제가 퍼왔더니, 메뉴가 세로로 나오네요 ㅠㅠ . 어디부분을 잘못 퍼온걸까요? jquery js 파일 버전이 안맞는건가요?
(아래는 제가 퍼온 소스입니다.)
<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
css 말고요 html 안에있는 li쪽 style도 적용해 주세요
<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>
답변을 작성하시기 전에 로그인 해주세요.
