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

在线预览   源码下载

实现的代码。

html代码:

  <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代码:

      *, *:before, *:after
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin:;
padding:;
}
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: right;
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: right;
}
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:;
top: 100%;
background: #fff;
padding: 20px 0;
border-bottom: 3px solid #34495e;
}
nav .dropdown li
{
white-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:;
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;
right:;
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:;
}
#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代码:

  $('#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

注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/10569

一款基于jquery和css3的响应式二级导航菜单的更多相关文章

  1. 一款基于jquery带百分比的响应式进度加载条

    今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美 ...

  2. 一款基于jquery和css3的头像恶搞特效

    今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览   源码下载 实现的代 ...

  3. 一款基于jquery和css3实现的摩天轮式分享按钮

    之前分享了很多css3实现的按钮.今天要给大家带来一款基于jquery和css3实现的摩天轮式分享按钮.这款分享按钮页面底部有一个toggle按钮,单击该按钮,摩天轮按钮以动画的形式出现,各个分享按钮 ...

  4. 一款基于jquery滑动后固定于顶部的导航

    之前已为大家介绍了好多css3实现的导航菜单.今天分享一款基于jquery滑动后固定于顶部的导航.这款导航的特点是初始位于顶部下面一百个像素,当鼠标滚动时到下方,导航一直处于顶部.效果图如下: 在线预 ...

  5. 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

    这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   ...

  6. 10款基于jquery的web前端动画特效

    1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...

  7. 一款由css3和jquery实现的响应式设计导航

    2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览    ...

  8. 30款基于 jQuery & CSS3 的加载动画和进度条插件

    我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...

  9. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

随机推荐

  1. 修改wamp apache 默认端口

    目标:新配置一个虚拟主机,要求端口为8080,但要保证原来的80端口仍可用 1.修改 httpd.conf 开启vhost文件支持 2.httpd-vhosts.conf 中增加,记得把原来的内容全部 ...

  2. 关于 while(1)和for(;;)效率问题的一点想法

    这几天看到好友的文章关于while(1)和for(;;)效率的讨论,手痒说了两句.回头一寻思,自己也仅仅是判断.没有做不论什么实验,我们就看看这两种写法究竟有什么差别: 实验环境:IAR EWARM ...

  3. Java菜鸟入坑学习要点

    一.掌握静态方法和属性 静态方法和属性用于描述某一类对象群体的特征,而不是单个对象的特征.Java中大量应用了静态方法和属性,这是一个通常的技巧.但是这种技巧在很多语言中不被频繁地使用.理解静态方法和 ...

  4. Java BigDecimal进行精确计算

    前言 float和double类型的主要设计目标是为了科学计算和工程计算.他们执行二进制浮点运算,这是为了在广域数值范围上提供较为精确的快速近似计算而精心设计的.然而,它们没有提供完全精确的结果,所以 ...

  5. Swift代理造成内存泄漏的解决办法

    在swift中,使用代理 ,可能很多人会这样实现: .首先定义一份协议. protocol ToolProrocol{ //代理方法 func didRecieveResults(result:Int ...

  6. 马老师 LNMP生产环境Web架构 笔记

    http协议和缓存原理.多路IO模型: MIME机制,Multipurpose Internet Mail Extensions,多用户互联网邮件扩展.MIME使用一个简单的字符串组成,最初是为了标识 ...

  7. Android 中发送短信

    import android.net.Uri; //调用Android系统API发送短信 Uri uri = Uri.parse("smsto:" + strSmsPhone_va ...

  8. 经纬度 lbs 笔记

      string Lat = objRequest.HeadLat.ToString();   纬度                 string Lng = objRequest.HeadLng.T ...

  9. VC获得window操作系统版本号, 获取操作系统位数

    原文链接: http://www.greensoftcode.net/techntxt/2014315195331643021849 #include <Windows.h>include ...

  10. Python2 字典 has_key() 方法

    描述 Python2 字典 has_key() 方法用于判断键(key)是否存在于字典(D)中,如果键在字典中返回True,否则返回False. 官方文档推荐用 in 操作符,因为它更短更通俗易懂.h ...