首頁 > Boostrap 響應式模板製作 > 4、只有超出導航的連結才折疊的響應式導航

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

如果你對4、只有超出導航的連結才折疊的響應式導航有任何問題請到討論區發帖。