Salve a tutti.
Scrivo per segnalare questo mio problema, che oramai da tre giorni mi rincorre:
sto provando ad inserire un image menu tipo quello di mootools, però creato con la libreria jquery. Fino a qui nessun problema, tramite il tutorial sono riuscito a creare una pagina funzionante.
A questo punto vorrei inserire dei div che si aprono come link alle varie voci dell'image menu con un effetto slide su dei div. Inoltre dovrei creare lo stesso effetto su div multipli, che si aprono al click sulle varie opzioni dell'image menu.
L'esempio è a questo indirizzo: http://www.isoletremitihotel.it
Come vedete l'image menu creato con jquery funziona bene, il problema è che cliccando sulle varie barre vorrei far uscire dei div, ognuno che quando si apre chiude gli altri.
Ho provato in 100 modi diversi, ma non riesco. Seguendo un tutorial ho inserito queste funzioni:
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#opere").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
e poi richiamando la funzione btn-slide nel punto che dovrei cliccare per arire il div:
Il codice integrale del file index è questo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Image Menu Example</title>
<link rel="stylesheet" href="_common/css/main.css" type="text/css" media="all" />
<link href="jimgMenukwicks.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script><script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#opere").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<!--[if IE]>
<script type="text/javascript">
$().ready(function() {
$(".jimgMenu ul").kwicks({max: 310, duration: 400, easing: "easeOutQuad"});
});
</script>
<![endif]-->
<script type="text/javascript">
$().ready(function() {
$('.jimgMenu ul').kwicks({max: 310, duration: 400, easing: 'easeOutQuad'});
});
</script>
<style type="text/css">
<!--
.Stile1 {
font-size: xx-large;
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div id="contenitore">
<h1 class="Stile1">Nicola Di Pardo</h1>
<hr />
<div class="jimgMenu">
<ul>
<li id="landscapes">
<li id="people">People
<li id="nature">Nature
<li id="abstract">Abstract
<li id="urban">Urban[/list]
</div>
<div class="opere" style= "display: none;">
<table width="800" cellpadding="1" cellspacing="1">
</table>
</div>
</div>
</body>
</html>
Spero davvero che qualcuno possa aiutarmi, prima che divento pazzo.
Ringrazio tutti in anticipo, e approfitto per salutare tutto il forum.
Rispondi quotando
