登入 註冊
 

如何自製下拉式導航選單
閱讀 1704 次 0 會員 與 1 訪客 正在閱讀本文。
十月 09, 2012, 05:23:32 下午
如果你的網站都已經完成了,不會再有大變動,那麼就可以嘗試將導航欄的選單改為下拉式的,除了能讓網站看起來更專業外,最主要能讓有限的空間容納更多元素,甚至加上小圖示,讓網站內容更豐富...

雖然這個方法很土,但對於不懂程式的人而言,就極為實用了,就算不會Dreamweaver也沒關係,只要能找到選單位置,怎麼做就看你的創意了,能讓選單顯示或隱藏就靠這段:
[xode]
<script type="text/javascript">
function sw_nav(obj,tag){
var subdivs = obj.getElementsByTa gName("DIV");
if(subdivs.length>0){
if(tag==1){
subdivs[0].style.display = "block";
} else {
subdivs[0].style.display = "none";
}
}
}
</script>
[/code]
把他加到page_header.lbi的第二行,選單的結構像這樣
代碼: [選擇]
        <li onMouseOver="sw_nav(this,1);" onMouseOut="sw_nav(this,0);">
            主選單名稱
            <div class="sub_menu">
                <a href="連結網址">
                如果要加入小圖示
                <img src="圖片網址" alt="" align="absmiddle" />
                子選單1名稱
                </a>
                .....
                <a href="連結網址">
                如果要加入小圖示
                <img src="圖片網址" alt="" align="absmiddle" />
                子選單N名稱
                </a>
            </div>
        </li>
ecshop本身的選單不要刪除,可以和自訂的選單混合使用,以default為例:
代碼: [選擇]
        <div id="mainNav" class="clearfix">
 <ul>
                <li>
                    <a href="../index.php" {if $navigator_list.config.index eq 1} class="cur"{/if}>
                        <span>{$lang.home}</span>
                    </a>
                </li>
                <!-- {foreach name=nav_middle_list from=$navigator_list.middle item=nav} -->
                    <li {if $nav.opennew eq 1}target="_blank" {/if}>
                        <a href="{$nav.url}" {if $nav.active eq 1} class="cur"{/if}>
                            <span>{$nav.name}</span>
                        </a>
                    </li>
                <!-- {/foreach} -->
        <li onMouseOver="sw_nav(this,1);" onMouseOut="sw_nav(this,0);">
            主選單名稱
            <div class="sub_menu">
                <a href="連結網址">
                如果要加入小圖示
                <img src="圖片網址" alt="" align="absmiddle" />
                子選單1名稱
                </a>
                .....
                <a href="連結網址">
                如果要加入小圖示
                <img src="圖片網址" alt="" align="absmiddle" />
                子選單N名稱
                </a>
            </div>
        </li>
                </ul>
            </div>
像這樣就可以隨心所欲加入選單,當然還要加入自己的CSS設定才能讓版面更美觀...

展示

記錄