CSS MENU ĐẸP 001
<style type="text/css">
button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}/*# sourceMappingURL=normalize.min.css.map */
</style>
<style type="text/css">
@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
@import url(https://fonts.googleapis.com/css?family=Lato:300,400);
body {
font-size: 1em;
}
fieldset {
border: none;
padding: 0;
width: 100%;
}
fieldset legend {
display: none;
}
.reset-list {
padding-left: 0;
}
.reset-list > li {
list-style-type: none;
}
.main-navigation ul {
margin: 0;
}
.main-navigation ul:after {
clear: both;
content: '';
display: block;
height: 0;
}
.main-navigation ul li {
color: white;
display: block;
}
.main-navigation ul li a {
color: white;
font-family: 'Lato', Arial, Sans-Serif;
font-weight: 300;
}
.main-navigation > ul > li {
height: 6em;
overflow: visible;
padding-left: 6em;
position: relative;
}
.main-navigation > ul > li:before {
content: '';
display: block;
height: 6em;
left: 0;
position: absolute;
top: 0;
width: 6em;
}
.main-navigation > ul > li .wrapper {
box-sizing: border-box;
min-height: 6em;
overflow-x: hidden;
position: relative;
width: 0;
transition: width 600ms cubic-bezier(0.575, 0.41, 0.3, 1);
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.main-navigation > ul > li .wrapper:before, .main-navigation > ul > li .wrapper:after {
background: linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: .5em;
}
.main-navigation > ul > li .wrapper:after {
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
left: auto;
right: 0;
}
.main-navigation > ul > li .wrapper .inner {
box-sizing: border-box;
opacity: 0;
padding: 1.25em 1.5em;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
-webkit-transform: translate3d(-1.5em, 0, 0);
transform: translate3d(-1.5em, 0, 0);
transition: opacity 300ms 0 ease-out, -webkit-transform 300ms 0 ease-out;
transition: opacity 300ms 0 ease-out, transform 300ms 0 ease-out;
transition: opacity 300ms 0 ease-out, transform 300ms 0 ease-out, -webkit-transform 300ms 0 ease-out;
min-width: 25em;
width: 100%;
}
.main-navigation > ul > li.active .wrapper {
width: 100%;
}
.main-navigation > ul > li.active .wrapper .inner {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: opacity 300ms 200ms ease-out, -webkit-transform 300ms 200ms ease-out;
transition: opacity 300ms 200ms ease-out, transform 300ms 200ms ease-out;
transition: opacity 300ms 200ms ease-out, transform 300ms 200ms ease-out, -webkit-transform 300ms 200ms ease-out;
}
.main-navigation .sub-nav {
padding-top: .5em;
margin: 0 -.5em;
}
.main-navigation .sub-nav li {
display: block;
float: left;
padding-right: .5em;
}
.main-navigation .sub-nav li a {
background: transparent;
border-radius: .25em;
text-decoration: none;
padding: .25em .5em;
transition: background 350ms cubic-bezier(0.575, 0.41, 0.3, 1);
}
.main-navigation .sub-nav li a:active {
position: relative;
top: 1px;
}
.main-navigation h2 {
font-weight: 300;
margin: 0;
}
.main-navigation .fa {
cursor: pointer;
display: block;
left: 0;
outline: none;
padding: 2em 0;
position: absolute;
text-align: center;
top: 0;
transition: -webkit-transform 200ms cubic-bezier(0.575, 0.41, 0.3, 1);
transition: transform 200ms cubic-bezier(0.575, 0.41, 0.3, 1);
transition: transform 200ms cubic-bezier(0.575, 0.41, 0.3, 1), -webkit-transform 200ms cubic-bezier(0.575, 0.41, 0.3, 1);
width: 6em;
z-index: 5;
}
.main-navigation .fa:before {
font-size: 2em;
position: relative;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
z-index: 6;
}
.main-navigation .fa:hover {
-webkit-transform: translateY(-0.2em);
transform: translateY(-0.2em);
}
.main-navigation .btn .fa {
position: relative;
}
.main-navigation .profile:before,
.main-navigation .profile .sub-nav a:hover {
background: #c58aaa;
}
.main-navigation .profile .wrapper {
background: #ab7894;
}
.main-navigation .pictures:before,
.main-navigation .pictures .sub-nav a:hover {
background: #f58c79;
}
.main-navigation .pictures .wrapper {
background: #db7c6b;
}
.main-navigation .music:before,
.main-navigation .music .sub-nav a:hover {
background: #87d0df;
}
.main-navigation .music .wrapper {
background: #78b8c4;
}
.main-navigation .search:before,
.main-navigation .search .sub-nav a:hover {
background: #43bea1;
}
.main-navigation .search .wrapper {
background: #3aa68d;
}
@media screen and (min-width: 768px) {
.main-navigation.horizontal li {
float: left;
width: auto;
}
.main-navigation.horizontal li.active .wrapper {
width: 25em;
}
}
.quick-search label {
display: none;
}
.quick-search input {
background: #43bea1;
border: none;
border-radius: .25em;
box-sizing: border-box;
font-family: 'Lato', Arial, Sans-Serif;
font-size: 1.75em;
font-weight: 300;
font-style: normal;
outline: none;
margin-top: .25em;
padding: .25em 1.5em .25em .5em;
width: 100%;
}
.quick-search ::-webkit-input-placeholder {
/* WebKit browsers */
color: #b2e0d3;
}
.quick-search :-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #b2e0d3;
}
.quick-search ::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #b2e0d3;
}
.quick-search :-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #b2e0d3;
}
.quick-search .btn {
background: none;
border: none;
padding: 0;
position: absolute;
right: 2em;
top: 2.5em;
}
.quick-search .btn .fa {
padding: 0;
width: auto;
}
.quick-search .btn .fa:before {
font-size: 1.25em;
}
.quick-search .btn .fa:hover {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
</style>
<nav id="navigation" class="main-navigation horizontal">
<ul class="reset-list">
<li class="profile">
<span class="fa fa-user" tabindex="1" data-toggle="main-nav"></span>
<div class="wrapper">
<div class="inner">
<h2>Profile</h2>
<ul class="reset-list sub-nav">
<li>
<a href="#">What we do</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Clients</a>
</li>
</ul>
</div>
</div>
</li>
<li class="pictures">
<span class="fa fa-camera" tabindex="2" data-toggle="main-nav"></span>
<div class="wrapper">
<div class="inner">
<h2>Pictures</h2>
<ul class="reset-list sub-nav">
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Modules</a>
</li>
<li>
<a href="#">Galery</a>
</li>
<li>
<a href="#">Wallpapers</a>
</li>
</ul>
</div>
</div>
</li>
<li class="music">
<span class="fa fa-music" tabindex="3" data-toggle="main-nav"></span>
<div class="wrapper">
<div class="inner">
<h2>Music</h2>
<ul class="reset-list sub-nav">
<li>
<a href="#">Playlist</a>
</li>
<li>
<a href="#">Discover</a>
</li>
<li>
<a href="#">Radio</a>
</li>
<li>
<a href="#">Genre</a>
</li>
<li>
<a href="#">Live</a>
</li>
</ul>
</div>
</div>
</li>
<li class="search">
<span class="fa fa-search" tabindex="4" data-toggle="main-nav"></span>
<div class="wrapper">
<div class="inner">
<fieldset class="quick-search">
<legend>Search</legend>
<label for="qsearch">search</label>
<input type="text" name="search" id="qsearch" placeholder="Whats up dog?" />
<button type="button" class="btn btn-search">
<span class="fa fa-search"></span>
</button>
</fieldset>
</div>
</div>
</li>
</ul>
</nav>
<script >
"use strict";"object"!=typeof window.CP&&(window.CP={}),window.CP.PenTimer={programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{},_loopTimers:{},START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(o){this._loopExits[o]=!0},shouldStopLoop:function(o){if(this.programKilledSoStopMonitoring)return!0;if(this.programNoLongerBeingMonitored)return!1;if(this._loopExits[o])return!1;var t=this._getTime();if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=t,!1;var i=t-this.timeOfFirstCallToShouldStopLoop;if(i<this.START_MONITORING_AFTER)return!1;if(i>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;try{this._checkOnInfiniteLoop(o,t)}catch(o){return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}return!1},_sendErrorMessageToEditor:function(){try{if(this._shouldPostMessage()){var o={action:"infinite-loop",line:this._findAroundLineNumber()};parent.postMessage(JSON.stringify(o),"*")}else this._throwAnErrorToStopPen()}catch(o){this._throwAnErrorToStopPen()}},_shouldPostMessage:function(){return document.location.href.match(/boomerang/)},_throwAnErrorToStopPen:function(){throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io."},_findAroundLineNumber:function(){var o=new Error,t=0;if(o.stack){var i=o.stack.match(/boomerang\S+:(\d+):\d+/);i&&(t=i[1])}return t},_checkOnInfiniteLoop:function(o,t){if(!this._loopTimers[o])return this._loopTimers[o]=t,!1;var i=t-this._loopTimers[o];if(i>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop: "+o},_getTime:function(){return+new Date}},window.CP.shouldStopExecution=function(o){var t=window.CP.PenTimer.shouldStopLoop(o);return t===!0&&console.warn("[CodePen]: An infinite loop (or a loop taking too long) was detected, so we stopped its execution. Sorry!"),t},window.CP.exitedLoop=function(o){window.CP.PenTimer.exitedLoop(o)};
var toggles = document.querySelectorAll('[data-toggle]'),
i = toggles.length;
for (i;i--;) {if (window.CP.shouldStopExecution(2)){break;}
toggles[i].addEventListener('click', function(e) {
e.preventDefault();
var i = toggles.length;
for (i;i--;) {if (window.CP.shouldStopExecution(1)){break;}
toggles[i].parentNode.classList.remove('active');
}
window.CP.exitedLoop(1);
this.parentNode.classList.add('active');
}, false);
}
window.CP.exitedLoop(2);
//# sourceURL=pen.js
</script>
