只有超出導航的連結才折疊的響應式導航

 

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>

這個外掛需要依賴JQUERY，因此在載入jquery.okayNav.min.js之前，必須先載入JQUERY庫，在下一版也會有多層選單的功能...

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