Top Menu Slider Dengan Effect CSS3
Scriptnya Saya Simpan Sudah Dengan Tempat Peletakan Scriptnya Jadi Sobat Tinggal Copy/Paste Pada Tempat Yang Semestinya :D, Dan Juga Sobat Bisa Langsung Copy/Paste Semua Scriptnya Dan Simpan Di Gadget HTML/Java Script Pada Blog Sobat :D
DEMO
DEMO
Ini Dia Scriptnya :
<head>
<style>
a { text-decoration: none;
color: #2e2e2e;
}
body {
background: #2e2e2e;
margin: 0;
padding: 0;
}
ul {
font-family: Helvetica, Arial, sans-serif;
list-style: none;
margin: 0;
padding: 12px 0;
text-align: center;
}
ul li {
color: #fff;
font-size: 10px;
letter-spacing: 2px;
padding: 12px 0;
text-transform: uppercase;
}
#menu {
background: #222;
display: none;
width: 100%;
}
#bar {
background: #eee;
box-shadow: 0 0 5px #000;
-mox-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
height: 50px;
width: 100%;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-style: bold;
letter-spacing: 4px;
margin: 0;
padding: 18px;
text-align: center;
text-transform: uppercase;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>Services</li></a>
<a href="#"><li>Work</li></a>
<a href="#"><li>Contact</li></a>
</ul>
</div>
<div id="bar">
<a href="#"><h1>Menu</h1></a>
</div>
<script>
$(document).ready(function(){
$("#bar a").click(function(){
event.preventDefault();
$("#menu").slideToggle("slow");
});
});
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</body>
NB.
Bila Ada Yang Ingin Ditanyakan Silahkan Komentar Di Postingan Ini Atau Bisa Lewat Email : nurmansyahrully@gmail.com , Facebook : facebook.com/ggeessbbooll , Twitter : @RullyMNH , Selamat Mencoba Dan Selalu Sukses Untuk Kalian Semua :D
No comments:
Post a Comment