FLAT UI MENU SEASON COOL - Adalah sebuah Menu untuk Web/Blog dengan design Flat UI, Nama Flat Design berasal dari bentuk yang digunakan. ...
FLAT UI MENU SEASON COOL - Adalah sebuah Menu untuk Web/Blog dengan design Flat UI, Nama Flat Design berasal dari bentuk yang digunakan. Flat Design atau Desain datar mempekerjakan gaya dua dimensi yang berbeda serta datar.
Konsep ini bekerja tanpa perhiasan atau bayangan, bevels, embossing, gradien atau alat lain yang menambah depth. Setiap elemen atau kotak, dari frame gambar untuk tombol untuk alat navigasi, dan bayangan.
Pada kesempatan ini Kolom Tutorial™ akan menyajikan kepada sobat blogger dua buah menu dengan menggunakana design Flat UI yakni Flat Ui Menu Dalam bentuk Kotak dan Animation Flatly Menu.
Koding untuk Model Pertama:-
@import url(http://weloveiconfonts.com/api/?family=typicons);
@import url(http://fonts.googleapis.com/css?family=Raleway:400,100);
a {
text-decoration: none;
}
.wrapper {
margin: auto;
width: 850px;
}
span {
font-family: 'Typicons', sans-serif;
font-size: 66px;
position: relative;
top: 50px;
left: 42px;
color: #f2f2f2;
}
.home, .about, .pt, .contact {
width: 150px;
height: 150px;
position: relative;
bottom: 71px;
line-height: 250px;
text-align: center;
font-family: 'Raleway', serif;
font-size: 20px;
text-transform: uppercase;
}
.home {
color: #3D8EB9
}
.home:hover {
color: #003343;
}
.about {
color: #71BA51
}
.about:hover {
color: #003343;
}
.pt {
color: #FEC606
}
.pt:hover {
color: #003343;
}
.contact {
color: #E75926
}
.contact:hover {
color: #003343;
}
li {
list-style: none;
display: inline-block;
margin: 20px 20px;
cursor: pointer;
transition: transform 100ms ease;
transform: scale(1);
}
li:hover {
transform: scale(1.2);
}
li:nth-child(1),
li:nth-child(2),
li:nth-child(3),
li:nth-child(4) {
width: 150px;
height: 150px;
border-radius: 4px;
}
li:nth-child(1) {
background-color: #3D8EB9;
}
li:nth-child(2) {
background-color: #71BA51;
}
li:nth-child(3) {
background-color: #FEC606;
}
li:nth-child(4) {
background-color: #E75926;
}
<nav class="wrapper">
<ul>
<li><a href="#"><span class="typicons-home"></span></a><div class="home">Home</div></li>
<li><a href="#"><span class="typicons-user"></span></a><div class="about">About</div></li>
<li><a href="#"><span class="typicons-grid"></span></a><div class="pt">Portfolio</div></li>
<li><a href="#"><span class="typicons-mail"></span></a><div class="contact">Contact</div></li>
</ul>
</nav>
Koding untuk Model Kedua:-
@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://fonts.googleapis.com/css?family=Alef);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif }
*{-webkit-font-smoothing:antialiased;}
#nav {
width: 180px;
margin: 100px auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
width: 180px;
}
ul a {
display: block;
width: 100%;
height: 44px;
background: #E7533C;
color: #fafafa;
text-decoration: none;
text-align: left;
line-height: 2;
padding-left: 10px;
font-size: 1.4em;
border-bottom: 3px solid #cc4531;
}
ul a span {
float: right;
display: block;
margin: 0;
width: 44px;
height: 44px;
font-size: 1.4em;
text-align: center;
line-height: 1.5;
}
ul li {
width: 0;
height: 0px;
background: #E7533C;
clear: both;
}
ul li a {
color: transparent;
height: 0;
/*box-shadow*/
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
box-shadow: 0 2px 2px rgba(0,0,0,.1);
padding-left: 0;
}
ul li a span {
font-size: .9em;
line-height: 2.4;
}
ul:hover li a { padding-left: 10px }
ul:hover span { background: #cc4531 }
ul:hover li span { background: transparent }
ul li:hover > a { background: #cc4531 }
ul li:hover {
margin-top: 8px;
margin-bottom: 8px;
}
ul li:nth-child(1) {
transition: all 0s ease;
}
ul li:nth-child(2) {
transition: all 0s ease;
}
ul li:nth-child(3) {
transition: all 0s ease;
}
ul li:nth-child(4) {
transition: all 0s ease;
}
ul a:hover > span { background: #cc4531 }
ul:hover > li a {
color: #fff;
height: 44px;
}
ul li a:hover { border-bottom: 3px solid #9d3323 }
ul:hover li:nth-child(2) {
width: 100%;
height: 44px;
transition: all .1s ease;
}
ul:hover li:nth-child(3) {
width: 100%;
height: 44px;
transition: all .1s ease .1s;
}
ul:hover li:nth-child(4) {
width: 100%;
height: 44px;
transition: all .1s ease .2s;
}
ul:hover li:nth-child(5) {
width: 100%;
height: 44px;
transition: all .1s ease .3s;
}
<div id="nav">
<ul>
<a href="#">Menu<span class="entypo-right-open-big"></span></a>
<li><a href="#">Profile <span class="entypo-user"></span></a></li>
<li><a href="#">Media <span class="entypo-video"></span></a></li>
<li><a href="#">Games <span class="entypo-rocket"></span></a></li>
<li><a href="#">Friends <span class="entypo-users"></span></a></li>
</ul>
</div>
CopyRight : Joens-Tutorial
