사용자: gnb 마크업

This commit is contained in:
whitedot
2013-02-22 15:36:10 +09:00
parent ffde727045
commit 59c918a263
10 changed files with 229 additions and 5 deletions

View File

@ -53,12 +53,43 @@ a:active {color:#000;text-decoration:underline}
#snb a:active {text-decoration:none}
#snb img {margin-right:3px}
/* gnb js off */
#gnb {margin:0 0 15px;background:#565e60}
#gnb h2 {margin:0;padding:0;width:0;height:0;overflow:hidden}
#gnb ul {z-index:10;margin:0 auto;padding:0;width:980px;zoom:1}
#gnb ul:after {display:block;visibility:hidden;clear:both;content:""}
.gnb_1depth {position:relative;margin-left:-1px;zoom:1}
.gnb_1depth:after {display:block;visibility:hidden;clear:both;content:""}
.gnb_1depth a {display:inline-block;float:left;height:35px;color:#fff;line-height:2.7em !important;line-height:2.4em}
.gnb_1depth_air a,
.gnb_1depth_on a {color:#000}
.gnb_1depth a:focus,
.gnb_1depth a:hover,
.gnb_1depth a:active {text-decoration:none}
.gnb_1depth ul {float:left !important;margin:0 !important;padding:0 !important;width:auto !important;zoom:1}
.gnb_1depth ul:after {display:inline-block;visibility:hidden;clear:both;content:""}
.gnb_1depth li {float:left}
.gnb_1depth_over ul {top:35px;left:-1px;width:auto;height:auto;border:1px solid #ccc;border-top:0}
.gnb_2depth a {display:inline-block;float:none;margin-right:10px;padding:5px;width:auto;height:25px;border-bottom:0;color:#fff;font-weight:normal;text-align:left;line-height:2.1em !important;line-height:1.8em}
/* gnb js on */
.gnb_js .gnb_1depth {position:relative;float:left;margin-left:-1px}
.gnb_js .gnb_1depth a {display:block;padding:0 15px;height:35px;border-right:1px solid #606769;border-left:1px solid #606769;color:#fff;font-size:1.1em;letter-spacing:-0.1em;line-height:2.1em}
.gnb_js .gnb_1depth a:focus,
.gnb_js .gnb_1depth a:hover,
.gnb_js .gnb_1depth a:active {text-decoration:none}
.gnb_js .gnb_1depth_air a {float:none;background:#f7f7f2;color:#000}
.gnb_js .gnb_1depth_on a {float:none;background:#fff;color:#000}
.gnb_js .gnb_1depth ul {width:0 !important;height:0 !important;overflow:hidden}
.gnb_js .gnb_1depth li {float:none}
.gnb_js .gnb_1depth_over ul {position:absolute;top:35px;left:0;width:181px !important;height:auto !important;border:1px solid #ccc;border-top:0}
.gnb_js .gnb_2depth a {display:inline-block;margin:0;padding:5px 10px;width:161px;height:25px;border:0;background:#fff;color:#000;font-weight:normal;text-align:left;line-height:2.1em}
/* 중간 레이아웃 */
#wrapper {margin:50px auto;width:980px;zoom:1}
#wrapper:after {display:block;visibility:hidden;clear:both;content:""}
#wrapper_title {margin-bottom:20px;font-size:1.2em}
#lnb {float:right;width:219px;border:1px solid #e7f1ed;border-left:0;background:#fff}
#lnb {float:right;width:209px;border:1px solid #e7f1ed;background:#fff}
#container {position:relative;float:left;padding:25px 15px 15px;width:728px;min-height:500px;height:auto !important;height:500px;border:1px solid #e7f1ed;background:#fff;zoom:1}
#container:after {display:block;visibility:hidden;clear:both;content:""}
@ -302,14 +333,14 @@ fieldset button {padding:0 15px;height:24px;border:0;background:#333;color:#fff;
/* 설문조사 스킨 */
#poll {border-top:1px solid #e7f1ed}
#poll header {position:relative;padding:25px 14px 0}
#poll h2 {position:absolute;top:0px;right:15px;margin:0;padding:0 5px;height:25px;background:#76a5a8;color:#fff;font-weight:bold;line-height:2.2em}
#poll header {position:relative;padding:15px 14px 0}
#poll h2 {}
#poll header .btn_admin {margin-top:5px;width:168px;text-align:center}
#poll header p {padding:5px 0 0}
#poll ul {margin:0 0 10px;padding:5px 14px;list-style:none}
#poll li {padding:3px 0}
#poll footer {padding:0 14px 14px}
#poll footer input {width:97px;height:24px;border:0;background:#333;color:#fff;letter-spacing:-0.1em;vertical-align:top;cursor:pointer}
#poll footer input {width:88px;height:24px;border:0;background:#333;color:#fff;letter-spacing:-0.1em;vertical-align:top;cursor:pointer}
#poll footer a {display:inline-block;width:86px;height:22px;border:1px solid #ccc;background:#fafafa;text-align:center;line-height:2em}
#poll footer a:focus,
#poll footer a:hover {text-decoration:none !important}
@ -332,7 +363,7 @@ fieldset button {padding:0 15px;height:24px;border:0;background:#333;color:#fff;
#poll_result_list p strong {position:absolute;top:5px;right:5%;padding-right:80px;width:100px;text-align:right}
#poll_result_list p span {position:absolute;top:5px;right:5%;width:80px;color:#68999c;text-align:right}
.poll_result_graph {position:relative;margin-right:5%;height:5px;background:#eee}
.poll_result_graph span {position:absolute;top:0;left:0;height:5px;background:#68999c;font-size:0.1em}
.poll_result_graph span {position:absolute;top:0;left:0;height:5px;background:#565e60;font-size:0.1em}
#poll_result_cmt {margin:0 auto 20px}
#poll_result_cmt h2 {text-align:center}
#poll_result_cmt h3 {margin:0 auto 10px;padding-top:15px;width:93%}
@ -340,6 +371,8 @@ fieldset button {padding:0 15px;height:24px;border:0;background:#333;color:#fff;
#poll_result_cmt h1 {margin:0;padding:0;width:0;height:0;overflow:hidden}
.poll_datetime {display:inline-block;margin-left:10px}
#poll_result_cmt p {padding:3px 0}
#poll_result_cmt fieldset {margin-bottom:0;text-align:left}
#poll_result_cmt fieldset p {margin:0 0 15px;padding:3px 0 0px;text-align:left}
#poll_result_cmt footer {text-align:right}
#poll_result_wcmt {margin-bottom:10px;width:93%}
.poll_cmt_del a {display:inline-block;padding-bottom:10px}

117
head.php
View File

@ -134,6 +134,123 @@ include_once(G4_LIB_PATH.'/popular.lib.php');
<hr>
<nav id="gnb">
<script>$('#gnb').addClass('gnb_js');</script>
<h2>홈페이지 메인메뉴</h2>
<ul>
<li class="gnb_1depth">
<a href="<?=$g4['url']?>/bbs/board.php?bo_table=sirgle">써글톡</a>
<ul>
<li class="gnb_2depth"><a href="#">써글톡</a></li>
<li class="gnb_2depth"><a href="#">써글톡</a></li>
<li class="gnb_2depth"><a href="#">써글톡</a></li>
<li class="gnb_2depth"><a href="#">써글톡</a></li>
</ul>
</li>
<li class="gnb_1depth">
<a href="<?=$g4['url']?>/bbs/board.php?bo_table=cry">넋두리</a>
<ul>
<li class="gnb_2depth"><a href="#">넋두리</a></li>
<li class="gnb_2depth"><a href="#">넋두리</a></li>
<li class="gnb_2depth"><a href="#">넋두리</a></li>
<li class="gnb_2depth"><a href="#">넋두리</a></li>
</ul>
</li>
<li class="gnb_1depth">
<a href="<?=$g4['url']?>/bbs/board.php?bo_table=humor">써글유머</a>
<ul>
<li class="gnb_2depth"><a href="#">써글유머</a></li>
<li class="gnb_2depth"><a href="#">써글유머</a></li>
<li class="gnb_2depth"><a href="#">써글유머</a></li>
<li class="gnb_2depth"><a href="#">써글유머</a></li>
</ul>
</li>
<li class="gnb_1depth">
<a href="<?=$g4['url']?>/bbs/board.php?bo_table=debate">써글토론</a>
<ul>
<li class="gnb_2depth"><a href="#">써글토론</a></li>
<li class="gnb_2depth"><a href="#">써글토론</a></li>
<li class="gnb_2depth"><a href="#">써글토론</a></li>
<li class="gnb_2depth"><a href="#">써글토론</a></li>
</ul>
</li>
<li class="gnb_1depth">
<a href="<?=$g4['url']?>/bbs/board.php?bo_table=sirglenoms">써글놈들</a>
<ul>
<li class="gnb_2depth"><a href="#">써글놈들</a></li>
<li class="gnb_2depth"><a href="#">써글놈들</a></li>
<li class="gnb_2depth"><a href="#">써글놈들</a></li>
<li class="gnb_2depth"><a href="#">써글놈들</a></li>
</ul>
</li>
<li class="gnb_1depth">
<a href="<?=$g4['url']?>/bbs/board.php?bo_table=writtenby">자작써글</a>
<ul>
<li class="gnb_2depth"><a href="#">자작써글</a></li>
<li class="gnb_2depth"><a href="#">자작써글</a></li>
<li class="gnb_2depth"><a href="#">자작써글</a></li>
<li class="gnb_2depth"><a href="#">자작써글</a></li>
</ul>
</li>
<li class="gnb_1depth">
<a href="<?=$g4['url']?>/bbs/board.php?bo_table=liveloca">써글현장</a>
<ul>
<li class="gnb_2depth"><a href="#">써글현장</a></li>
<li class="gnb_2depth"><a href="#">써글현장</a></li>
<li class="gnb_2depth"><a href="#">써글현장</a></li>
<li class="gnb_2depth"><a href="#">써글현장</a></li>
</ul>
</li>
<li class="gnb_1depth">
<a href="<?=$g4['url']?>/bbs/board.php?bo_table=game">써글게임</a>
<ul>
<li class="gnb_2depth"><a href="#">써글게임</a></li>
<li class="gnb_2depth"><a href="#">써글게임</a></li>
<li class="gnb_2depth"><a href="#">써글게임</a></li>
<li class="gnb_2depth"><a href="#">써글게임</a></li>
</ul>
</li>
<li class="gnb_1depth">
<a href="<?=$g4['url']?>/bbs/board.php?bo_table=it">써글IT</a>
<ul>
<li class="gnb_2depth"><a href="#">써글IT</a></li>
<li class="gnb_2depth"><a href="#">써글IT</a></li>
<li class="gnb_2depth"><a href="#">써글IT</a></li>
<li class="gnb_2depth"><a href="#">써글IT</a></li>
</ul>
</li>
<li class="gnb_1depth">
<a href="<?=$g4['url']?>/bbs/board.php?bo_table=zzalbang">짤방대결</a>
<ul>
<li class="gnb_2depth"><a href="#">짤방대결</a></li>
<li class="gnb_2depth"><a href="#">짤방대결</a></li>
<li class="gnb_2depth"><a href="#">짤방대결</a></li>
<li class="gnb_2depth"><a href="#">짤방대결</a></li>
</ul>
</li>
<li class="gnb_1depth">
<a href="<?=$g4['url']?>/bbs/board.php?bo_table=goddess">여신대결</a>
<ul>
<li class="gnb_2depth"><a href="#">여신대결</a></li>
<li class="gnb_2depth"><a href="#">여신대결</a></li>
<li class="gnb_2depth"><a href="#">여신대결</a></li>
<li class="gnb_2depth"><a href="#">여신대결</a></li>
</ul>
</li>
<li class="gnb_1depth">
<a href="<?=$g4['url']?>/bbs/board.php?bo_table=sports">스포츠</a>
<ul>
<li class="gnb_2depth"><a href="#">스포츠</a></li>
<li class="gnb_2depth"><a href="#">스포츠</a></li>
<li class="gnb_2depth"><a href="#">스포츠</a></li>
<li class="gnb_2depth"><a href="#">스포츠</a></li>
</ul>
</li>
</ul>
</nav>
<hr>
<div id="wrapper">
<div id="lnb">
<?=outlogin('basic'); // 외부 로그인 ?>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1013 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1011 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 998 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 997 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 920 B

After

Width:  |  Height:  |  Size: 853 B

View File

@ -20,6 +20,80 @@ $(function() {
</script>
<![endif]-->
<script>
$(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_1depth > a');
$gnb.mouseover(function() {
if(mouse_event) {
$('.gnb_1depth').removeClass('gnb_1depth_over gnb_1depth_on');
$(this).parent().addClass('gnb_1depth_over gnb_1depth_on');
hide_menu = false;
}
});
$gnb.mouseout(function() {
hide_menu = true;
});
$('.gnb_1depth li').mouseover(function() {
hide_menu = false;
});
$('.gnb_1depth li').mouseout(function() {
hide_menu = true;
});
$gnb.focusin(function() {
$('.gnb_1depth').removeClass('gnb_1depth_over gnb_1depth_on');
$(this).parent().addClass('gnb_1depth_over gnb_1depth_on');
hide_menu = false;
});
$gnb.focusout(function() {
hide_menu = true;
});
$('.gnb_1depth ul a').focusin(function() {
$('.gnb_1depth').removeClass('gnb_1depth_over gnb_1depth_on');
var $gnb_li = $(this).closest('.gnb_1depth').addClass('gnb_1depth_over gnb_1depth_on');
hide_menu = false;
});
$('.gnb_1depth ul a').focusout(function() {
hide_menu = true;
});
$(document).click(function() {
if(hide_menu) {
$('.gnb_1depth').removeClass('gnb_1depth_over gnb_1depth_on');
}
});
$(document).focusin(function() {
if(hide_menu) {
$('.gnb_1depth').removeClass('gnb_1depth_over gnb_1depth_on');
}
});
});
</script>
</body>
</html>
<?