6-3 xotpl\nav.tpl

<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>