핑크 좌측 네비게이션
사용법은
plugin 폴더 째로 그누가 설치된 폴더에 올려줍니다.
원하는 위치에 <?php include_once($g4['path'].'/plugin/LNB_1/menu.php'); ?> 하고 적어주시면 됩니다.
추천 꾸욱!
----------------------------------------------
12.07.19
아...ftp에 있는 놈으로 올렸어야 하는데
제정신이 아니었던 상태라 하드에 있는걸 올려 버렸네요
죄송합니다
다시 받아주세요^^
plugin 폴더 째로 그누가 설치된 폴더에 올려줍니다.
원하는 위치에 <?php include_once($g4['path'].'/plugin/LNB_1/menu.php'); ?> 하고 적어주시면 됩니다.
추천 꾸욱!
----------------------------------------------
12.07.19
아...ftp에 있는 놈으로 올렸어야 하는데
제정신이 아니었던 상태라 하드에 있는걸 올려 버렸네요
죄송합니다
다시 받아주세요^^
|
댓글을 작성하시려면 로그인이 필요합니다.
그누4 스킨
5,847건스킨의 저작권은 해당 스킨 제작자님께 있으며, 그누보드의 저작권과 다를 수 있습니다. 스킨 다운로드시 좋아요와 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y 그누보드와 관련이 있지만 스킨과 빌더가 아니면 플러그인 게시판에 올려주세요.
댓글 23개
잘쓸께요~
1) <ul class="container">
위에 </script>태그 빠져있습니다.
화면에 아무것도 안 보이실 겁니다.
</script> <!-- 스크립트 끝태그 추가 -->
<ul class="container">
2) jQuery 연결하셔야 됩니다.
제 그누보드에 있는 jquery 경로입니다.
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
3) jquery.easing.1.3.js 를 js 폴더로 옮기고 경로를 절대 경로로 바꾸었습니다.
(그냥 제가 편하게 쓰는 스타일이라서요.)
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
4) 이미지 경로도 절대 경로로 바꾸어 어떤 디렉토리 구조에서도
수정없이 쓸 수 있게했습니다.
(그냥 제가 편하게 쓰는 스타일이라서요.)
수정된 코드는 아래와 같습니다. 좋은 소스 제작해주신 코코남편님께 감사드립니다.
[menu.php]---------------------------------------------------------
<style>
body,p,quote,small,form,input,ul,li,ol,label{
margin:0px;
padding:0px;
}
a, a:visited {color:#9a4972;text-decoration:none;outline:none;letter-spacing:-1px;}
body{color:#cccccc;font-size:12px;background: #fff;font-family:dotum,'돋움';}
ul{margin:0;padding:0;}
ul.container{width:180px;padding:4px;background-color:#ffe2f1;border:1px #f1b6d4 solid;margin:50px;}
li{list-style:none;text-align:left;}
li.menu{padding:0px 0;width:100%;}
li.button a{display:block;font-family:dotum,'돋움';font-size:11px;height:23px;overflow:hidden;padding:9px 0 0 30px;position:relative;}
li.button a:hover{text-decoration:none;}
li.button a span{height:32px;position:absolute;right:0;top:0;width:4px;display:block;}
li.button a.pink{background:url(/plugin/LNB_1/img/menu_pink.gif) no-repeat top left; color:#fff;}
li.button a.pink span{ background:url/plugin/LNB_1/img/menu_pink.gif) no-repeat top right;}
li.button a:hover{ background-position:bottom left;}
li.button a:hover span{ background-position:bottom right;}
.dropdown{display:none;width:100%;}
.dropdown li{color:#CCCCCC;margin:0;padding:4px 18px;}
ul.submenu {width:140px;margin-left:20px;background:#f9c8e1 url(/plugin/LNB_1/img/shadow.gif) repeat-x top;padding:5px;;}
ul.submenu li {margin:0;padding:0}
ul.submenu li a{display:block;padding:4px 0 4px 20px;font-family:돋움;font-size:11px;}
ul.submenu li a:hover{background:#fff url(/plugin/LNB_1/img/dot.gif) no-repeat 14px 9px;}
.clear{clear:both;}
</style>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.easing.def = "easeOutBounce";
$('li.button a').click(function(e){
var dropDown = $(this).parent().next();
$('.dropdown').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
e.preventDefault();
})
});
</script>
<ul class="container">
<li class="menu">
<ul>
<li class="button"><a href="#" class="pink">블루비 <span></span></a></li>
<li class="dropdown">
<ul class="submenu">
<li><a href="#">서브메뉴 1-1</a></li>
<li><a href="#">서브메뉴 1-2</a></li>
<li><a href="#">서브메뉴 1-3</a></li>
<li><a href="#">서브메뉴 1-4</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="#" class="pink">자바스크립트<span></span></a></li>
<li class="dropdown">
<ul class="submenu">
<li><a href="#">서브메뉴 2-1</a></li>
<li><a href="#">서브메뉴 2-2</a></li>
<li><a href="#">서브메뉴 2-3</a></li>
<li><a href="#">서브메뉴 2-4</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="#" class="pink">웹디자인<span></span></a></li>
<li class="dropdown">
<ul class="submenu">
<li><a href="#">서브메뉴 3-1</a></li>
<li><a href="#">서브메뉴 3-2</a></li>
<li><a href="#">서브메뉴 3-3</a></li>
<li><a href="#">서브메뉴 3-4</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="#" class="pink">플래쉬<span></span></a></li>
<li class="dropdown">
<ul class="submenu">
<li><a href="#">서브메뉴 4-1</a></li>
<li><a href="#">서브메뉴 4-2</a></li>
<li><a href="#">서브메뉴 4-3</a></li>
<li><a href="#">서브메뉴 4-4</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="#" class="pink">커뮤니티<span></span></a></li>
<li class="dropdown">
<ul class="submenu">
<li><a href="#">서브메뉴 5-1</a></li>
<li><a href="#">서브메뉴 5-2</a></li>
<li><a href="#">서브메뉴 5-3</a></li>
<li><a href="#">서브메뉴 5-4</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="#" class="pink">사랑합니다.<span></span></a></li>
<li class="dropdown">
<ul class="submenu">
<li><a href="#">사랑은 미친짓</a></li>
<li><a href="#">그러게요..</a></li>
<li><a href="#">사랑은 아무나 하나</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="clear"></div>
수정했습니다
그리고
제이쿼리는 다시 리로드 하실 필요 없습니다
그누기본 적으로 로드되는 제이쿼리가 있습니다
제가 위에 적은 사용법 대로 사용하시는게 제일 좋습니다
감사합니다.
클릭하지 않아도 메뉴가 펼쳐지게 하려면 어떻게 해야하는지좀 알려주세요.
메뉴2의 서브메뉴2-2을 열었으면 해당페이지의 메뉴2가 열려있게 하고 싶습니다~~~
고수님들 방법 좀 부탁드립니다~~~~