A responsive navigation implemented in pure css3_html/css_WEB-ITnose

I have introduced several responsive navigations to you before. Today I will bring you a responsive navigation implemented in pure CSS3. This navigation also has a responsive search box. Without further ado, let’s go directly to the picture:

Online preview Source code download

Implemented code.

html code:

 <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 code:

  .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;        }