giafai.dev
il mio luogo di sviluppo...
Feeds
Un menu drop-down con jQuery+Superfish
jQuery è una libreria javascript molto usata. Una delle caratteristiche migliori è la possibilità di estenderne il funzionamento attraverso plugin. E ne esistono veramente molti, alcuni anche di dubbia utilità. Ad esempio per realizzare un menu di tipo Drop-Down, è possibile usare Superfish.
Partendo da una struttura di liste e sottoliste come questa (ripresa dalla pagina degli esempi del sito di riferimento):
<ul id="sample-menu-1" class="sf-menu sf-js-enabled sf-shadow"><li class="current">
<a class="sf-with-ul" href="#a">menu item<span class="sf-sub-indicator"> »</span></a>
<ul style="display: none; visibility: hidden;">
<li class="">
<a href="#aa">menu item</a>
</li>
<li class="current">
<a class="sf-with-ul" href="#ab">menu item<span class="sf-sub-indicator"> »</span></a>
<ul style="display: none; visibility: hidden;">
<li class="current"><a href="#">menu item</a></li>
<li><a href="#aba">menu item</a></li>
<li><a href="#abb">menu item</a></li>
<li><a href="#abc">menu item</a></li>
<li><a href="#abd">menu item</a></li>
</ul>
</li>
<li class="">
<a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
<ul style="display: none; visibility: hidden;">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li class="">
<a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
<ul style="display: none; visibility: hidden;">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li class="">
<a href="#">menu item</a>
</li>
<li class="">
<a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
<ul style="display: none; visibility: hidden;">
<li class="">
<a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
<ul style="display: none; visibility: hidden;">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li class="">
<a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
<ul style="display: none; visibility: hidden;">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li class="">
<a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
<ul style="display: none; visibility: hidden;">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li class="">
<a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
<ul style="display: none; visibility: hidden;">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li class="">
<a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
<ul style="display: none; visibility: hidden;">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li class="">
<a href="#">menu item</a>
</li>
</ul>
Questo plugin permette di creare facilmente dei menu di tipo drop-down inserendo semplicemente questo codice:
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').superfish();
});
</script>La lista precedente verrà trasformata in un menu drop-down come questo:
Sul sito di riferimento, sono presenti molti altri esempi.
