중앙에 로고가 있는 메뉴로 변경되려면........
본문
안녕하세요~ 요즘 구누보드로 홈페이지 제작에 열심히하는 1인 입니다.
다름이 아니라.. 아래 글로 설명을 붙이자면 (div는 아직 초짜입니다.)
_______________________________ |--------------|____________________________________
메뉴1 메뉴2 메뉴3 메뉴4 | 로고이미지 | 메뉴5 메뉴6 메뉴7 메뉴8
sub1 sub1 sub1 sub1 ------------- sub1 sub1 sub1 sub1
sub2 sub2 sub2 sub2 sub2 sub2 sub2 sub2
---------------------------------------------------------------------------
헤더부분을 저렇게 손을 볼라면 제일 중요한 메뉴의 div 체계를 어떻게 손봐야 할까요?
구느보드5 를 사용하고 있습니다.
(현재 제작한 사이트의 메뉴구성도 대략 8개 정도가 되어서 질의도 8개로 했습니다.)
답변 3
예제 주소 http://demo.boan.pw/layout.php
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<body>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
body {font-size:0.75em;margin:0;padding:0;}
ul,li,ol {list-style:none;}
#gnb {width:1100px;margin:0 auto;height:34px;background:#565b67;}
#gnb .logo {width:150px;margin:0 auto;}
#gnb ul.left {float:left;}
#gnb ul.right {float:right;}
#gnb ul {float:left;margin:0 auto !important;padding:0;zoom:1}
.gnb_1dli {z-index:10;position:relative;}
.gnb_1dli a {color:#fefefe;text-align:center;}
.gnb_1da {display:inline-block;width:100px;height:34px;font-weight:bold;line-height:2.95em;text-decoration:none}
.gnb_2dul {display:none;position:absolute;top:22px;width:100px;background-color:#333;color:#fff}
.gnb_2da {display:block;padding:7px 10px;text-align:left;text-decoration:none}
</style>
<div id="gnb">
<span class="logo">로고자리</span>
<ul class="left">
<il class="gnb_1dli"><a href="" class="gnb_1da">메뉴1</a>
<ul class="gnb_2dul">
<li><a href="" class="gnb_2da">2차 메뉴1</a></li>
</ul>
</li>
<il class="gnb_1dli"><a href="" class="gnb_1da">메뉴2</a>
<ul class="gnb_2dul">
<li><a href="" class="gnb_2da">2차 메뉴1</a></li>
</ul>
</li>
<il class="gnb_1dli"><a href="" class="gnb_1da">메뉴3</a>
<ul class="gnb_2dul">
<li><a href="" class="gnb_2da">2차 메뉴1</a></li>
</ul>
</li>
<il class="gnb_1dli"><a href="" class="gnb_1da">메뉴4</a>
<ul class="gnb_2dul">
<li><a href="" class="gnb_2da">2차 메뉴1</a></li>
</ul>
</li>
</ul>
<ul class="right">
<il class="gnb_1dli"><a href="" class="gnb_1da">메뉴5</a>
<ul class="gnb_2dul">
<li><a href="" class="gnb_2da">2차 메뉴1</a></li>
</ul>
</li>
<il class="gnb_1dli"><a href="" class="gnb_1da">메뉴6</a>
<ul class="gnb_2dul">
<li><a href="" class="gnb_2da">2차 메뉴1</a></li>
</ul>
</li>
<il class="gnb_1dli"><a href="" class="gnb_1da">메뉴7</a>
<ul class="gnb_2dul">
<li><a href="" class="gnb_2da">2차 메뉴1</a></li>
</ul>
</li>
<il class="gnb_1dli"><a href="" class="gnb_1da">메뉴8</a>
<ul class="gnb_2dul">
<li><a href="" class="gnb_2da">2차 메뉴1</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#gnb ul.left, #gnb ul.right").hover(function(){
$(".gnb_2dul").css({'display' : 'block'});
});
$("body").hover(function(){
$(".gnb_2dul").css({'display' : 'none'});
});
});
</script>
</body>
</html>
자동화는 힘들지 않을까 합니다. ... ^_^ 그래도 연구해보시길.. 제가 도아줄수있는건 여기까지입니다.
감사합니다. 적용해 볼께요
방법1
~~<div>메뉴4</div><div>로고</div><div>메뉴5</div>~~
방법2
<div>
<ul>~~
<li>메뉴4<li>
<li>로고<li>
<li>메뉴5<li>
~~
</div>
방법은 더 많습니다.
해보겠습니다.
그런데요.. 알려주신 방법은 일반적은 div 정렬방법 이자나요.. 문제는 그 부분 보다.. 실제 그누보드가 사용되고 있는 head.php 부분에서의 방법을 모색해 보는 것이라서요.
<nav id="gnb">
<h2>메인메뉴</h2>
<ul id="gnb_1dul">
<?php
$sql = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '2'
order by me_order, me_id ";
$result = sql_query($sql, false);
$gnb_zindex = 999; // gnb_1dli z-index 값 설정용
for ($i=0; $row=sql_fetch_array($result); $i++) {
?>
<li class="gnb_1dli" style="z-index:<?php echo $gnb_zindex--; ?>">
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_1da"><?php echo $row['me_name'] ?></a>
<?php
$sql2 = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '4'
and substring(me_code, 1, 2) = '{$row['me_code']}'
order by me_order, me_id ";
$result2 = sql_query($sql2);
for ($k=0; $row2=sql_fetch_array($result2); $k++) {
if($k == 0)
echo '<ul class="gnb_2dul">'.PHP_EOL;
?>
<li class="gnb_2dli"><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="gnb_2da"><?php echo $row2['me_name'] ?></a></li>
<?php
}
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
}
if ($i == 0) { ?>
<li id="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <br><a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
<?php } ?>
</ul>
</nav>
이 부분에서 어느 부분의 함수가 수정이 되어야 정상적인 출력이 가능한지가 의문점 입니다.
