동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
그누보드5 배포판 사이트에서 사이트맵 만들기
그누보드5는 관리자 > 메뉴관리에서 자동으로 메뉴를 구성할 수 있습니다. 메뉴관리를 이용하여 초보자들도 쉽게 메뉴 구성을 할 수 있습니다.
이것을 이용하여 사이트맵을 만들어 보도록 하겠습니다.
HTML:
head.php 파일내 DB Table에서 메뉴 추출하는 코드를 이용합니다.
<div class="wrap-sitemap">
<?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 값 설정용
$menu_datas = array();
for ($i=0; $row=sql_fetch_array($result); $i++) {
$menu_datas[$i] = $row;
$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++) {
$menu_datas[$i]['sub'][$k] = $row2;
}
}
$i = 0;
foreach( $menu_datas as $row ){
if( empty($row) ) continue;
?>
<div <?php if($i%3==0){echo 'style="clear:left;"';}?> >
<div class="sitemap">
<h3><a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>"><?php echo $row['me_name'] ?></a></h3>
<?php
$k = 0;
foreach( (array) $row['sub'] as $row2 ){
if( empty($row2) ) continue;
if($k == 0)
echo '<ul>'.PHP_EOL;
?>
<li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><?php echo $row2['me_name'] ?></a></li>
<?php
$k++;
} //end foreach $row2
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</div>
</div>
<?php
$i++;
} //end foreach $row
?>
</div>
CSS:
CSS는 여러분의 사이트에 맞게 얼마든지 고쳐 사용하면 됩니다.
/*==============================================================
sitemap Start
==============================================================*/
.wrap-sitemap{
margin:50px; 0;
}
.sitemap{
border-left: 2px dashed #2976aa;
float:left;
width:33%;
margin-bottom:60px;
}
.sitemap h3{
padding: 15px;
margin-bottom: 10px;
font-size:1.1rem;
}
.sitemap ul{
position: relative;
padding-left: 25px;
}
.sitemap ul li{
min-height: 40px;
position: relative;
padding-left: 45px;
margin-bottom: 10px;
padding-top: 5px;
}
.sitemap ul li:last-child{
margin-bottom: 0;
}
.sitemap ul li:after{
content: "";
width: 25px;
left: -25px;
top: 40%;
position: absolute;
border-top: 2px dashed #2976aa;
}
.sitemap ul li a{
display: inline-block;
color: #2976aa;
font-weight: 500;
font-size: 15px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.sitemap ul li a:hover{
color: #000;
}
.sitemap ul li.child{
padding-left: 0;
padding-top: 0;
border-left: 2px dashed #2976aa;
}
.sitemap ul li.child h3{
padding-top: 0;
}
.sitemap ul li.child:before, .sitemap ul li.child:after{
display: none;
}
/*==============================================================
sitemap End
==============================================================*/
링크1 : 그누보드5 기본 배포판 적용
링크2 : 부트스트랩4 적용
등록된 댓글이 없습니다.