Bu basit jQuery ve CSS ile açılır menü oluşturmanın nasıl yapılacağını göstereceğim ve yapılandırmak çok kolay, bunu web sitelerinde denemelisin. Bu menü, jQuery ve CSS öğelerini onClick olayında gösterir; temel bir jQuery ve CSS işlevi umarınız.Güzel web sitesi tasarımları oluşturmak için çok yararlıdır.
Bu görevi gerçekleştirmek için dropit jQuery eklentisi kullandım.
Kullanım
Javascript kitaplıkları
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="dropit.js"></script>
<script>
$(document).ready(function() {
$(\'.menu\').dropit();
});
</script>
Tıklama olayında gösterilen Html listesi
<ul class="menu">
<li>
<a href="#" class="btn">Class ►</a>
<ul>
<li><a href="#">Class 1</a></li>
<li><a href="#">Class 2</a></li>
<li><a href="#">Class 3</a></li>
<li><a href="#">Class 4</a></li>
</ul>
</li>
</ul>
Düzeni yönetmek ve belgeleri hazır listede gizlemek için CSS gereklidir.
<style>
.menu ul { display: none; } /* Hide before plugin loads */
li { list-style: none; }
a { text-decoration: none; }
.menu ul.dropit-submenu {
background-color: #fff;
border: 1px solid #b2b2b2;
padding: 6px 0;
margin: 3px 0 0 1px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
}
.menu ul.dropit-submenu a {
display: block;
font-size: 14px;
line-height: 25px;
color: #7a868e;
padding: 0 18px;
}
.menu ul.dropit-submenu a:hover {
background: #248fc1;
color: #fff;
text-decoration: none;
}
</style>
