상단 2열 메뉴 정보
상단 2열 메뉴관련링크
http://bikedb.co.kr/ver2/
416회 연결
첨부파일
본문
제대로 한 것인지 모르겠지만 이리하니 되긴 되네요...
head.php 파일 수정
<ul class="gnb_2dul">
<?php
$sql2 = " select * from {$g5['board_table']} where gr_id = '{$row['gr_id']}' and bo_show_menu = '1' and bo_device <> 'mobile' order by bo_order ";
$result2 = sql_query($sql2);
for ($bi=0; $row2=sql_fetch_array($result2); $bi++) { // bi 는 board index
if ($bi == 0 || (($bi % 2) == 0)) {
?>
<li class="gnb_2dli"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $row2['bo_table'] ?>" class="gnb_2da"><?php echo $row2['bo_subject'] ?></a></li>
<?php } else { ?>
<li class="gnb_2dli_2"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $row2['bo_table'] ?>" class="gnb_2da_2"><?php echo $row2['bo_subject'] ?></a></li>
<?php }
} ?>
</ul>
defalut.css 파일 수정
/* gnb js off */
#gnb {position:relative;margin:-1px 0 0;border-top:1px dotted #dde4e9;border-bottom:1px solid #dde4e9;background:#ecf0f7}
#gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb #gnb_1dul {margin:0 auto !important;padding:0;width:970px;zoom:1}
#gnb #gnb_1dul:after {display:block;visibility:hidden;clear:both;content:""}
.gnb_1dli {z-index:10;clear:both;zoom:1}
.gnb_1dli:after {display:block;visibility:hidden;clear:both;content:""}
.gnb_1da {display:block;float:left;width:80px;height:35px;font-weight:bold;line-height:2.95em;text-decoration:none}
.gnb_1da:focus, .gnb_1da:hover {text-decoration:none}
.gnb_2dul {float:left;width:auto}
.gnb_2dli {float:left;width:180px;}
.gnb_2da {display:block;float:left;width:100px;height:30px;line-height:2.95em;text-decoration:none}
.gnb_2da:focus, .gnb_2da:hover {text-decoration:none}
.gnb_2dli_2 {float:left;width:180px;position:relative;top:-30px;left:181px}
.gnb_2da_2 {display:block;float:left;width:100px;height:30px;line-height:2.95em;text-decoration:none;position:absolute}
.gnb_2da_2:focus, .gnb_2da_2:hover {text-decoration:none}
/* gnb js on */
.gnb_js {}
.gnb_js #gnb_1dul {zoom:1}
.gnb_js #gnb_1dul:after {display:block;visibility:hidden;clear:both;content:""}
.gnb_js .gnb_1dli {clear:none;position:relative;float:left}
.gnb_js .gnb_1da {text-align:center}
.gnb_js .gnb_1dli_air a {float:none;background:#333;color:#fff}
.gnb_js .gnb_1dli_on a {float:none;background:#333;color:#fff}
.gnb_js .gnb_2dul {display:none;position:absolute;top:35px}
.gnb_js .gnb_2da {display:inline-block;float:none !important;padding:0 10px;width:161px;text-align:left}
.gnb_js .gnb_2da_2 {display:inline-block;float:none !important;padding:0 10px;width:161px;text-align:left}
.gnb_1dli_over .gnb_2dul {display:block;left:0;width:180px;background:#fff}
.gnb_1dli_over2 .gnb_2dul {display:block;right:1px;width:180px;background:#fff}
.gnb_empty {width:100%;height:35px;text-align:center;line-height:2.95em}
jquery.menu.js 파일 수정
$(function(){
var hide_menu = false;
var mouse_event = false;
var oldX = oldY = 0;
$(document).mousemove(function(e) {
if(oldX == 0) {
oldX = e.pageX;
oldY = e.pageY;
}
if(oldX != e.pageX || oldY != e.pageY) {
mouse_event = true;
}
});
// 주메뉴
var $gnb = $(".gnb_1dli > a");
$gnb.mouseover(function() {
if(mouse_event) {
$(".gnb_1dli").removeClass("gnb_1dli_over gnb_1dli_over2 gnb_1dli_on");
$(this).parent().addClass("gnb_1dli_over gnb_1dli_on");
menu_rearrange($(this).parent());
hide_menu = false;
}
});
$gnb.mouseout(function() {
hide_menu = true;
});
$(".gnb_2dli").mouseover(function() {
hide_menu = false;
});
$(".gnb_2dli").mouseout(function() {
hide_menu = true;
});
$(".gnb2_2dli_2").mouseover(function() {
hide_menu = false;
});
$(".gnb2_2dli_2").mouseout(function() {
hide_menu = true;
});
$gnb.focusin(function() {
$(".gnb_1dli").removeClass("gnb_1dli_over gnb_1dli_over2 gnb_1dli_on");
$(this).parent().addClass("gnb_1dli_over gnb_1dli_on");
menu_rearrange($(this).parent());
hide_menu = false;
});
$gnb.focusout(function() {
hide_menu = true;
});
$(".gnb_2da").focusin(function() {
$(".gnb_1dli").removeClass("gnb_1dli_over gnb_1dli_over2 gnb_1dli_on");
var $gnb_li = $(this).closest(".gnb_1dli").addClass("gnb_1dli_over gnb_1dli_on");
menu_rearrange($(this).closest(".gnb_1dli"));
hide_menu = false;
});
$(".gnb_2da").focusout(function() {
hide_menu = true;
});
$(".gnb_2da_2").focusin(function() {
$(".gnb_1dli").removeClass("gnb_1dli_over gnb_1dli_over2 gnb_1dli_on");
var $gnb_li = $(this).closest(".gnb_1dli").addClass("gnb_1dli_over gnb_1dli_on");
menu_rearrange($(this).closest(".gnb_1dli"));
hide_menu = false;
});
$(".gnb_2da_2").focusout(function() {
hide_menu = true;
});
$('#gnb_1dul>li').bind('mouseleave',function(){
submenu_hide();
});
$(document).bind('click focusin',function(){
if(hide_menu) {
submenu_hide();
}
});
});
function submenu_hide() {
$(".gnb_1dli").removeClass("gnb_1dli_over gnb_1dli_over2 gnb_1dli_on");
}
function menu_rearrange(el)
{
var width = $("#gnb_1dul").width();
var left = w1 = w2 = w3 = 0;
var idx = $(".gnb_1dli").index(el);
for(i=0; i<=idx; i++) {
w1 = $(".gnb_1dli:eq("+i+")").outerWidth();
w2 = $(".gnb_2dli > a:eq("+i+")").outerWidth(true);
w2 = $(".gnb_2dli_2 > a:eq("+i+")").outerWidth(true);
if((left + w2 + w3) > width) {
el.removeClass("gnb_1dli_over").addClass("gnb_1dli_over2");
}
left += w1;
}
}
head.php 파일 수정
<ul class="gnb_2dul">
<?php
$sql2 = " select * from {$g5['board_table']} where gr_id = '{$row['gr_id']}' and bo_show_menu = '1' and bo_device <> 'mobile' order by bo_order ";
$result2 = sql_query($sql2);
for ($bi=0; $row2=sql_fetch_array($result2); $bi++) { // bi 는 board index
if ($bi == 0 || (($bi % 2) == 0)) {
?>
<li class="gnb_2dli"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $row2['bo_table'] ?>" class="gnb_2da"><?php echo $row2['bo_subject'] ?></a></li>
<?php } else { ?>
<li class="gnb_2dli_2"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $row2['bo_table'] ?>" class="gnb_2da_2"><?php echo $row2['bo_subject'] ?></a></li>
<?php }
} ?>
</ul>
defalut.css 파일 수정
/* gnb js off */
#gnb {position:relative;margin:-1px 0 0;border-top:1px dotted #dde4e9;border-bottom:1px solid #dde4e9;background:#ecf0f7}
#gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb #gnb_1dul {margin:0 auto !important;padding:0;width:970px;zoom:1}
#gnb #gnb_1dul:after {display:block;visibility:hidden;clear:both;content:""}
.gnb_1dli {z-index:10;clear:both;zoom:1}
.gnb_1dli:after {display:block;visibility:hidden;clear:both;content:""}
.gnb_1da {display:block;float:left;width:80px;height:35px;font-weight:bold;line-height:2.95em;text-decoration:none}
.gnb_1da:focus, .gnb_1da:hover {text-decoration:none}
.gnb_2dul {float:left;width:auto}
.gnb_2dli {float:left;width:180px;}
.gnb_2da {display:block;float:left;width:100px;height:30px;line-height:2.95em;text-decoration:none}
.gnb_2da:focus, .gnb_2da:hover {text-decoration:none}
.gnb_2dli_2 {float:left;width:180px;position:relative;top:-30px;left:181px}
.gnb_2da_2 {display:block;float:left;width:100px;height:30px;line-height:2.95em;text-decoration:none;position:absolute}
.gnb_2da_2:focus, .gnb_2da_2:hover {text-decoration:none}
/* gnb js on */
.gnb_js {}
.gnb_js #gnb_1dul {zoom:1}
.gnb_js #gnb_1dul:after {display:block;visibility:hidden;clear:both;content:""}
.gnb_js .gnb_1dli {clear:none;position:relative;float:left}
.gnb_js .gnb_1da {text-align:center}
.gnb_js .gnb_1dli_air a {float:none;background:#333;color:#fff}
.gnb_js .gnb_1dli_on a {float:none;background:#333;color:#fff}
.gnb_js .gnb_2dul {display:none;position:absolute;top:35px}
.gnb_js .gnb_2da {display:inline-block;float:none !important;padding:0 10px;width:161px;text-align:left}
.gnb_js .gnb_2da_2 {display:inline-block;float:none !important;padding:0 10px;width:161px;text-align:left}
.gnb_1dli_over .gnb_2dul {display:block;left:0;width:180px;background:#fff}
.gnb_1dli_over2 .gnb_2dul {display:block;right:1px;width:180px;background:#fff}
.gnb_empty {width:100%;height:35px;text-align:center;line-height:2.95em}
jquery.menu.js 파일 수정
$(function(){
var hide_menu = false;
var mouse_event = false;
var oldX = oldY = 0;
$(document).mousemove(function(e) {
if(oldX == 0) {
oldX = e.pageX;
oldY = e.pageY;
}
if(oldX != e.pageX || oldY != e.pageY) {
mouse_event = true;
}
});
// 주메뉴
var $gnb = $(".gnb_1dli > a");
$gnb.mouseover(function() {
if(mouse_event) {
$(".gnb_1dli").removeClass("gnb_1dli_over gnb_1dli_over2 gnb_1dli_on");
$(this).parent().addClass("gnb_1dli_over gnb_1dli_on");
menu_rearrange($(this).parent());
hide_menu = false;
}
});
$gnb.mouseout(function() {
hide_menu = true;
});
$(".gnb_2dli").mouseover(function() {
hide_menu = false;
});
$(".gnb_2dli").mouseout(function() {
hide_menu = true;
});
$(".gnb2_2dli_2").mouseover(function() {
hide_menu = false;
});
$(".gnb2_2dli_2").mouseout(function() {
hide_menu = true;
});
$gnb.focusin(function() {
$(".gnb_1dli").removeClass("gnb_1dli_over gnb_1dli_over2 gnb_1dli_on");
$(this).parent().addClass("gnb_1dli_over gnb_1dli_on");
menu_rearrange($(this).parent());
hide_menu = false;
});
$gnb.focusout(function() {
hide_menu = true;
});
$(".gnb_2da").focusin(function() {
$(".gnb_1dli").removeClass("gnb_1dli_over gnb_1dli_over2 gnb_1dli_on");
var $gnb_li = $(this).closest(".gnb_1dli").addClass("gnb_1dli_over gnb_1dli_on");
menu_rearrange($(this).closest(".gnb_1dli"));
hide_menu = false;
});
$(".gnb_2da").focusout(function() {
hide_menu = true;
});
$(".gnb_2da_2").focusin(function() {
$(".gnb_1dli").removeClass("gnb_1dli_over gnb_1dli_over2 gnb_1dli_on");
var $gnb_li = $(this).closest(".gnb_1dli").addClass("gnb_1dli_over gnb_1dli_on");
menu_rearrange($(this).closest(".gnb_1dli"));
hide_menu = false;
});
$(".gnb_2da_2").focusout(function() {
hide_menu = true;
});
$('#gnb_1dul>li').bind('mouseleave',function(){
submenu_hide();
});
$(document).bind('click focusin',function(){
if(hide_menu) {
submenu_hide();
}
});
});
function submenu_hide() {
$(".gnb_1dli").removeClass("gnb_1dli_over gnb_1dli_over2 gnb_1dli_on");
}
function menu_rearrange(el)
{
var width = $("#gnb_1dul").width();
var left = w1 = w2 = w3 = 0;
var idx = $(".gnb_1dli").index(el);
for(i=0; i<=idx; i++) {
w1 = $(".gnb_1dli:eq("+i+")").outerWidth();
w2 = $(".gnb_2dli > a:eq("+i+")").outerWidth(true);
w2 = $(".gnb_2dli_2 > a:eq("+i+")").outerWidth(true);
if((left + w2 + w3) > width) {
el.removeClass("gnb_1dli_over").addClass("gnb_1dli_over2");
}
left += w1;
}
}
추천
1
1
댓글 5개
브라우저별로 차이가 나서 재 수정했습니다.
그냥 설치하면 되나요?
메뉴가 아예 안나오네요 ㅜ.ㅜ
자료 감사합니다.
1단 메뉴 클릭시 활성화 된 메뉴의 색상을 다르게 하려면 어떻게 해야 하는지요?
1단 메뉴 클릭시 활성화 된 메뉴의 색상을 다르게 하려면 어떻게 해야 하는지요?
고맙습니다!!!