3단 메뉴(다층메뉴) 플러그인
페이지 정보
작성자 서방님 댓글 0건 조회 159회 작성일 17-03-16 17:37본문
<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>
<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>
<script type="text/javascript">
<!--
(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>
댓글목록
등록된 댓글이 없습니다.
