Penyusunan dokumen perencanaan tahunan Desa atau sering disebut dengan
Dokumen RKP Desa. Pada postingan ini akan dibagikan terkait dengan dokumen
RKP Desa ...
DropDown Menu with jQuery
<div id='menu_wrapper'>
<div id='menu_bar'>
<ul id='menu'>
<li><a href='/'><span>Welcome</span>Homepage</a>
</li>
<li><a href='#'><span>This is</span>About Us</a>
</li>
<li><a class='arrow' href='#'><span>Support</span>Contact Us</a>
<ul>
<li><a href='#'>Sub Menu 1</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 2</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 3</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 4</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 5</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 6</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 7</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 8</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 9</a>
</li>
</ul>
</li>
<li><a href='#'><span>Action</span>Big surprise</a>
</li>
<li><a href='#'><span>Culture</span>Documentary</a>
</li>
<li><a class='arrow' href='#'><span>Box Office</span>The best movie</a>
<ul>
<li><a href='#'>Sub Menu 1</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 2</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 3</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 4</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 5</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 6</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 7</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 8</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 9</a>
</ul>
</li>
<li><a href='#'><span>Horror</span>Watch your back</a>
</li>
<li><a href='#'><span>Best Seller</span>People likes</a>
</li>
<li><a class='arrow' href='#'><span>Cartoon</span>Animated movie</a>
<ul>
<li><a href='#'>Sub Menu 1</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 2</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 3</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 4</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 5</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 6</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 7</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 8</a>
</li>
<li class='hr'></li>
<li><a href='#'>Sub Menu 9</a>
</ul>
</li>
</ul>
</div>
</div><script type='text/javascript'>
$(function () {
$('#menu li').hover(function () {
$('ul', this).filter(':not(:animated)').slideDown(600, "easeOutBounce");
}, function () {
$('ul', this).slideUp(600, "easeInExpo");
});
});
</script>#menu_wrapper {
height:44px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-_Y8kD4gvh0TgUknZz7lA8f3SM2yXqK1pQpEVS7AgzuvJDUcA2G2ZLckjBDc9crns_uJLnUXsQHjLHE62RlyfxU5cpJq08KDTPozwnB3YhcHJ9eBSSmw3qejzNTX3gg4cVbr9Or2fOnw/s1600/navbar-bg.png) repeat-x;
width: 960px;
margin: 0 auto;
padding: 0 auto;
border-bottom: 1px solid #f89c21;
}
#menu_bar {
width: 960px;
height: 27px;
margin: 0 auto;
}
#menu {
width: 100%;
}
#menu,#menu ul {
list-style: none;
font-family: Arial, serif;
margin: 0;
padding: 0;
}
#menu a {
display: block;
text-decoration: none;
font: normal 11px Arial;
text-transform: none;
color: #CECECF;
border-right: 1px solid #484747;
border-left: 1px solid #191919;
padding: 7px 10px 7px;
}
#menu a.arrow {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVcz7PChHPb1fo9FX0RZANhD3xRNG1nqCP9FmFA4dodOPecpvGfNDYfx6d9Y6DqraAYT9xzaIu5lq5-2FySCdT19qtS6_zjogo7tM3luDA_3gEmpc5cSQmRvjxOmRTGZFjppTqRnlmQiQ/s1600/arrow_white.gif);
background-repeat: no-repeat;
background-position: right center;
padding: 7px 24px 7px 10px;
}
#menu li {
float: left;
position: static;
width: auto;
}
#menu li ul,#menu ul li {
width: 170px;
}
#menu ul li a {
text-align: left;
color: #fff;
font-size: 12px;
font-weight: 400;
text-transform: none;
font-family: Arial;
border: none;
padding: 5px 10px;
}
#menu li ul {
z-index: 100;
position: absolute;
display: none;
background: #222;
padding-bottom: 0px;
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.6);
}
#menu li:hover a,#menu a:active,#menu a:focus,#menu li.hvr a {
background-color: #222;
color: #fff;
}
#menu li:hover ul,#menu li.hvr ul {
display: block;
}
#menu li:hover ul a,#menu li.hvr ul a {
color: #edfdfd;
background-color: transparent;
text-decoration: none;
}
#menu li ul li.hr {
border-bottom: 1px solid #444;
border-menu: 1px solid #000;
display: block;
font-size: 1px;
height: 0;
line-height: 0;
margin: 0px 0;
}
#menu ul a:hover {
background-color: #555!important;
color: #fff!important;
text-decoration: none;
}
#menu a span,#menu a.arrow span {
font: bold 12px Arial;
color: #888;
display: block;
line-height: 16px;
text-transform: uppercase;
text-shadow: 1px 2px 2px #000;
}
#menu li:hover a span,#menu li:hover a.arrow span {
color: #f8a932;
}
Sejauh ini belum ada komentar yang masuk. Mulailah memberikan saran, kritikan yang bersifat membangun.