Cara Membuat FLAT UI MENU SEASON COOL 2 Style

randomposts

FLAT UI MENU SEASON COOL  - Adalah sebuah Menu untuk Web/Blog dengan design Flat UI, Nama Flat Design  berasal dari bentuk yang digunakan. ...

Membuat Tampilan 2 Kolom di Homepage (Halaman Awal) Blog

Cara Membuat Teks Seperti MENGETIK SENDIRI

Cara Membuat Animasi Loading Page Blog dengan jQuery

Cara Membuat Loading Animasi Log In Identifikasi

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.

DEMO FLAT UI MENU KOTAK

DEMO ANIMATION FALTLY MENU

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

CSS ( Isi Dengan Teliti ): Isi Coding Tersebut Pada Blog Anda

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

HTML ( Isi Dengan Teliti ): Isi Coding Tersebut Pada Blog Anda

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

CSS ( ISi dengan Teliti ): Isi Coding Tersebut Pada Blog Anda

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

HTML ( Isi Dengan Teliti ): Isi Coding Tersebut Pada Blog Anda

<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