實列教程 一款基于jquery和css3的響應(yīng)式二級導(dǎo)航菜單
發(fā)布時間:2014-11-13 10:32:44 作者:佚名
我要評論

之前分享了很多純css的導(dǎo)航菜單,今天介紹一款基于jquery和css3的響應(yīng)式二級導(dǎo)航菜單,這款導(dǎo)航是傳統(tǒng)的基于頂部,鼠標(biāo)經(jīng)過的時候顯示二級導(dǎo)航,還采用了當(dāng)前流行的響應(yīng)式設(shè)計。需要的朋友可以參考下
之前分享了很多純css的導(dǎo)航菜單,今天給大家分享一款基于jquery和css3的響應(yīng)式二級導(dǎo)航菜單,這款導(dǎo)航是傳統(tǒng)的基于頂部,鼠標(biāo)經(jīng)過的時候顯示二級導(dǎo)航,還采用了當(dāng)前流行的響應(yīng)式設(shè)計。效果圖如下:
實現(xiàn)的代碼。
html代碼:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <div id="header">
- <div class="logo">
- <a href="#">Responsive Nav</a>
- </div>
- <nav>
- <form class="search" action="search.php">
- <input name="q" placeholder="Search..." type="search">
- </form>
- <ul>
- <li><a href="">Home</a> </li>
- <li><a href="">About</a>
- <ul class="mega-dropdown">
- <li class="row">
- <ul class="mega-col">
- <li><a href="#">About</a></li>
- <li><a href="#">About</a></li>
- <li><a href="#">Contact</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
- <ul class="mega-col">
- <li><a href="#">Help</a></li>
- <li><a href="#">Pricing</a></li>
- <li><a href="#">Team</a></li>
- <li><a href="#">Services</a></li>
- </ul>
- <ul class="mega-col">
- <li><a href="#">Coming Soon</a></li>
- <li><a href="#">404 Error</a></li>
- <li><a href="#">Search</a></li>
- <li><a href="#">Author Page</a></li>
- </ul>
- <ul class="mega-col">
- <li><a href="#">Full Width</a></li>
- <li><a href="#">Right Column</a></li>
- <li><a href="#">Left Column</a></li>
- <li><a href="#">Maintenance</a></li>
- </ul>
- </li>
- </ul>
- </li>
- <li class="dropdown"><a href="">Contact</a>
- <ul>
- <li><a href="#">About Version</a></li>
- <li><a href="#">About Version</a></li>
- <li><a href="#">Contact Us</a></li>
- <li><a href="#">Contact Us</a></li>
- </ul>
- </li>
- <li><a href="">Portfolio</a> </li>
- <li><a href="">Team</a> </li>
- </ul>
- </nav>
- </div>
css3代碼:
CSS Code復(fù)制內(nèi)容到剪貼板
- *, *:before, *:after
- {
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- }
- body
- {
- background: #bdc3c7;
- line-height: 1.5;
- font-family: sans-serif;
- text-transform: uppercase;
- font-size: 16px;
- color: #fff;
- }
- a
- {
- text-decoration: none;
- color: #fff;
- }
- #header
- {
- background: #1E262D;
- width: 100%;
- position: relative;
- }
- #header:after
- {
- content: "";
- clear: both;
- display: block;
- }
- .search
- {
- float: rightright;
- padding: 30px;
- }
- input
- {
- border: none;
- padding: 10px;
- border-radius: 20px;
- }
- .logo
- {
- float: left;
- padding: 26px 0 26px;
- }
- .logo a
- {
- font-size: 28px;
- display: block;
- padding: 0 0 0 20px;
- }
- nav
- {
- float: rightright;
- }
- nav > ul
- {
- float: left;
- position: relative;
- }
- nav li
- {
- list-style: none;
- float: left;
- }
- nav .dropdown
- {
- position: relative;
- }
- nav li a
- {
- float: left;
- padding: 35px;
- }
- nav li a:hover
- {
- background: #2C3E50;
- }
- nav li ul
- {
- display: none;
- }
- nav li:hover ul
- {
- display: inline;
- }
- nav li li
- {
- float: none;
- }
- nav .dropdown ul
- {
- position: absolute;
- left: 0;
- top: 100%;
- background: #fff;
- padding: 20px 0;
- border-bottom: 3px solid #34495e;
- }
- nav .dropdown li
- {
- whitewhite-space: nowrap;
- }
- nav .dropdown li a
- {
- padding: 10px 35px;
- font-size: 13px;
- min-width: 200px;
- }
- nav .mega-dropdown
- {
- width: 100%;
- position: absolute;
- top: 100%;
- left: 0;
- background: #fff;
- overflow: hidden;
- padding: 20px 35px;
- border-bottom: 3px solid #34495e;
- }
- nav li li a
- {
- float: none;
- color: #333;
- display: block;
- padding: 8px 10px;
- border-radius: 3px;
- font-size: 13px;
- }
- nav li li a:hover
- {
- background: #bdc3c7;
- background: #FAFBFB;
- }
- .mega-col
- {
- width: 25%;
- float: left;
- }
- #menu-icon
- {
- position: absolute;
- rightright: 0;
- top: 50%;
- margin-top: -12px;
- margin-right: 30px;
- display: none;
- }
- #menu-icon span
- {
- border: 2px solid #fff;
- width: 30px;
- margin-bottom: 5px;
- display: block;
- -webkit-transition: all .2s;
- transition: all .1s;
- }
- @media only screen and (max-width: 1170px)
- {
- nav > ul > li > a
- {
- padding: 35px 15px;
- }
- }
- @media only screen and (min-width: 960px)
- {
- nav
- {
- display: block !important;
- }
- }
- @media only screen and (max-width: 959px)
- {
- nav
- {
- display: none;
- width: 100%;
- clear: both;
- float: none;
- max-height: 400px;
- overflow-y: scroll;
- }
- #menu-icon
- {
- display: inline;
- top: 45px;
- cursor: pointer;
- }
- #menu-icon.active .first
- {
- transform: rotate(45deg);
- -webkit-transform: rotate(45deg);
- margin-top: 10px;
- }
- #menu-icon.active .second
- {
- transform: rotate(135deg);
- -webkit-transform: rotate(135deg);
- position: relative;
- top: -9px;
- }
- #menu-icon.active .third
- {
- display: none;
- }
- .search
- {
- float: none;
- }
- .search input
- {
- width: 100%;
- }
- nav
- {
- padding: 10px;
- }
- nav ul
- {
- float: none;
- }
- nav li
- {
- float: none;
- }
- nav ul li a
- {
- float: none;
- padding: 8px;
- display: block;
- }
- #header nav ul ul
- {
- display: block;
- position: static;
- background: none;
- border: none;
- padding: 0;
- }
- #header nav a
- {
- color: #fff;
- padding: 8px;
- }
- #header nav a:hover
- {
- background: #fff;
- color: #333;
- border-radius: 3px;
- }
- #header nav ul li li a:before
- {
- content: "- ";
- }
- .mega-col
- {
- width: 100%;
- }
- }
js代碼:
JavaScript Code復(fù)制內(nèi)容到剪貼板
- $('#header').prepend('<div id="menu-icon"><span class="first"></span><span class="second"></span><span class="third"></span></div>');
- $('#menu-icon').on('click', function () {
- window.CP.stopExecutionOnTimeout(1);
- $('nav').slideToggle();
- $(this).toggleClass('active');
- }); //@ sourceURL=pen.js
以上就是基于jquery和css3的響應(yīng)式二級導(dǎo)航菜單,謝謝閱讀,希望能幫到大家,請繼續(xù)關(guān)注腳本之家,我們會努力分享更多優(yōu)秀的文章。
相關(guān)文章
純CSS+XHTML實現(xiàn)的二級導(dǎo)航菜單效果
這篇文章主要為大家介紹了純CSS+XHTML實現(xiàn)的二級導(dǎo)航菜單效果,通過簡單的鼠標(biāo)事件操作頁面元素樣式變換實現(xiàn)二級導(dǎo)航菜單的功能,非常簡單實用,需要的朋友可以參考下2015-09-25純CSS實現(xiàn)超簡單的二級下拉導(dǎo)航菜單代碼
這篇文章主要為大家介紹了純CSS實現(xiàn)超簡單的二級下拉導(dǎo)航菜單代碼,涉及css針對hover樣式設(shè)置的相關(guān)技巧,非常簡單實用,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-15一款純css3實現(xiàn)的豎形二級導(dǎo)航的實例教程
這篇文章主要為大家介紹了一款純css3實現(xiàn)的豎形二級導(dǎo)航的實例教程,這款導(dǎo)航菜單特色是可以是無限級。下面有代碼,不會的朋友可以過來借鑒學(xué)習(xí)哦2014-12-11一款純css實現(xiàn)的漂亮導(dǎo)航菜單(也適用于個人中心)
之前已經(jīng)分享很多css3實現(xiàn)的導(dǎo)航菜單,今天再分享一款純css實現(xiàn)的漂亮導(dǎo)航,這款也是適合放在個人中心。還帶來圖標(biāo),效果不錯。需要的朋友可以參考下2014-11-07- 這種效果在b2c商城經(jīng)常用的到,項目剛結(jié)束簡單分享下,感興趣的朋友可以參考下,希望可以幫助到你2013-05-02
- 這篇文章主要介紹了CSS3 二級導(dǎo)航的制作的示例的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-02