目前位置: 首頁 > Boostrap4響應式模板DIy > 4、只有超出導航的連結才折疊的響應式導航

4、只有超出導航的連結才折疊的響應式導航 超大 稍大 微大

發表於: 2020-09-26 最後更新: 最後更新時間:2020-09-27

You know how navigations have only a desktop and a mobile state, right? I thought, "this might cost people money because it requires additional click for users to reach even the most important pages." This navigation aims at progressively collapsing navigation links into an off-screen navigation instead of doing it for all the links at the same time. Check out this example:

您知道的導航只有PC端顯示和移動端隱藏(折疊)的狀態嗎?當然不是,雖然這樣具有響應式效果,但是需要用戶點擊圖示才能訪問隱藏在選單中的頁面,有些不熟悉操作的用戶,極有可能因此錯過某些最重要的資訊,對網站經營者來說會是一個莫大的損失,雖然懶人包裡也有這個插件,不過那已經與懶人包整合過,不建議單獨使用。
okayNav只會將超出導航的選單連結折疊在小圖示內,而不是同時對所有連結進行折疊,就像本站的導航:

如何使用How to Use

這是上圖示例中使用的代碼
<link rel="stylesheet" href="css/okayNav.css" media="screen">
<header id="header">
    <a class="site-logo" href="#">
       Logo 文字或圖片
    </a>
    
    <nav role="navigation" id="nav-main" class="okayNav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contacts</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Testimonials</a></li>
        </ul>
    </nav>
</header><!-- /header -->
<script src="js/jquery.1.11.2.min.js"></script>
<script src="js/jquery.okayNav.min.js"></script>
<script type="text/javascript">
	var navigation = $('#nav-main').okayNav();
</script>
okayNav depends on jQuery. Tested with jQuery 1.10+ but should work with lower versions. The stylization of okayNav comes in a commented LESS and CSS. Browser Support okayNav supports IE9+, Firefox, Chrome. Transitions work in IE10+. Default options The following features will be implemented at the next versions: AMD/CommonJS support Multi-level navigation Option to prioritize certain nav items Option to hide or show all nav items instead of doing it progressively
您必須先 登入 註冊 才能下載附件!
對於本站文章有任何問題或建議歡迎到 : 討論區寫信給我
本站提供ECSHOP技術支援, 是網路開店最佳選擇 ,最後更新時間: 最後更新時間:2020-09-27