之前為大家介紹了好幾款響應式導航。今天再給大家帶來一款純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://***">Home</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">AddProfile<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<spanclass="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<spanclass="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://***">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://***">Home</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">AddProfile<span class="icon-angle-down"></span></a><ul class="dropdown-menu"><li><a href="http://***">Twitter</a></li><li><a href="http://***">Facebook</a></li><li><a href="http://***">Google Plus</a></li><li><a href="http://***">Instagram</a></li></ul></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Create<spanclass="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<spanclass="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: 0;margin: 0;font-family: 'Open Sans' , sans-serif;font-weight: 300;font-size: 1em;}*, *:after, *::before{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.navbar{position: relative;z-index: 99;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: 0;margin: 0;padding: 1px 5px;display: inline-block;}.nav{padding: 0;margin: 0;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: 0;margin: 0;border: none;background: #0b8c8c;position: absolute;z-index: 98;top: 40px;right: 0;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: 0;}.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: 300;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: 0;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: 0;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: 0;font-size: 1.2em;font-weight: 400;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: 0;margin: 0;border: none;background: #0b8c8c;position: relative;z-index: 98;top: 0;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: 0;}.mobile-menu ul.mobile-nav li ul.dropdown-menu{display: block;overflow: hidden;height: 100%;padding: 0;margin: 0;border: none;background: #0c9595;position: relative;z-index: 98;top: 0;right: 15px;width: 100%;}.mobile-menu ul.mobile-nav li ul.dropdown-menu li{font-size: .9em;font-weight: 300;display: inline-block;width: 100%;line-height: inherit;border-top: 1px solid #0c9f9f;margin: 0;}

注：本文愛編程原創文章，轉載請注明原文地址：http://***/Article/9521

總結

以上是生活随笔為你收集整理的一款纯css3实现的响应式导航的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。