一款由css3和jquery实现的响应式设计导航
2014年响应式设计成为设计主流。今天要给大家带来一款由css3和jquery实现的响应式设计导航。当显示器为pc时，导航为横条。当客户端为移动端时，呈现坚形导航。我们一起看下效果图：
实现的代码。
html代码：
<header>
<nav id='cssmenu'>
<div class="logo">
<a href="index.html">Responsive </a>
</div>
<div id="head-mobile">
</div>
<div class="button">
</div>
<ul>
<li class='active'><a href='#'>HOME</a></li>
<li><a href='#'>ABOUT</a></li>
<li><a href='#'>PRODUCTS</a>
<ul>
<li><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>BIO</a></li>
<li><a href='#'>VIDEO</a></li>
<li><a href='#'>GALLERY</a></li>
<li><a href='#'>CONTACT</a></li>
</ul>
</nav>
</header>
<section style='padding-top: 20px; font: bold 44px arial; color: #68D800; width: 970px;
margin: auto;'>
Responsive CSS3 Menu
<br />Dropdown + Submenus
<br />
Width Toggle Animation
<script src="/scripts/2bc/_gg_970_90.js" type="text/javascript"></script>
</section>
css3代码：
*
{
margin:;
padding:;
text-decoration: none;
}
body
{
background: #555;
}
header
{
position: relative;
width: 100%;
background: #333;
}
.logo
{
position: relative;
z-index:;
padding: 10px;
font: 18px verdana;
color: #6DDB07;
float: left;
width: 15%;
}
.logo a
{
color: #6DDB07;
}
nav
{
position: relative;
width: 980px;
margin: 0 auto;
}
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile
{
border:;
list-style: none;
line-height:;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after, #cssmenu > ul:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height:;
height:;
}
#cssmenu #head-mobile
{
display: none;
}
#cssmenu
{
font-family: sans-serif;
background: #333;
}
#cssmenu > ul > li
{
float: left;
}
#cssmenu > ul > li > a
{
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #ddd;
font-weight:;
}
#cssmenu > ul > li:hover > a, #cssmenu ul li.active a
{
color: #fff;
}
#cssmenu ul li.active:hover
{
background: #448D00;
}
#cssmenu > ul > li:hover, #cssmenu ul li.active
{
background: #448D00;
-webkit-transition: background .3s ease;
-ms-transition: background .3s ease;
transition: background .3s ease;
}
#cssmenu > ul > li.has-sub > a
{
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after
{
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before
{
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: '';
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before
{
top: 23px;
height:;
}
#cssmenu ul ul
{
position: absolute;
left: -9999px;
}
#cssmenu ul ul li
{
height:;
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu ul ul li:hover
{
}
#cssmenu li:hover > ul
{
left: auto;
}
#cssmenu li:hover > ul > li
{
height: 35px;
}
#cssmenu ul ul ul
{
margin-left: 100%;
top:;
}
#cssmenu ul ul li a
{
border-bottom: 1px solid rgba(150,150,150,0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #ddd;
font-weight:;
background: #333;
}
#cssmenu ul ul li:last-child > a, #cssmenu ul ul li.last-item > a
{
border-bottom:;
}
#cssmenu ul ul li:hover > a, #cssmenu ul ul li a:hover
{
color: #fff;
}
#cssmenu ul ul li.has-sub > a:after
{
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: '';
}
#cssmenu ul ul li.has-sub > a:before
{
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: '';
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu ul ul > li.has-sub:hover > a:before
{
top: 17px;
height:;
}
#cssmenu ul ul li.has-sub > a:hover, #cssmenu ul li.has-sub ul li.has-sub ul li > a:hover
{
background: #363636;
} @media screen and (max-width: 468px)
{
.logo
{
position: absolute;
top:;
left:;
width: 100%;
height: 46px;
text-align: center;
padding: 10px 0 0 0;
float: none;
}
.logo2
{
display: none;
}
nav
{
width: 100%;
}
#cssmenu
{
width: 100%;
}
#cssmenu ul
{
width: 100%;
display: none;
}
#cssmenu ul li
{
width: 100%;
border-top: 1px solid #444;
}
#cssmenu ul li:hover
{
background: #363636;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
#cssmenu ul ul li, #cssmenu li:hover > ul > li
{
height: auto;
}
#cssmenu ul li a, #cssmenu ul ul li a
{
width: 100%;
border-bottom:;
}
#cssmenu > ul > li
{
float: none;
}
#cssmenu ul ul li a
{
padding-left: 25px;
}
#cssmenu ul ul li a
{
background: #333 !important;
}
#cssmenu ul ul li a:hover
{
background: #363636 !important;
}
#cssmenu ul ul ul li a
{
padding-left: 35px;
}
#cssmenu ul ul li a
{
color: #ddd;
background: none;
}
#cssmenu ul ul li:hover > a, #cssmenu ul ul li.active > a
{
color: #fff;
}
#cssmenu ul ul, #cssmenu ul ul ul
{
position: relative;
left:;
width: 100%;
margin:;
text-align: left;
}
#cssmenu > ul > li.has-sub > a:after, #cssmenu > ul > li.has-sub > a:before, #cssmenu ul ul > li.has-sub > a:after, #cssmenu ul ul > li.has-sub > a:before
{
display: none;
}
#cssmenu #head-mobile
{
display: block;
padding: 23px;
color: #ddd;
font-size: 12px;
font-weight:;
}
.button
{
width: 55px;
height: 46px;
position: absolute;
right:;
top:;
cursor: pointer;
z-index:;
}
.button:after
{
position: absolute;
top: 22px;
right: 20px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
}
.button:before
{
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
position: absolute;
top: 16px;
right: 20px;
display: block;
height: 2px;
width: 20px;
background: #ddd;
content: '';
}
.button.menu-opened:after
{
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
top: 23px;
border:;
height: 2px;
width: 19px;
background: #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.button.menu-opened:before
{
top: 23px;
background: #fff;
width: 19px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button
{
position: absolute;
z-index:;
right:;
top:;
display: block;
border-left: 1px solid #444;
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu .submenu-button.submenu-opened
{
background: #262626;
}
#cssmenu ul ul .submenu-button
{
height: 34px;
width: 34px;
}
#cssmenu .submenu-button:after
{
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: '';
}
#cssmenu ul ul .submenu-button:after
{
top: 15px;
right: 13px;
}
#cssmenu .submenu-button.submenu-opened:after
{
background: #fff;
}
#cssmenu .submenu-button:before
{
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: '';
}
#cssmenu ul ul .submenu-button:before
{
top: 12px;
right: 16px;
}
#cssmenu .submenu-button.submenu-opened:before
{
display: none;
}
}
js代码：
(function ($) {
$.fn.menumaker = function (options) {
var cssmenu = $(this), settings = $.extend({
format: "dropdown",
sticky: false
}, options);
return this.each(function () {
$(this).find(".button").on('click', function () {
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.slideToggle().removeClass('open');
}
else {
mainmenu.slideToggle().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function () {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function () {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').slideToggle();
}
else {
$(this).siblings('ul').addClass('open').slideToggle();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function () {
if ($(window).width() > 468) {
cssmenu.find('ul').show();
}
if ($(window).width() <= 468) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function ($) {
$(document).ready(function () {
$("#cssmenu").menumaker({
format: "multitoggle"
});
});
})(jQuery);
//@ sourceURL=pen.js
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/7223
一款由css3和jquery实现的响应式设计导航的更多相关文章
- html5、css3及响应式设计入门
一.响应式设计的定义 将三种已有的开发技巧(弹性网格布局.弹性图片.媒体和媒体查询)整合起来,命名为响应式网页设计.真正的响应式设计方法不仅仅只是根据视口大小改变网页布局.相反,它是要从整体上颠覆我们 ...
- 一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览 源码下载 实现的代码. ...
- 一款由css3和jquery实现的卡面折叠式菜单
之前已经为大家介绍了好多导航菜单.今天为大家再带来一款由css3和jquery实现的卡片折叠式菜单.当菜单关闭的时候,有三维堆叠的效果.我们一起看下效果图: 在线预览 源码下载 html代码: & ...
- 一款基于css3和jquery实现的动画弹出层
今天给大家分享一款基于css3和jquery实现的动画弹出层.这款弹出层初页面面一个显示弹出层按钮.单击该按钮时,弹出层以非常炫的动画形式出现.弹出层有关闭按钮,单击半闭按钮,弹出层关闭.效果图如下: ...
- HTML5实践 -- 使用CSS3 Media Queries实现响应式设计
CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...
- HTML5、CSS3响应式设计——笔记
1.1.响应式网页设计 响应式网页设计(RWD,Responsive Web Design)这个术语,由伊桑·马科特(EthanMarcotte)提出.他在A List Apart 发表了一篇开创性的 ...
- CSS3知识点整理（五）----响应式设计及其他属性
介绍Media Queries与Responsive设计以及外轮廓属性.resize属性.CSS3生成内容等 学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺 ...
- 纯css3开发的响应式设计动画菜单（支持ie8）
这是一个响应式设计的菜单.单击列表图标,当你显示屏大小可以完全水平放下所有菜单项时,菜单水平显示(如图1).当你的显示屏不能水平放置所有菜单项时,菜单垂直显示(如图2). 而且显示的时候是以动画的型式 ...
- css3媒体查询实现网站响应式布局
最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...
随机推荐
- Linux下TCP最大连接数受限问题
一. 文件数限制修改1.用户级别查看Linux系统用户最大打开文件限制:# ulimit -n1024 (1) vi /etc/security/limits.confmysql soft nofil ...
- 转载：【微信小程序】 wx:if 与 hidden(隐藏元素)区别
条件渲染 顾名思义所谓的条件渲染,就是通过条件来判断是否需要渲染该代码块.条件渲染主要是用到wx:if 和 block wx:if 这两个,第一个相信好理解,第二个是在block里面进行条件渲染,这里 ...
- Ubuntu14.04 mount远程服务器上的目录
备忘用. 一,远程服务器设置: 1,在/etc/exports中添加如下配置: /home/xxx *(insecure,rw,sync,no_root_squash,anonuid=123,anon ...
- 使用padding代替高度实现背景图片高度按比例自适应
本篇文章由:http://xinpure.com/use-padding-instead-of-highly-adaptive-background-image-height-proportionat ...
- HDUOJ----4004The Frog's Games（二分+简单贪心）
The Frog's Games Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65768/65768 K (Java/Others) ...
- imageNamed 、imageWithContentsOfFile、 initWithContentsFile区别
[UIImage imageNamed:]只适合与UI界面中的贴图的读取,较大的资源文件应该尽量避免使用 用UIImage加载本地图像最常用的是下面三种: 1.用imageNamed方法 [UIIma ...
- 【Linux】撷取命令cut
什么是撷取命令啊?说穿了,就是将一段数据经过分析后,取出我们所想要的.或者是经由分析关键词,取得我们所想要的那一行! 不过,要注意的是,一般来说,撷取信息通常是针对『一行一行』来分析的,并不是整篇信息 ...
- pylot 学习笔记-使用
Console and Blocking Mode - Command Line Options: usage: run.py [options] args -a, --agents=NUM_AGEN ...
- JMeter学习笔记---性能分析
图像结果: 通过观察平均采样响应时长,用户可以直观地看到,随着并发压力的加大,以及性能测试时间的延长,系统性能所发生的变化.正常情况下,平均采样响应时长曲线应该是平滑的,并大致平行于图像下边界. 异常 ...
- Linux中断 - ARM中断处理过程
一.前言 本文主要以ARM体系结构下的中断处理为例,讲述整个中断处理过程中的硬件行为和软件动作.具体整个处理过程分成三个步骤来描述: 1.第二章描述了中断处理的准备过程 2.第三章描述了当发生中的时候 ...