css3中怎么實(shí)現(xiàn)響應(yīng)式導(dǎo)航

這篇文章將為大家詳細(xì)講解有關(guān)css3中怎么實(shí)現(xiàn)響應(yīng)式導(dǎo)航，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)紅古免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了千余家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

html代碼：

代碼如下:

<div class="navbar">
<a class="brand" href="#">
<img src="logo.png" /></a>

<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://muchs.cn">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="http://muchs.cn">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>

<div class="navbar-inner visible-desktop">
<ul class="nav">
<li><a href="http://muchs.cn">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="http://muchs.cn">Twitter</a></li>
<li><a href="http://muchs.cn">Facebook</a></li>
<li><a href="http://muchs.cn">Google Plus</a></li>
<li><a href="http://muchs.cn">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;
}

關(guān)于css3中怎么實(shí)現(xiàn)響應(yīng)式導(dǎo)航就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)頁題目：css3中怎么實(shí)現(xiàn)響應(yīng)式導(dǎo)航
瀏覽路徑：http://muchs.cn/article26/gpjdcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站建設(shè)、電子商務(wù)、軟件開發(fā)、標(biāo)簽優(yōu)化、網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容