중앙에 로고가 있는 메뉴로 변경되려면........ 채택완료
안녕하세요~ 요즘 구누보드로 홈페이지 제작에 열심히하는 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" style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">http://demo.boan.pw/layout.php
</span></p><p><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;"></span><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"><!doctype html></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"><html lang="ko"></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"><head></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"><meta charset="utf-8"></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"><body></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"><script src="//code.jquery.com/jquery-1.11.3.min.js"></script></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"><style></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;">body {font-size:0.75em;margin:0;padding:0;}</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;">ul,li,ol {list-style:none;}</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;">#gnb {width:1100px;margin:0 auto;height:34px;background:#565b67;}</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;">#gnb .logo {width:150px;margin:0 auto;}</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;">#gnb ul.left {float:left;}</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;">#gnb ul.right {float:right;}</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;">#gnb ul {float:left;margin:0 auto !important;padding:0;zoom:1}</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;">.gnb_1dli {z-index:10;position:relative;}</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;">.gnb_1dli a {color:#fefefe;text-align:center;}</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;">.gnb_1da {display:inline-block;width:100px;height:34px;font-weight:bold;line-height:2.95em;text-decoration:none}</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;">.gnb_2dul {display:none;position:absolute;top:22px;width:100px;background-color:#333;color:#fff}</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;">.gnb_2da {display:block;padding:7px 10px;text-align:left;text-decoration:none}</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"></style></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"><div id="gnb"></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <span class="logo">로고자리</span></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <ul class="left"></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <il class="gnb_1dli"><a href="" class="gnb_1da">메뉴1</a></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <ul class="gnb_2dul"></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <li><a href="" class="gnb_2da">2차 메뉴1</a></li></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> </ul></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> </li></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <il class="gnb_1dli"><a href="" class="gnb_1da">메뉴2</a></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <ul class="gnb_2dul"></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <li><a href="" class="gnb_2da">2차 메뉴1</a></li></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> </ul></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> </li></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <il class="gnb_1dli"><a href="" class="gnb_1da">메뉴3</a></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <ul class="gnb_2dul"></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <li><a href="" class="gnb_2da">2차 메뉴1</a></li></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> </ul></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> </li></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <il class="gnb_1dli"><a href="" class="gnb_1da">메뉴4</a></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <ul class="gnb_2dul"></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <li><a href="" class="gnb_2da">2차 메뉴1</a></li></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> </ul></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> </li></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> </ul></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <ul class="right"></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <il class="gnb_1dli"><a href="" class="gnb_1da">메뉴5</a></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <ul class="gnb_2dul"></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <li><a href="" class="gnb_2da">2차 메뉴1</a></li></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> </ul></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> </li></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <il class="gnb_1dli"><a href="" class="gnb_1da">메뉴6</a></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <ul class="gnb_2dul"></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <li><a href="" class="gnb_2da">2차 메뉴1</a></li></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> </ul></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> </li></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <il class="gnb_1dli"><a href="" class="gnb_1da">메뉴7</a></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <ul class="gnb_2dul"></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <li><a href="" class="gnb_2da">2차 메뉴1</a></li></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> </ul></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> </li></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <il class="gnb_1dli"><a href="" class="gnb_1da">메뉴8</a></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <ul class="gnb_2dul"></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> <li><a href="" class="gnb_2da">2차 메뉴1</a></li></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> </ul></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> </li></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> </ul></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"></div></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"><script type="text/javascript"></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;">$(document).ready(function(){</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> $("#gnb ul.left, #gnb ul.right").hover(function(){</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> $(".gnb_2dul").css({'display' : 'block'});</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> });</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> $("body").hover(function(){</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> $(".gnb_2dul").css({'display' : 'none'});</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"> });</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;">});</span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"></script></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"></body></span></font></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;"></html></span></font><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;"> </span></p><p><font face="돋움, Dotum, Helvetica, sans-serif"><span style="font-size: 12px; line-height: 18px;">
자동화는 힘들지 않을까 합니다. ... ^_^ 그래도 연구해보시길.. 제가 도아줄수있는건 여기까지입니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
그런데요.. 알려주신 방법은 일반적은 div 정렬방법 이자나요.. 문제는 그 부분 보다.. 실제 그누보드가 사용되고 있는 head.php 부분에서의 방법을 모색해 보는 것이라서요.
</p><p> <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 값 설정용</p><p> 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);</p><p> 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
}</p><p> if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
}</p><p> if ($i == 0) { ?>
<li id="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?>
<a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
<?php } ?>
</ul>
</nav></p><p>이 부분에서 어느 부분의 함수가 수정이 되어야 정상적인 출력이 가능한지가 의문점 입니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인