一款纯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