[1092] 前端技術入門
<link rel="stylesheet" type="text/css" media="all" href="<{xoImgUrl}>css/stellarnav.min.css">
<style>
/* 讓導覽列靠左 */
.stellarnav ul {
text-align: left;
}
/* 設定選項的文字顏色*/
.stellarnav li a {
color: #3c583d;
}
/* 選項滑過時顏色 */
.stellarnav a:hover {
color: #BBCCA8;
background: #3c583d;
}
/* 第二層選項的背景、框線及陰影設定 */
.stellarnav ul ul {
background: #fdfdf9;
border: 1px solid #A5BB8F;
box-shadow: 1px 1px 4px rgb(48, 49, 48, 0.8);
}
/* 手機模式下，預設導覽列外觀 */
.stellarnav.mobile ul {
background: rgba(165, 187, 143, 0.9);
box-shadow: none;
z-index: 10;
}
/* 手機模式下，第二層子選項外觀 */
.stellarnav.mobile ul ul {
background: rgba(185, 207, 163, 0.9);
}
/* 手機模式下，第三層子選項外觀 */
.stellarnav.mobile ul ul ul {
background: rgba(205, 227, 183, 0.9);
}
</style>
<div id="nav">
<div class="container my-container-width">
<div class="row">
<nav class="col">
<div class="stellarnav">
<ul>
<!-- 主選單 -->
<{if $auto_mainmenu}>
<li><a href="#">主選單</a>
<ul>
<{foreach from=$main_menu_var item=opt}>
<{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/menu.tpl"}>
<{/foreach}>
</ul>
</li>
<{/if}>
<!-- 自訂選單 -->
<{foreach from=$menu_var item=opt}>
<{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/menu.tpl"}>
<{/foreach}>
<!-- 會員選單 -->
<{if $xoops_isuser}>
<li class="float-xl-right">
<a href="#">
歡迎：<img src="<{$xoops_avatar}>" style="height: 24px;"> <{$xoops_name}>
</a>
<ul>
<!-- 管理員 -->
<{if $xoops_isadmin}>
<{foreach from=$admin_menu_var item=opt}>
<{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/menu.tpl"}>
<{/foreach}>
<{/if}>
<!-- 會員 -->
<{foreach from=$user_menu_var item=opt}>
<{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/menu.tpl"}>
<{/foreach}>
</ul>
</li>
<{/if}>
</ul>
</div>
</nav>
</div>
</div>
</div>
<script type="text/javascript" src="<{xoImgUrl}>js/stellarnav.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
jQuery('.stellarnav').stellarNav({
menuLabel: '選單',
position: 'left',
scrollbarFix: true
});
});
</script>