HTML5 dan CSS3 Menu

HTML5- lahir pada tahun 2009 yang merupakan  standar  baru  untuk  HTML, XHTML dan DOM HTML. Sejak munculnya HTML versi 4.01, perkembangan situs dunia semakin berkembang.
HTML5 merupakan hasil proyek dari   W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group). WHATWG bekerja dengan bentuk situs dan aplikasi, sedangkan W3C merupakan pengembang dari XHTM L 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Seiring dengan kemajuan hal tersebut mau tidak mau Widget atau sarana pendukung untuk Blog/Website dituntut untuk bisa Valid terhadap CSS3 dan HTML5, berikut adalaha sebuah tutorial sederhana tentang pembuatan Menu dengan penggunaan CSS3 dan HTML5

Dropdown menu, css3 menu, html5 menu css3 dan html5





Penerapan Facebook Like Box:-

  • Login ke akun Blogger sobat 
  • Klik Tataletak >>> Add Widget lalu kopas kode dibawah ini

KODING STYLE KE-1
<style type='text/css'>
#alex-ganteng {
  position: relative;
  width: 100%;  
 }

 #alex-ganteng:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
 }

 #menu {
  position: relative;
  float: left;
  width: 100%;
  padding: 0 20px;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
  background: #ccc; 
 }

 #menu, #menu ul {
  list-style: none;
 }

 #menu > li {
  float: left;
  position: relative;
  border-right: 1px solid rgba(0,0,0,.1);
  box-shadow: 1px 0 0 rgba(255,255,255,.25);
  perspective: 1000px;
  
 }

 #menu > li:first-child {
  border-left: 1px solid rgba(255,255,255,.25);
  box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
 }

 #menu a {
  display: block;
  position: relative;
  z-index: 10;
  padding: 13px 20px 13px 20px;
  text-decoration: none;
  color: rgba(75,75,75,1);
  line-height: 1;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -.05em;
  background: transparent;  
  text-shadow: 0 1px 1px rgba(255,255,255,.9);
  transition: all .25s ease-in-out;
 
 }

 #menu > li:hover > a {
  background: #333;
  color: rgba(0,223,252,1);
  text-shadow: none;
 }

 #menu li ul  {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 200px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background: transparent;
  overflow: hidden;
  transform-origin: 50% 0%;
 }


 #menu li:hover ul {
  
  padding: 15px 0;
  background: #333;
  opacity: 1;
  visibility: visible;
  box-shadow: 1px 1px 7px rgba(0,0,0,.5);
  animation-name: swingdown;
  animation-duration: 1s;
  animation-timing-function: ease;

 }

 @keyframes swingdown {
  0% {
   opacity: .99999;
   transform: rotateX(90deg);
  }

  30% {   
   transform: rotateX(-20deg) rotateY(5deg);
   animation-timing-function: ease-in-out;
  }

  65% {
   transform: rotateX(20deg) rotateY(-3deg);
   animation-timing-function: ease-in-out;
  }

  100% {
   transform: rotateX(0);
   animation-timing-function: ease-in-out;
  }
 }

 #menu li li a {
  padding-left: 15px;
  font-weight: 400;
  color: #ddd;
  text-shadow: none;
  border-top: dotted 1px transparent;
  border-bottom: dotted 1px transparent;
  transition: all .15s linear;
 }

 #menu li li a:hover {
  color: rgba(0,223,252,1);
  border-top: dotted 1px rgba(255,255,255,.15);
  border-bottom: dotted 1px rgba(255,255,255,.15);
  background: rgba(0,223,252,.02);
 }
</style>

