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 :

VIEW A DEMO

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.

M. Alex Joenaedi

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

Share this post