Langsung ke konten utama

Cool CSS3 Navigation Menu

Cool CSS3 Navigation Menu - Postingan kali ini merupakan jawaban bagi salah satu sahabatku yang ingin membuat menu bar untuk template warna silver dengan sentuhan warna kuning didalamnya. Menu bar yang [OBC] share kali ini tampilan nya sangat sederhana dan mudah dalam menerapkannya " From Newbie To newbie " mungkin tepatnya seperti itu . Bagi brada yang kebetulan mempunyai tema template yang sama dan ingin menerapkan menu ini silahkan lihat dulu demonya dibawah ini .

Kustomisasi :

  • Masuk pada Edit Template 
  • Cari kode ]]></b:skin>  
  • Masukan kode dibawah tepat diatas kode ]]></b:skin>  
nav  {
 display: block;
 width: 100%;
 overflow: hidden;
}
nav ul {
 margin: 80px 0 20px 0;
 padding: .7em;
 float: left;
 list-style: none;
 background: #444;
 background: rgba(0,0,0,.2);
 -moz-border-radius: .5em;
 -webkit-border-radius: .5em;
 border-radius: .5em;  
 -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
 -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
 box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
}
nav li {
 float:left;
}
nav a {
 float:left;
 padding: .8em 1.5em;
 text-decoration: none;
 color: #555;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
 letter-spacing: 1px;
 text-transform: uppercase;
 border-width: 1px;
 border-style: solid;
 border-color: #fff #ccc #999 #eee;
 background: #c1c1c1;
 background: -moz-linear-gradient(#f5f5f5, #c1c1c1);
 background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1));
 background: -webkit-linear-gradient(#f5f5f5, #c1c1c1);
 background: -o-linear-gradient(#f5f5f5, #c1c1c1);
 background: -ms-linear-gradient(#f5f5f5, #c1c1c1);
 background: linear-gradient(#f5f5f5, #c1c1c1);          
 }
nav a:hover, nav a:focus {
 outline: 0;
 color: #fff;
 text-shadow: 0 1px 0 rgba(0,0,0,.2);
 background: #fac754;
 background: -moz-linear-gradient(#fac754, #f8ac00);
 background: -webkit-gradient(linear, left top, left bottom, from(#fac754), to(#f8ac00));
 background: -webkit-linear-gradient(#fac754, #f8ac00);
 background: -o-linear-gradient(#fac754, #f8ac00);
 background: -ms-linear-gradient(#fac754, #f8ac00);
 background: linear-gradient(#fac754, #f8ac00);
}
nav a:active {
 -moz-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
 -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
 box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}
nav li:first-child a {
 border-left: 0;
 -moz-border-radius: 4px 0 0 4px;
 -webkit-border-radius: 4px 0 0 4px;
 border-radius: 4px 0 0 4px;          
}
nav li:last-child a {
 border-right: 0;
 -moz-border-radius: 0 4px 4px 0;
 -webkit-border-radius: 0 4px 4px 0;
 border-radius: 0 4px 4px 0;          
}
Save dan lanjutkan untuk memasang kode HTML
  • Add Gadget / HTML Javascript 
  • Masukan kode dibawah ini  
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Categories</a></li>
        <li><a href="#">About</a></li>  
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
Sekarang lihat hasilnya .
Good Luck Brada...... !!!

Label:

Komentar

  1. UnknownJumat, Agustus 16, 2013

    Makin byk pilihan sekarang....enak nih kapan2 tinggal cari yg cocok

    BalasHapus
  2. dedetea66Jumat, Agustus 16, 2013

    mantapp Kang bro,,,,silahkan tuh yang pakai template silver bisa dicoba siapatahu cocok,dan semoga cocok pastinya,,,caranya juga angat mudah iyakan bro hehe

    BalasHapus
  3. Staff AdministratorSabtu, Agustus 17, 2013

    Kang Ruli emang baik banget ya buat tutorialnya hebring :)

    Kapan2 mau request jg deh :)

    BalasHapus
    Balasan
    1. Sopala MultapaSabtu, Agustus 17, 2013

      ehhmmm .. alhamdulillah sisebut baik ..
      boleh asal yang gampang mas hehe

      Hapus
    2. Boku no BlogSabtu, Agustus 17, 2013

      Saya juga lagi siapin requestnya Mas, hehehee..:)

      Hapus
    3. Sopala MultapaSabtu, Agustus 17, 2013

      requestnya lagu apaan mas .. kebetulan lagi siaran nih !!

      Hapus
  4. Boku no BlogSabtu, Agustus 17, 2013

    Jago banget Mas Ruly..

    BalasHapus
  5. dunia mayaMinggu, Agustus 18, 2013

    nyimak aja mas,,,,,
    belum paham,,,, hehehe

    BalasHapus
  6. AnonimSenin, Agustus 19, 2013

    benar2 cool. ^_^

    BalasHapus
  7. AnonimSelasa, September 03, 2013

    semua codenya menggunakan css3 ya,, maklum baru belajar hehe

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none
58 komentar
Baca selengkapnya

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b
62 komentar
Baca selengkapnya

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition:  
45 komentar
Baca selengkapnya