안녕하세요~ 요즘 구누보드로 홈페이지 제작에 열심히하는 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개 / 댓글 2개
예제 주소 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 정렬방법 이자나요.. 문제는 그 부분 보다.. 실제 그누보드가 사용되고 있는 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>이 부분에서 어느 부분의 함수가 수정이 되어야 정상적인 출력이 가능한지가 의문점 입니다.
방법1
~~<div>메뉴4</div><div>로고</div><div>메뉴5</div>~~
방법2
<div>
<ul>~~
<li>메뉴4<li>
<li>로고<li>
<li>메뉴5<li>
~~
</div>
방법은 더 많습니다.
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.