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="https://www.yisu.com">Home</a></li>
                                   <li class="dropdown"><a href="#" _fcksavedurl=""#"" _fcksavedurl=""#"" _fcksavedurl=""#"" 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="https://www.yisu.com">Profile</a></li>
                                   <li><a href="/createEmail">Create _fcksavedurl=""/createEmail">Create" _fcksavedurl=""/createEmail">Create" _fcksavedurl=""/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="https://www.yisu.com">Home</a></li>
                   <li class="dropdown"><a href="#" _fcksavedurl=""#"" _fcksavedurl=""#"" _fcksavedurl=""#"" class="dropdown-toggle" data-toggle="dropdown">Add
                       Profile<span class="icon-angle-down"></span></a>
                       <ul class="dropdown-menu">
                           <li><a href="https://www.yisu.com">Twitter</a></li>
                           <li><a href="https://www.yisu.com">Facebook</a></li>
                           <li><a href="https://www.yisu.com">Google Plus</a></li>
                           <li><a href="https://www.yisu.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: 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;
       }

关于css3中怎么实现响应式导航就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。