Selain itu menu tersebut bisa mempercantik blog atau web Anda, bila Anda bisa menyesuaikannya dengan tampilan blog atau web yang Anda miliki. Silahkan Anda coba beberapa kode yang ada di bawah ini. Nah, berikut ini kode html5 nya:
<!DOCTYPE HTML> <head> <title>Menu dropdown dengan css3 by w3codez</title> </head> <body> <article class="utama"> <h1>Menu dropdown by w3codez</h1> <ul class="menu"> <li><a href="#">HOME</a></li> <li><a href="#">WEBSITE</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">PHP</a></li> <li><a href="#">JAVASCRIPT</a></li> </ul> </li> <li><a href="#">ABOUT</a></li> </ul> <section class="clearx"> </section> </article> </body> </html>
Sedangkan untuk script CSS3 nya seperti ini:
<style type="text/css">
body {
background: #808080;
font-size: 0.8em;
}
.utama {
width: 50%;
margin: 50px 25%;
}
.clearx {
clear: both;
}
h1, p {
text-align: justify;
}
a, a:hover, a:link, a:active {
color: #696969;
display: block;
text-decoration: none;
}
.menu {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background: #4C4C4C;
background: -moz-linear-gradient(#444, #4C4C4C);
background: linear-gradient(#444, #4C4C4C);
border-radius: 10px;
box-shadow: 0 2px 1px #9c9c9c;
transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
}
.menu li {
float: left;
padding: 0;
position: relative;
}
.menu a {
float: left;
padding: 10px 20px 7px 20px;
color: #999;
text-transform: uppercase;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
.menu li:hover > a {
color: #eee;
}
.menu li:hover > ul {
display: block;
}
.menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.menu ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 9999;
background: #4C4C4C;
background: -moz-linear-gradient(#444, #4C4C4C);
background: linear-gradient(#444, #4C4C4C);
border-radius: 10px;
box-shadow: 0 2px 1px #9c9c9c;
}
.menu ul li {
float: none;
margin: 0;
padding: 0;
display: block;
box-shadow: 0 1px 0 #111, 0 2px 0 #777;
}
.menu ul a {
padding: 10px;
height: auto;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
.menu ul a:hover {
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
.menu ul li:first-child a {
border-radius: 5px 5px 0 0;
}
.menu ul li:first-child a:after {
content: " ";
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #4C4C4C;
}
.menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
.menu ul li:last-child {
box-shadow: none;
}
.menu ul li:last-child a {
border-radius: 0 0 5px 5px;
}
</style>
Silahkan Anda gabungkan script HTML5 nya dengan script CSS3 nya, dimana script CSS3 nya Anda letakkan di atas '<body>' yang ada pada script HTML5. Nanti hasilnya akan seperti ini:
Menu dropdown by w3codez
Sekian, semoga bermanfaat. Mohon maaf bila ada kesalahan.
No comments:
Post a Comment