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.

flat ui menu, ui, flat, flat menu, tutorial blog



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

Berlangganan update artikel terbaru via email:

48 Responses to "Flat UI Menu Season-2"

  1. Keren Mas Alex,,,BTW Koleksi tutor "Munu" di KT banyak juga yah Mas,jadi semuanya kepengen dicoba hehehe

    ReplyDelete
  2. keren nih mas, apalagi buat dark template.. cucokk bangett :D
    hohoho

    ReplyDelete
    Replies
    1. hahhhahha bisa aja ni mas,,, thank kunjungannya mas

      Delete
  3. Keren nih mas tutorial Flat UI Menu Season-2nya... pengen nyoba nanti kalau pas ada waktu... makasih udah berbagi, oh ya nggak bikin berat kan mas?

    ReplyDelete
    Replies
    1. sama2 mas, terimakasih kembali atas kunjungannya

      Delete
  4. Mantep banget duah...
    kalo urusan tutorial seputar blog mah gak usah jauh2 cukup mampir diblog kang Alex aja deh....Lengkap banget soalnya...
    kudu dicobain nie.....

    ReplyDelete
    Replies
    1. bisa aja mas thank promonya kwkwkkwkwkkw,

      thank mas udah nyempetin berkunjung

      Delete
  5. keren pisan euy... cuma mamang belum paham, izin nyimak dulu ah

    ReplyDelete
    Replies
    1. mangga mang, haturnuhun kasumpingana salam baktos

      Delete
  6. mantapz sob ... jadi makin berwarnaaaa - colorfull hehe

    ReplyDelete
  7. Nice blog
    thanks infonya

    visit balik yaa
    http://tasnapolyshop.blogspot.com

    ReplyDelete
  8. owh tampilanya jd kayak metro ui, nice kang, makasi ya tutorialnya

    ReplyDelete
  9. cocok buat template sy ndak ya mas :)

    ReplyDelete
    Replies
    1. ya tergantung selera aja mas, tapi kalau koding pertama kayanya lebih oke kalau pake tag kondisional atau tampilan homepage yang berbeda gitu.
      terimakasih banyak kunjungannya mas.

      Delete
    2. always cocok mas bud hihi ( nimbal )

      Delete
    3. @mas Alex: oke mas...trims banget ya buat tutor sama pencerahannya... :)

      @kang Ruly : hehe...nimbal ntu...sejenis makanan ya kang... :D

      Delete
  10. wah ini benar benar mantep dan keren sobat...
    terima kasih sudah berbagi

    ReplyDelete
    Replies
    1. sama2 mas terimakasih kembali atas kunjungannya mas.

      Delete
  11. selamat malam ms alex mf br sempet berkunjung,,,, keren banget dah tutornya :)

    ReplyDelete
    Replies
    1. syukur alhamdulillah dapat info terbru lagi
      saya juga ikut mengucapkan selamat malam mas alex, terima kasih sudah berbagi

      Delete
    2. sama-sama mas, saya juga ngucapin terimakasih banyak mas berdua sudah nyempatin mampir dimari

      Delete
  12. keren... panjang amat kodenya .

    ReplyDelete
  13. mantep nih bang, banyak aku liat kreasinya di cssdeck

    ReplyDelete
    Replies
    1. Thank mas kunjungannya,
      Di cssdeck kebanyakan bukan asli karya ane mas, tapi hasil sedikit modifikasi dari karya orang lain mas.

      Delete
  14. penuh kreatifitas, sngat mnarik, thanks mas

    ReplyDelete
  15. wah jos gandos kang alex tutorialnya,,,mf nih baru bs BW :D

    ReplyDelete
  16. Model yg kedua keren banget mas. Selalu ada yg baru di blog ini :D

    ReplyDelete
  17. duh kerenya medel kedua
    saya ko sangat suka

    ReplyDelete
  18. wach mantar mas admin pasti saya coba... :)

    ReplyDelete
  19. ijin bookmark dulu sob... :)

    ReplyDelete
  20. woow keyeen mas Jun..jadi ngiler klu ada yang warna warni gini

    ReplyDelete
  21. wew, keren mas,
    di coba dulu... :D

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel