HTML5 and CSS3 UI Menu

HTML5 and CSS3 UI Menu - Setelah sebelumnya pernah membahas tentang pembuatan  Menu dengan HTML5 dan CSS3 kali ini masih erat hubunganya dengan artikel yang bersangkutan karena masih menggunakan dua media yang sedang trend saat ini yakni HTML5 dan CSS3.

Pembuatan menu seperti ini selain dari indah atau enak dipandang juga akan meloloskan Web/Blog dari Validator HTML Serta VValidator CSS  disini juga disediakan lima pilihan warna dan silakan disesuaikan dengan Web/Blog sobat, untuk freview dari menu ini sebagai berikut :

html5 menu, css3 menu, ui menu html5 and css3 menu


Untuk Langkah penerapannya:

Sama dengan penerapan widget-widget menu lainnya yang ada di blog Kolom Tutorial™, dan silakan di kopi aja kodingnya :

UNTUK KODE HTML WARNA BIRU
<nav class="blue">
  <li><a href="#">Alex</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Work</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
  <section class="main">
	 <form class="search" method="post" action="index.html" >
		 <input type="text" name="q" placeholder="Search..." />
	 </form>
</section>
</nav>

UNTUK KODE HTML WARNA HIJAU TUA
 <nav class="turq">
  <li><a href="#">Alex</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Work</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
  <section class="main">
	 <form class="search" method="post" action="index.html" >
		 <input type="text" name="q" placeholder="Search..." />
	 </form>
</section>
</nav>

UNTUK KODE HTML WARNA ABU-ABU
 <nav class="dark">
  <li><a href="#">Alex</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Work</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
  <section class="main">
	 <form class="search" method="post" action="index.html" >
		 <input type="text" name="q" placeholder="Search..." />
	 </form>
</section>
</nav> 

UNTUK KODE HTML WARNA ORANGE
 <nav class="sun">
  <li><a href="#">Alex</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Work</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
  <section class="main">
	 <form class="search" method="post" action="index.html" >
		 <input type="text" name="q" placeholder="Search..." />
	 </form>
</section>
</nav> 

UNTUK KODE HTML WARNA MERAH
 <nav class="red">
  <li><a href="#">Alex</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Work</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
  <section class="main">
	 <form class="search" method="post" action="index.html" >
		 <input type="text" name="q" placeholder="Search..." />
	 </form>
</section>
</nav> 


