Flat UI Menu Season-2

FLAT UI MENU SEASON-2 - 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.

UNTUK KODE CSS MODEL KE-1

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

UNTUK KODE HTML NYA

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

UNTUK KODE CSS MODEL KE-2

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

UNTUK KODE HTML NYA

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

Keterangan :
Untuk panduan pemasangan widget silakan klik INTRUKSI PEMASANGAN KODE

M. Alex Joenaedi

Saya hanyalah seorang Newbie di dunia Blogger, Aktivitas Ngeblog dilakukan hanya pada waktu senggang saja atau tidak teratur.

Share this post