实列教程一款基于jquery和css3的响应式二级导航菜单

时间：2021-05-08

　　之前分享了很多纯css的导航菜单，今天给大家分享一款基于jquery和css3的响应式二级导航菜单，这款导航是传统的基于顶部，鼠标经过的时候显示二级导航，还采用了当前流行的响应式设计。效果图如下：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

<divid="header">

<divclass="logo">

<ahref="#">ResponsiveNav</a>

</div>

<nav>

<formclass="search"action="search.php">

<inputname="q"placeholder="Search..."type="search">

</form>

<ul>

<li><ahref="">About</a>

<ulclass="mega-dropdown">

<liclass="row">

<ulclass="mega-col">

<li><ahref="#">About</a></li>

<li><ahref="#">Contact</a></li>

</ul>

<ulclass="mega-col">

<li><ahref="#">Pricing</a></li>

<li><ahref="#">Services</a></li>

</ul>

<ulclass="mega-col">

<li><ahref="#">ComingSoon</a></li>

<li><ahref="#">404Error</a></li>

<li><ahref="#">Search</a></li>

<li><ahref="#">AuthorPage</a></li>

</ul>

<ulclass="mega-col">

<li><ahref="#">FullWidth</a></li>

<li><ahref="#">RightColumn</a></li>

<li><ahref="#">LeftColumn</a></li>

<li><ahref="#">Maintenance</a></li>

</ul>

</li>

</ul>

</li>

<liclass="dropdown"><ahref="">Contact</a>

<ul>

<li><ahref="#">AboutVersion</a></li>

<li><ahref="#">ContactUs</a></li>

</ul>

</li>

<li><ahref="">Portfolio</a></li>

</ul>

</nav>

</div>

　　css3代码：

CSS Code复制内容到剪贴板

*,*: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;

}

{

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:26px026px;

}

.logoa

{

font-size:28px;

display:block;

padding:00020px;

}

nav

{

float:rightright;

}

nav>ul

{

float:left;

position:relative;

}

navli

{

list-style:none;

float:left;

}

nav.dropdown

{

position:relative;

}

navlia

{

float:left;

padding:35px;

}

navlia:hover

{

background:#2C3E50;

}

navliul

{

display:none;

}

navli:hoverul

{

display:inline;

}

navlili

{

float:none;

}

nav.dropdownul

{

position:absolute;

left:0;

top:100%;

background:#fff;

padding:20px0;

border-bottom:3pxsolid#34495e;

}

nav.dropdownli

{

whitewhite-space:nowrap;

}

nav.dropdownlia

{

padding:10px35px;

font-size:13px;

min-width:200px;

}

nav.mega-dropdown

{

width:100%;

position:absolute;

top:100%;

left:0;

background:#fff;

overflow:hidden;

padding:20px35px;

border-bottom:3pxsolid#34495e;

}

navlilia

{

float:none;

color:#333;

display:block;

padding:8px10px;

border-radius:3px;

font-size:13px;

}

navlilia: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-iconspan

{

border:2pxsolid#fff;

width:30px;

margin-bottom:5px;

display:block;

-webkit-transition:all.2s;

transition:all.1s;

}

@mediaonlyscreenand(max-width:1170px)

{

nav>ul>li>a

{

padding:35px15px;

}

@mediaonlyscreenand(min-width:960px)

{

nav

{

display:block!important;

}

@mediaonlyscreenand(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;

}

.searchinput

{

width:100%;

}

nav

{

padding:10px;

}

navul

{

float:none;

}

navli

{

float:none;

}

navullia

{

float:none;

padding:8px;

display:block;

}

#headernavulul

{

display:block;

position:static;

background:none;

border:none;

padding:0;

}

#headernava

{

color:#fff;

padding:8px;

}

#headernava:hover

{

background:#fff;

color:#333;

border-radius:3px;

}

#headernavullilia:before

{

content:"-";

}

.mega-col

{

width:100%;

}

　　js代码：

JavaScript Code复制内容到剪贴板

$('#header').prepend('<divid="menu-icon"><spanclass="first"></span><spanclass="second"></span><spanclass="third"></span></div>');

$('#menu-icon').on('click',function(){

window.CP.stopExecutionOnTimeout(1);

$('nav').slideToggle();

$(this).toggleClass('active');

});//@sourceURL=pen.js

以上就是基于jquery和css3的响应式二级导航菜单，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。

实列教程 一款基于jquery和css3的响应式二级导航菜单

相关文章

jQuery+css实现的蓝色水平二级导航菜单效果代码

一款纯css3实现的竖形二级导航的实例教程

JS+CSS实现简单的二级下拉导航菜单效果

纯CSS实现超简单的二级下拉导航菜单代码

利用transform实现一个纯CSS弹出菜单的示例代码

实列教程一款基于jquery和css3的响应式二级导航菜单