Salve ragazzi,
ho un problema nel creare un menu a tendina con JQuery.
Praticamente io dovrei applicare alla mia pagina, l'effetto menu a tendina (elastica) come in questo esempio:
http://devsnippets.com/img/demo-jquery/demo4.html
Io ci ho provato, ma non vā:
codice:
<script type="text/javascript">
$(document).ready(function(){
$('.title_rel').betterTooltip({speed: 150, delay: 300});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("ul.INTmenu_release li#vynil").mouseover(function(){ //When mouse over ...
//Following event is applied to the subnav itself (making height of subnav 60px)
$(this).find('#all_releases').stop().animate({height: '60px', opacity:'1'},{queue:false, duration:1500, easing: 'easeOutElastic'})
});
$("ul.INTmenu_release li#vynil").mouseout(function(){ //When mouse out ...
//Following event is applied to the subnav itself (making height of subnav 0px)
$(this).find('#all_releases').stop().animate({height:'0px', opacity:'0'},{queue:false, duration:1600, easing: 'easeOutElastic'})
});
//menu itembackground color animation
$("li").hover(function() {
$(this).stop().animate({ backgroundColor: "#C13D93"}, 600);},
function() {
$(this).stop().animate({ backgroundColor: "#333333" }, 600);
});
});
</script>
<div id="top_release">
<ul class="INTmenu_release">
<li id="vynil">VYNIL
<!--<ul style="overflow: hidden; height: 0px; display: block; opacity: 0;" class="subnav">
<li style="background-color: rgb(51, 51, 51);">Overview
<li style="background-color: rgb(51, 51, 51);">Products
<li style="background-color: rgb(51, 51, 51);">Services
<li style="background-color: rgb(51, 51, 51);">Why Us[/list]-->
- <li class="single_rel">[img]img/releases/rettangoloHMZ001.jpg[/img]
<p class="title_rel" title="HMZ001 - Astin & Synthek, Insert Coin continuo del testo che andrebbe fuori."><span class="grassetto">HMZ001</span> - Astin & Synthek, Insert Coin...</p>
<li class="single_rel">[img]img/releases/rettangoloHMZ002.jpg[/img]
<p class="title_rel"><span class="grassetto">HMZ001</span> - Astin & Synthek, Ze Pequeno...</p>
<li id="digital">DIGITAL[/list]
</div>
Praticamente, la pagina č questa:
codice:
<div id="top_release">
<ul class="INTmenu_release">
<li id="vynil">VYNIL
<li id="digital">DIGITAL[/list]
</div>
- <li class="single_rel">[img]img/releases/rettangoloHMZ001.jpg[/img]
<p class="title_rel">PRIMO CONTENUTO</p>
<li class="single_rel">[img]img/releases/rettangoloHMZ002.jpg[/img]
<p class="title_rel">SECONDO CONTENUTO</p>
...
Quando clicco VYNIL, deve scendere un menu a tendina, quando clicco DIGITAL, deve scendere un altro menu a tendina.
grazie anticipatamente.