<div id="alex-ganteng">
<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Me</a>
  <ul>
   <li><a href="#">Lorem ipsum dolor</a></li>
   <li><a href="#">Maecenas lacinia sem</a></li>
   <li><a href="#">Suspendisse fringilla</a></li>
  </ul>
 </li>
 <li><a href="#">Portfolio</a>
  <ul>
   <li><a href="#">Lorem ipsum dolor</a></li>
   <li><a href="#">Maecenas dignissim fermentum luctus</a></li>
   <li><a href="#">Suspendisse fringilla</a></li>
   <li><a href="#">Lorem ipsum dolor</a></li>
   <li><a href="#">Maecenas lacinia sem</a></li>
   <li><a href="#">Suspendisse fringilla</a></li>
  </ul>
 </li>
 <li><a href="#">Clients</a>
  <ul>
   <li><a href="#">Lorem ipsum dolor</a></li>
   <li><a href="#">Maecenas lacinia sem</a></li>
   <li><a href="#">Suspendisse fringilla</a></li>
  </ul>
 </li>
 <li><a href="#">Contact Me</a>
  <ul>
   <li><a href="#">Lorem ipsum dolor</a></li>
   <li><a href="#">Maecenas dignissim fermentum luctus</a></li>
   <li><a href="#">Suspendisse fringilla</a></li>
  </ul>
 </li>
 <li><a href="#">Support</a></li>
</ul>
</div>

KODING STYLE KE-2
<style type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
ul
{
  width: 740px;
  margin: 30px auto;
  list-style: none;
  border-top: 1px dashed white;
  border-bottom: 1px dashed white;
  background: #000;
  padding: 15px 0;
  padding-left: 15px;
  box-shadow: 0 -10px 0 #000, 0 10px 0 #000;
}
li
{
  font-family: 'Open Sans' , sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
  width: 120px;
  text-align: center;
}
li a
{
  text-decoration: none;
  color: white;
  font-size: 23px;  
  transition: .2s;
}
li a:hover
{
  color: greenyellow;
  border-bottom: 1px solid green;
}
</style>

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Support</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Help</a></li>
</ul> 

KODING STYLE KE-3
<style type='text/css'>

a{
color:#6d6d6d;
text-shadow:1px 1px 1px #000;
font-samily:arial, verdana;
font-weight:600;
text-decoration:none;
font-size:16px;
transition: color 0.3s linear;
-webkit-transition: color 0.3s linear;
-moz-transition: color 0.3s linear;
-o-transition: color 0.3s linear;
-ms-transition: color 0.3s linear;
}
a:hover {
color:#00e97f;
}
ol, ul{
list-style:none;
margin:0;
padding:0;
}

  /*ESTILOS DEL MENÚ*/

nav {
overflow:hidden;
width:725px;
height:180px;
padding:10px;
display:block;
margin:100px auto;
}
#menu {
display:block;
margin:0px auto;
list-style:none;
}
#menu li{
margin:8px;
  display:inline-block;
  background:#00d6ff;
 width:125px;
 height:125px;
 text-align:center;
 border-radius:4px;
 box-shadow:0px 1px 3px 0px #444;
 transition:all 0.3s ease-in;
-moz-transition:all 0.3s ease-in;
-webkit-transition:all 0.3s ease-in;
-ms-transition:all 0.3s ease-in;
-o-transition:all 0.3s ease-in;
}
#menu li .txt {
display:block;
margin:100px auto;
color:#fff;
opacity:0;
font-size:19px;
padding:5px;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
}
#menu li:hover > .txt {
margin:80px auto;
opacity:1;
}
#menu li:hover {
transform:scale(1.1,1.1);
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
}
#menu a .inicio {
background-image:url(http://centromex.xtrweb.com/demos/menu/home.png);
background-position:23px 15px;
background-repeat:no-repeat;
background-size:80px 75px;
}
#menu a .tutoriales {
background-image:url(http://centromex.xtrweb.com/demos/menu/tutoriales.png);
background-position:30px 25px;
background-repeat:no-repeat;
background-size:55px 55px;
}
#menu a .maestros {
background-image:url(http://centromex.xtrweb.com/demos/menu/maestros.png);
background-position:30px 25px;
background-repeat:no-repeat;
background-size:65px 55px;
}
#menu a .comprar {
background-image:url(http://centromex.xtrweb.com/demos/menu/comprar.png);
background-position:35px 23px;
background-repeat:no-repeat;
background-size:70px 60px;
}
#menu a .contacto {
background-image:url(http://centromex.xtrweb.com/demos/menu/contacto.png);
background-position:32px 27px;
background-repeat:no-repeat;
background-size:65px 55px;
}
footer {
text-align:center;
font-size:18px;
text-shadow:0px 1px 1px #888;
}
</style>

<nav> 
<ul id="menu"> 
<a href=""><li class="inicio"> <span class="txt">Explorar</span></li></a>
<a href=""><li class="tutoriales"> <span class="txt">Tutoriales</span></li></a>
<a href=""><li class="maestros"> <span class="txt">Maestros</span></li></a>
<a href=""><li class="comprar"> <span class="txt"> Comprar</span></li></a>
<a href=""><li class="contacto"> <span class="txt"> Contacto</span></li></a>
</ul>
</nav>

Demikian artikel tentang pembuatan Menu dengan Media HTML5 dan CSS3.

Berlangganan update artikel terbaru via email:

38 Responses to "HTML5 dan CSS3 Menu"

  1. adehh.. bingung nerapinya.. nyimak dulu deh.

    ReplyDelete
    Replies
    1. Sama mis seperti pada penempatan widget yang lainnya

      Delete
  2. cantik nih mas menunya, mas alex kalo bikin menu emang sukanya yang cantik2 nih :) hohoho..
    tankyu tutorialnya mas

    ReplyDelete
    Replies
    1. bisa aja ni mas, hehheheh thank atas kunjungannya

      Delete
  3. woww.....keren banget. bisa goyang2...hahahha. ijin praktek yah?

    ReplyDelete
  4. widih, keren-keren bener, saya suka yg style pertama, tapi style yg ke 3 juga keren, jadi binun yang mana, wkk..izin bookmark dulu mas, terima kasih tutorial kerennya

    ReplyDelete
  5. wahhh kudu and wajib dicoba nih mas bro,ijin ach mencontek siapa tahu bisa,,,

    ReplyDelete
    Replies
    1. monggo kang, haturnuhun kunjungannya

      Delete
    2. jadi bingung mas Alex,hehe soale semuanya keren nih,,,hehe

      Delete
  6. wuiih, keren2 tuwh menu drop downnya. jd kepikiran utk gunain di blogku...
    ^_^

    ReplyDelete
  7. gila keren banget mas...! jd pengen nyoba.., thx ya sharenya *smile

    ReplyDelete
  8. Tempilann barunya tambah mantap gan, makin keren dan praktis.
    Kalau soal Html saya memang masih banyak yg belum tahu, perlu banyak belajar di blog ini. terima kasih infonya sudah berbagi

    ReplyDelete
    Replies
    1. wah bisa aja nimas, saya juga masih belajar mas, belum menguasai, terimakasih kunjungannya.

      Delete
  9. wah keren nih gan, bgus kyanya klo d pasang d blog ane.
    thanks gan udah sharing. sangat bermanfaat :)

    ReplyDelete
  10. Keren, Bro. Blog bisa lebih atraktif dan modern. Dan yang paling menarik tidak menggunakan javascript, jadi tidak memperberat loading.

    ReplyDelete
  11. Ada kasus pembunuhan seekor anjing, dan pesan misterius..sadisss :D
    SEARSIR.blogspot.com

    ReplyDelete
  12. Tutorial yang sangat keren mas
    eh mana kopinya hehehe

    ReplyDelete
  13. wow keren ms alex nih,,,, sy amankan dulu ms hehehe

    ReplyDelete
  14. hadir lagi ms alex mf sendal ketinggalan hehehe,,,,,

    ReplyDelete
  15. Wah...mas Alex emang paling cihuy deh..buat tutorial keren...hehe :)

    Trima ksh n
    salam sehat selalu mas :)

    ReplyDelete
  16. kembali hadir ms sambil belajar css dimari,,,,makasih tutornya ;)

    ReplyDelete
  17. njlimet juga liatnya... :s

    ReplyDelete
  18. terima kasih sob atas sharenya, mantap...banyak belajar dari sini sob...

    ReplyDelete
  19. makasih gan tutorialnya .. sukses ya

    ReplyDelete
  20. Sangat membantu sekali ni sob,..
    makasih deh ilmunya... :)

    ReplyDelete
  21. selamat sore... blogwalking sini.. :) :) .cari tutorial hide komengg.

    ReplyDelete
  22. Dalam menelusuri berbagai artikel yang ada disini saya menemukan content yang menarik dan berguna bagi saya, blog ini ramai pengunjung seperti situs forum yang sudah ternama? salam sukses

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel