一款纯css3实现的响应式导航
之前为大家介绍了好几款响应式导航。今天再给大家带来一款纯css3实现的响应式导航。这款导航还有个响应式的搜索框。废话少说，直接上图：
实现的代码。
html代码：
<div class="navbar">
<a class="brand" href="#">
<img src="logo.png" /></a>
<!--MOBILE-->
<div class="navbar-mobile hidden-desktop">
<ul class=" nav">
<li class="mobile-dropdown"><i class="icon-reorder"></i>
<div class="mobile-menu">
<div class="menu-wrapper">
<ul class="mobile-nav">
<li><a href="http://www.w2bc.com">Home</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Add
Profile<span class="icon-angle-down"></span></a>
<ul class="dropdown-menu">
<li><a href="/twitter/oauth">Twitter</a></li>
<li><a href="/facebook/oauth">Facebook</a></li>
<li><a href="/googleplus/oauth">Google Plus</a></li>
<li><a href="/instagram/oauth">Instagram</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Create<span
class="icon-angle-down"></span></a>
<ul class="dropdown-menu">
<li><a href="/createStream">Create Stream</a></li>
<li><a href="/createAlbum">Create Album</a></li>
<li><a href="/createGroup">Create Group</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">View<span
class="icon-angle-down"></span></a>
<ul class="dropdown-menu">
<li><a href="/viewStreams">View Streams</a></li>
<li><a href="/viewAlbums">View Albums</a></li>
<li><a href="/viewGroups">View Groups</a></li>
</ul>
</li>
<li class="item"><a href="/schedule">Schedule</a></li>
</ul>
</div>
</div>
</li>
<li class="search">
<form class="navbar-search" _lpchecked="1">
<input type="search" class="search-query typeahead" data-provide="typeahead" placeholder="Search"></form>
<a class="icon-search"></a></li>
<li class="admin mobile-dropdown"><a class="dropdown-toggle" data-toggle="dropdown"
href="#"><i class="icon-user"></i>Mark Campbell <span class="icon-angle-down"></span>
</a>
<div class="mobile-admin">
<div class="admin-wrapper">
<ul class="mobile-nav">
<li><a href="http://www.w2bc.com">Profile</a></li>
<li><a href="/createEmail">Create Mass Email</a></li>
<li><a href="/adminDashboard">Admin Dashboard</a></li>
<li><a href="/manageUsers">Manage Users</a></li>
<li><a href="/manageEvents">Manage Streams</a></li>
<li><a href="/manageAlbums">Manage Albums</a></li>
<li><a href="/manageLocations">Manage Locations</a></li>
<li><a href="/manageSchedules">Manage Schedules</a></li>
<li><a href="/manageRoles">Manage Roles</a></li>
<li><a href="/managePermissions">Manage Permissions</a></li>
<li><a href="/managePermissionsRoles">Manage Permissions/Roles</a></li>
<li><a href="/changepassword">Change Password</a></li>
<li><a href="/logout">Log Out</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<!--MOBILE-->
<div class="navbar-inner visible-desktop">
<ul class="nav">
<li><a href="http://www.w2bc.com">Home</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Add
Profile<span class="icon-angle-down"></span></a>
<ul class="dropdown-menu">
<li><a href="http://www.w2bc.com">Twitter</a></li>
<li><a href="http://www.w2bc.com">Facebook</a></li>
<li><a href="http://www.w2bc.com">Google Plus</a></li>
<li><a href="http://www.w2bc.com">Instagram</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Create<span
class="icon-angle-down"></span></a>
<ul class="dropdown-menu">
<li><a href="/createStream">Create Stream</a></li>
<li><a href="/createAlbum">Create Album</a></li>
<li><a href="/createGroup">Create Group</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">View<span
class="icon-angle-down"></span></a>
<ul class="dropdown-menu">
<li><a href="/viewStreams">View Streams</a></li>
<li><a href="/viewAlbums">View Albums</a></li>
<li><a href="/viewGroups">View Groups</a></li>
</ul>
</li>
<li class="item"><a href="/schedule">Schedule</a></li>
<li class="search">
<form class="navbar-search" _lpchecked="1">
<input type="search" class="search-query typeahead" data-provide="typeahead" placeholder="Search"></form>
<a class="icon-search"></a></li>
<li class="admin"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-user">
</i>Mark Campbell <span class="icon-angle-down"></span></a>
<ul class="dropdown-menu">
<li><a href="/myProfile">Profile</a></li>
<li><a href="/createEmail">Create Mass Email</a></li>
<li><a href="/adminDashboard">Admin Dashboard</a></li>
<li><a href="/manageUsers">Manage Users</a></li>
<li><a href="/manageEvents">Manage Streams</a></li>
<li><a href="/manageAlbums">Manage Albums</a></li>
<li><a href="/manageLocations">Manage Locations</a></li>
<li><a href="/manageSchedules">Manage Schedules</a></li>
<li><a href="/manageRoles">Manage Roles</a></li>
<li><a href="/managePermissions">Manage Permissions</a></li>
<li><a href="/managePermissionsRoles">Manage Permissions/Roles</a></li>
<li><a href="/changepassword">Change Password</a></li>
<li><a href="/logout">Log Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
<p>
Work In Progress</p>
css3代码：
.visible-phone
{
display: none !important;
}
.visible-tablet
{
display: none !important;
}
.hidden-desktop
{
display: none !important;
}
.visible-desktop
{
display: inherit !important;
}
@media (min-width: 768px) and (max-width: 979px)
{
.hidden-desktop
{
display: inherit !important;
}
.visible-desktop
{
display: none !important;
}
.navbar
{
overflow: visible;
}
.visible-tablet
{
display: inherit !important;
}
.hidden-tablet
{
display: none !important;
}
}
@media (max-width: 767px)
{
.hidden-desktop
{
display: inherit !important;
}
.visible-desktop
{
display: none !important;
}
.navbar
{
overflow: visible;
}
.visible-phone
{
display: inherit !important;
}
.hidden-phone
{
display: none !important;
}
}
html
{
background: #4e4955;
}
body
{
padding:;
margin:;
font-family: 'Open Sans' , sans-serif;
font-weight:;
font-size: 1em;
}
*, *:after, *::before
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.navbar
{
position: relative;
z-index:;
width: 100%;
min-width: 520px;
height: 40px;
max-height: 40px;
background-color: #0b8c8c;
background: -webkit-gradient(linear, left top, left bottom, from(#0b8c8c), to(#0b8787));
background: -webkit-linear-gradient(top, #0b8c8c, #0b8787);
background: -moz-linear-gradient(top, #0b8c8c, #0b8787);
background: -ms-linear-gradient(top, #0b8c8c, #0b8787);
background: -o-linear-gradient(top, #0b8c8c, #0b8787);
border-bottom: 2px solid #0c9595;
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
}
.brand
{
float: left;
padding:;
margin:;
padding: 1px 5px;
display: inline-block;
}
.nav
{
padding:;
margin:;
display: block;
text-align: left;
}
.nav li
{
position: relative;
height: 40px;
color: white;
display: block;
list-style: none;
float: left;
padding: 6px 15px;
}
.nav li a
{
color: white;
text-decoration: none;
}
.nav li:first-child
{
border-left: 1px solid #097474;
}
.nav li:nth-last-child(3)
{
border-right: 1px solid #097474;
}
.nav li:hover, .active-drop
{
background: #0da4a4;
}
.nav li:hover ul.dropdown-menu, .active-drop ul.dropdown-menu
{
padding:;
margin:;
border: none;
background: #0b8c8c;
position: absolute;
z-index:;
top: 40px;
right:;
display: block;
width: 250px;
}
.nav li:hover ul.dropdown-menu li, .active-drop ul.dropdown-menu li
{
width: 100%;
line-height: 20px;
border: none;
margin:;
}
.nav li.admin
{
float: right;
}
.nav li.search
{
width: 45px;
border-right: 1px solid #097474;
overflow: hidden;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Chrome and Safari */
-moz-backface-visibility: hidden; /* Firefox */
-ms-backface-visibility: hidden; /* Internet Explorer */
}
.nav li.search:hover, .active-search
{
width: 250px;
}
.navbar-search
{
position: absolute;
top: 5px;
left: 45px;
}
.navbar-search input
{
font-weight:;
font-size: 1em;
border: none;
background: #075d5d;
color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.icon-angle-down
{
padding-left: 3px;
}
ul.dropdown-menu
{
display: none;
}
.mobile-dropdown
{
border-right: 1px solid #097474;
}
.mobile-dropdown:hover .mobile-menu
{
-webkit-transform: translate(0px, 0);
-moz-transform: translate(0px, 0);
-ms-transform: translate(0px, 0);
-o-transform: translate(0px, 0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Chrome and Safari */
-moz-backface-visibility: hidden; /* Firefox */
-ms-backface-visibility: hidden; /* Internet Explorer */
}
.mobile-dropdown:hover .mobile-admin
{
-webkit-transform: translate(0px, 0);
-moz-transform: translate(0px, 0);
-ms-transform: translate(0px, 0);
-o-transform: translate(0px, 0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Chrome and Safari */
-moz-backface-visibility: hidden; /* Firefox */
-ms-backface-visibility: hidden; /* Internet Explorer */
}
.mobile-admin
{
position: fixed;
top: 40px;
bottom:;
right: 0px;
display: block;
width: 280px;
background: #0b8c8c;
overflow: hidden;
-webkit-transform: translate(330px, 0);
-moz-transform: translate(330px, 0);
-ms-transform: translate(330px, 0);
-o-transform: translate(330px, 0);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
.mobile-menu
{
position: fixed;
top: 40px;
bottom:;
left: 0px;
display: block;
width: 300px;
background: #0b8c8c;
overflow: hidden;
-webkit-transform: translate(-330px, 0);
-moz-transform: translate(-330px, 0);
-ms-transform: translate(-330px, 0);
-o-transform: translate(-330px, 0);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
.admin-wrapper, .menu-wrapper
{
overflow-y: scroll;
width: 390px;
height: 100%;
}
.mobile-admin ul.mobile-nav, .mobile-menu ul.mobile-nav
{
position: relative;
right: 40px;
top:;
font-size: 1.2em;
font-weight:;
width: 100%;
border-left: 1px solid #0c9f9f;
}
.mobile-admin ul.mobile-nav li, .mobile-menu ul.mobile-nav li
{
border: none;
padding-bottom: 0px;
border-top: 1px solid #0c9f9f;
width: 100%;
position: relative;
height: 100%;
}
.mobile-menu ul.mobile-nav li:hover
{
background: #0c9595;
}
.mobile-menu ul.mobile-nav li:hover ul.dropdown-menu
{
padding:;
margin:;
border: none;
background: #0b8c8c;
position: relative;
z-index:;
top:;
right: 15px;
display: block;
width: 100%;
}
.mobile-menu ul.mobile-nav li:hover ul.dropdown-menu li
{
width: 100%;
line-height: inherit;
border-top: 1px solid #0c9f9f;
margin:;
}
.mobile-menu ul.mobile-nav li ul.dropdown-menu
{
display: block;
overflow: hidden;
height: 100%;
padding:;
margin:;
border: none;
background: #0c9595;
position: relative;
z-index:;
top:;
right: 15px;
width: 100%;
}
.mobile-menu ul.mobile-nav li ul.dropdown-menu li
{
font-size: .9em;
font-weight:;
display: inline-block;
width: 100%;
line-height: inherit;
border-top: 1px solid #0c9f9f;
margin:;
}
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/9521
一款纯css3实现的响应式导航的更多相关文章
- 纯css3开发的响应式设计动画菜单（支持ie8）
这是一个响应式设计的菜单.单击列表图标,当你显示屏大小可以完全水平放下所有菜单项时,菜单水平显示(如图1).当你的显示屏不能水平放置所有菜单项时,菜单垂直显示(如图2). 而且显示的时候是以动画的型式 ...
- 纯css3实现的竖形二级导航
之前为大家分享了好多导航菜单.今天给大家带来一款纯css3实现的竖形二级导航.这款导航菜单可以是无限级.一起看下效果图: 在线预览 源码下载 实现的代码. html代码: <div styl ...
- CSS3+Js制作的一款响应式导航条
今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大 ...
- 一款纯css3实现的条纹加载条
之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...
- 15款帮助你实现响应式导航的 jQuery 插件
对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...
- HTML5+CSS3实现的响应式垂直时间轴
<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name=&qu ...
- CSS3 之 flexbox 响应式的未来
CSS3 之 flexbox 响应式的未来 flexbox 伸缩盒模型 . flex: CSS3中一个重要的而且非常有用的属性,用来制作弹性布局是非常的方便而又强大. . flex布局:旨在提供一个更 ...
- 7款纯CSS3实现的炫酷动画应用
1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...
- 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的！
关于我们 | 时尚廊 ♦ 时尚廊,中国大陆地区首家以"Lounge"为概念的艺文空间 ♦ 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的! 7款纯CSS3实现的炫酷动画应用
随机推荐
- rabbitmq vhost
参考 http://blog.163.com/sky20081816@126/blog/static/16476102320107173226920/ http://blog.csdn.net/kev ...
- 前端工程精粹（一）：静态资源版本更新与缓存（附精简js的工具）
转自:http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1/ 每个参与过开 ...
- JavaScript-关于在IE下JavaScript的Stack overflow at line错误可能的原因
1.注册表混乱使基于IE内核的浏览器无法正常显示图片尤其是png格式, 修改一下注册表(网上搜) 2.重定义了系统的触发事件名称作为自定义函数名如: onclick / onsubmit… 都是系统 ...
- 1、简单的BackGroundWorker多线程时时刷新UI界面，并显示进度
BackGroundWorker是微软提供的封装好了的,非常实用的控件,我们可以在控件中将其拖到Winform之中,然后简单的系统生成代码式的编辑事件处理. 以下是,比较经典且简单的实用,后面的一篇较 ...
- IDEA的maven项目中静态文件编译的路径问题(未测试)
转自:http://www.cnblogs.com/signheart/p/6625126.html IDEA的maven项目中,默认源代码目录下的xml等资源文件并不会在编译的时候一块打包进clas ...
- GitHub搭建博客过程
1.参考 我的 Github 个人博客是怎样炼成的 http://www.jianshu.com/p/4fd3cb0a11da 到了第三节"三.使用 Jekyll 搭建个人博客"时 ...
- python学习笔记013——模块中的私有属性
1 私有属性的使用方式 在python中,没有类似private之类的关键字来声明私有方法或属性.若要声明其私有属性,语法规则为: 属性前加双下划线,属性后不加(双)下划线,如将属性name私有化,则 ...
- iOS接收null的处理方法
常常server返回的数据,有null,还有nil,假设在模型层不处理的话,到时候数据展现时,一定会崩啊,近期决心要解决问题,所以查看了一些资料后,有答案了: - (id) setNoNull:(id ...
- HTTP请求流程（二）----Telnet模拟HTTP请求
http://www.cnblogs.com/stg609/archive/2008/07/06/1237000.html 上一部分"流程简介", 我们大致了解了下HTTP请求的流 ...
- Oracle学习笔记之五sp1，PL/SQL之BULK COLLECT
Bulk Collect特性可以让我们在PL/SQL中能使用批查询,批查询在某些情况下能显著提高查询效率. BULK COLLECT 子句会批量检索结果,即一次性将结果集绑定到一个集合变量中,并从SQ ...