目前位置: 首頁 > 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:


如何使用How to Use

<link rel="stylesheet" href="css/okayNav.css" media="screen">
<header id="header">
    <a class="site-logo" href="#">
       Logo 文字或圖片
    <nav role="navigation" id="nav-main" class="okayNav">
            <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>
</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();
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