Oke gan…sekarang kita akan membahas cara buat POPUPMENU dengan script CSS,langsung aja ke intinya ini dia contohnya gan dan scriptnya
<style type="text/css" media="all">
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;
}
</style>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a
href="#">Komputer</a></li>
<style type="text/css" media="all">
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
display:none;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
</style>
<style type="text/css">
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;
}
<style type="text/css" media="all">
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
display:none;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;
}
#menu:hover, #menu:hover ul {
display:block;
}
</style>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a
href="#">Komputer</a></li>
</ul>
</div>
</style>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a
href="#">Komputer</a></li>
</ul>
</div>
</ul>
</div>
Itu gan scriptnya,memang lumayan bingung sih..tapi kalau yg udah tau dasarnya pasti bisa gan..untuk yang berwarna merah silahkan ganti sendiri oke!
Anda sedang membaca artikel tentang Cara buat popup menu dan anda bisa menemukan artikel Cara buat popup menu ini dengan url http://wanzbsc.blogspot.com/2011/12/cara-buat-popup-menu.html. Anda boleh menyebarluaskan atau mengcopy artikel Cara buat popup menu ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.
{ 0 komentar... read them below or add one }
Posting Komentar