UNTUK KODE CSS NYA
/* Main Colors
===============================*/
.turq {background:#16A085;}
.turq:checked {background:#1ABC9C;}

.blue {background:#2980B9;}
.blue:checked {background:#3498DB;}

.yellow {background:#eeca5a;}
.yellow:checked {background:#ffdc70;}

.red {background:#C0392B;}
.red:checked {background:#E74C3C;}

.dark {background:#2C3E50;}
.dark:checked {background:#34495E;}

.sun {background:#F39C12;}
.sun:checked {background:#F1C40F;}

/* CSS Menus
===============================*/
nav {
  position:relative;
  width:700px;
  margin:30px auto;
  margin-bottom:40px;
  -webkit-border-radius:6px;
     -moz-border-radius:6px;
          border-radius:6px;
  padding:15px;
  text-align:left;
}

li {
  list-style:none;
  color:#fff;
  font-weight:600;
  display:inline-block;
}

li > a, a:visited {
  padding:15px;
  color:#fff;
  text-decoration:none;
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}

li > a:hover {
  background:rgba(0, 0, 0, 0.1);
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}


/* CSS Search
===============================*/
.search {
  position:absolute;
  right:9px;
  top:7px;
  padding:5px;
  padding-left:15px;
}

.search input {
    height: 26px;
    width: 100%;
    padding: 0 12px 0 25px;
    background: white url("http://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat;
    border-width: 1px;
    border-style: solid;
    border-color: #a8acbc #babdcc #c0c3d2;
    border-radius: 13px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
    -moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
    -ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
    -o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
    box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}

.search input:focus {
    outline: none;
    border-color: #66b1ee;
    -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}

.search input:focus + .results { display: block }
-
:-moz-placeholder {
    color: #a7aabc;
    font-weight: 200;
}

::-webkit-input-placeholder {
    color: #a7aabc;
    font-weight: 200;
}

.lt-ie9 .search input { line-height: 26px }

Catatan :
Jika sobat ingin menggabungkan kedua kode diatas menjadi satu caranya :
 <style type='text/css'>

MASUKAN CODE CSS DISINI

</style>

DAN MASUKAN KODE HTML DISINI
Demikian Artikel tentang pembuatan HTML5 and CSS3 UI Menu Semoga dapat membantu, Salam silaturahmi.

Berlangganan update artikel terbaru via email:

51 Responses to "HTML5 and CSS3 UI Menu"

  1. untuk yg bagian searchnya kok gk bisa ea?

    ReplyDelete
    Replies
    1. Maaf gan tadi ane ada keliru sedikit, tapi sekarang semua kodenya udah diperbaiki. thank udah ngasih tau ada kesalahan.

      Delete
  2. cakep cakep :D..

    bikin widget translate yang ringan dan unik dong.. :) .

    ReplyDelete
    Replies
    1. Udah Bnyak misss, tapi insya Allah dicoba

      Delete
    2. coba kedo ini, tambahkan aja ke widget :
      <script>function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'auto'});}</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

      Delete
    3. udah banyak ya tapi jelek gak sesuai template dan berat..

      itu demonya gimana.

      Delete
  3. Mas saya ada masalah nie sedikit nie mengenai oprek template. Saya sudah mencoba beberapa tutorial pasang related article di blog saya, tapi tidak satupun yang berhasil, framenya muncul, tapi isinya tidak, ada tulisan undefined. Ada solusi Mas ??

    ReplyDelete
    Replies
    1. Coba bikin dengan menggunakan pihak ketiga seperti LinkWithin

      Delete
    2. atau mas bisa cek penempatan java script takutnya salah, letakan dibawah kode :
      <data:post.body/> yang kedua jika lebih dari satu, atau jika tidak ada kode tersebut dibawah kode :
      <p><data:post.body/></p>
      atau dibawah kode :
      <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

      Delete
  4. mantaabb banget dah ini mas , warna warni sesuai seleraa :)

    ReplyDelete
  5. wah bagus sekali sob, apalagi dengan banyak variasi warna...

    ReplyDelete
  6. articles of interest. indeed
    maybe I would often visit here.
    o it I also got the info:
    Ways Assigned the Money from the Internet

    ReplyDelete
  7. Bang Alexxxxxxxxxxxxx..izin bang mau aku save buat aku coba diblog yang satunya ya...hahahhayyyy

    ReplyDelete
    Replies
    1. welehhhh welehhh jadi malu ni sang master datang berkunjung, terimakasih mas

      Delete
  8. Mas Alex mau tanya dikit nih, waktu lalu menu blog saya ada sub menunya, tapi beberapa hari yang lalu tiba-tiba submenunya nggak bisa keluar, jadi kalau menunya diklik sama kaya home, kira-kira masalahnya dimana ya mas? Karena gak bisa jadi submenunya saya hilangin aja sekalian. tapi masih penasaran mas....

    ReplyDelete
    Replies
    1. kalau saya lihat asliannya kode html untuk sub menunya pake ini mas :
      <li><a href='#'>Contoh menu</a>
      <ul class='children'>
      <li><a href='#'>blaaaa blaaa blaaa</a></li>
      <li><a href='#'>blaaaa blaaa blaaa</a></li>
      <li><a href='#'>blaaaa blaaa blaaa</a></li>
      </ul>
      </li>

      Delete
    2. mantap bang Alex,setiap pertanyaan langsung dijawab,,,,,

      Delete
  9. saya izin nyoba mas kunjungan perdana nie salam kenal ya mas admin :) blognya udah saya follow

    http://informasibloger.blogspot.com

    ReplyDelete
    Replies
    1. ok terimakasih banyak sob, ditunggu aja Folbacknya

      Delete
  10. keren kang di coba buat yang di dummy ah ..
    kayaknya bakalan mantapz lamun dipasangan menu nu ieu mah hehe

    ReplyDelete
  11. terimakasih tipsnya gan..sangat bermanfaat bagi saya.

    ReplyDelete
  12. wah abangku ini ada j idenya dan itu sangat berkualitas lg ,,,! maju terus kang alex mf baru aktif lg nih :)

    ReplyDelete
    Replies
    1. terimakasih banyak mas support serta kunjungannya

      Delete
  13. yang baru yang baru,,,mantap Kang Alex,,,,di save dulu ach biar nanti bisa dicoba,,,makasih

    ReplyDelete
    Replies
    1. mangga silakan mas, hatur thank you kunjungannya

      Delete
  14. keren nih mas menunya.
    tankyu tutorialnya sangat bermanfaat

    ReplyDelete
  15. wahhh...warnanya aduhai banget mas, keren abis. kapan2 saya terapin jk pas ada waktu senggang.

    ReplyDelete
  16. owalah ini buat kodoe menu ya! Keren CSSnya..

    ReplyDelete
  17. mantap nih menunya mas, cssnya keren

    ReplyDelete
  18. izin save codenya ya mas, mw di coba dulu, terima kasih mas

    ReplyDelete
    Replies
    1. mav mas balik lagi, ini pastenya di edit widget atau di edit html ya? masih binun, wkk. mohon penjelasannya mas, terima kasih

      Delete
    2. Silakan mau dimana aja mas.
      kalau di edit widget disatukan aja antara html dan CSS,
      Kalau di dit html penempatan css nya diatas kode ]]></b:skin>
      dan kalau code htmlnya dibawah kode :
      <body>

      Delete
  19. salamat siang kang .. ngopi ah hehe

    ReplyDelete
    Replies
    1. ngopi terus smakin hideung atuh hehehe

      Delete
    2. wkwkkwkkwkkwk, bener kang, pokonamah hidup kopi hehe

      Delete
  20. variatif n mantep2..
    met mlm kang alex..bru knjung neh :)
    smoga sukses sllu

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel