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
Demikian artikel tentang pembuatan Menu dengan Media HTML5 dan CSS3.
Saya hanyalah seorang Newbie di dunia Blogger, Aktivitas Ngeblog dilakukan hanya pada waktu senggang saja atau tidak teratur.
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
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.
Saya hanyalah seorang Newbie di dunia Blogger, Aktivitas Ngeblog dilakukan hanya pada waktu senggang saja atau tidak teratur.
Related Posts
adehh.. bingung nerapinya.. nyimak dulu deh.
ReplyDeleteSama mis seperti pada penempatan widget yang lainnya
Deletecantik nih mas menunya, mas alex kalo bikin menu emang sukanya yang cantik2 nih :) hohoho..
ReplyDeletetankyu tutorialnya mas
bisa aja ni mas, hehheheh thank atas kunjungannya
Deletewoww.....keren banget. bisa goyang2...hahahha. ijin praktek yah?
ReplyDeleteiya mis cuman belum bisa ngebor hehhehehee
Deletewidih, 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
ReplyDeletedipasang aja mas semuanya wkwkkwkkwwwwwwwww
Deletewahhh kudu and wajib dicoba nih mas bro,ijin ach mencontek siapa tahu bisa,,,
ReplyDeletemonggo kang, haturnuhun kunjungannya
Deletejadi bingung mas Alex,hehe soale semuanya keren nih,,,hehe
Deletewuiih, keren2 tuwh menu drop downnya. jd kepikiran utk gunain di blogku...
ReplyDelete^_^
silakan mas, terimakasih kunjungannya
Deletegila keren banget mas...! jd pengen nyoba.., thx ya sharenya *smile
ReplyDeletemonggo, terimakasih banyak kunjungannya
DeleteTempilann barunya tambah mantap gan, makin keren dan praktis.
ReplyDeleteKalau soal Html saya memang masih banyak yg belum tahu, perlu banyak belajar di blog ini. terima kasih infonya sudah berbagi
wah bisa aja nimas, saya juga masih belajar mas, belum menguasai, terimakasih kunjungannya.
Deletewah keren nih gan, bgus kyanya klo d pasang d blog ane.
ReplyDeletethanks gan udah sharing. sangat bermanfaat :)
Keren, Bro. Blog bisa lebih atraktif dan modern. Dan yang paling menarik tidak menggunakan javascript, jadi tidak memperberat loading.
ReplyDeleteAda kasus pembunuhan seekor anjing, dan pesan misterius..sadisss :D
ReplyDeleteSEARSIR.blogspot.com
Tutorial yang sangat keren mas
ReplyDeleteeh mana kopinya hehehe
wow keren ms alex nih,,,, sy amankan dulu ms hehehe
ReplyDeletehadir lagi ms alex mf sendal ketinggalan hehehe,,,,,
ReplyDeleteWah...mas Alex emang paling cihuy deh..buat tutorial keren...hehe :)
ReplyDeleteTrima ksh n
salam sehat selalu mas :)
kereen
ReplyDeletekembali hadir ms sambil belajar css dimari,,,,makasih tutornya ;)
ReplyDeletenjlimet juga liatnya... :s
ReplyDeleteMampir lagi mas :)
ReplyDeleteterima kasih sob atas sharenya, mantap...banyak belajar dari sini sob...
ReplyDeleteapa kabar nih ....
ReplyDeleteAlhamdulillah mis,,, thank kunjungannya
Deletemakasih gan tutorialnya .. sukses ya
ReplyDeleteSama2 gan, thank kunjungannya
DeleteSangat membantu sekali ni sob,..
ReplyDeletemakasih deh ilmunya... :)
selamat sore... blogwalking sini.. :) :) .cari tutorial hide komengg.
ReplyDeleteijin copas kakak
ReplyDeleteSilakan Gan
Delete