sto tentando di sistemare questo menu per le mie esigenze:
http://www.tiagocabaco.com/
Per ora ho solo due voci di men, home e profilo. Home non dovrebeb aprire nessun sottomenù (niente toggle) ma il link diretto tramite la voce home non funziona!
Inoltre vorrei aggiungere la parte di asp che mi permette, una volta aperta la voce profilo (lo sfondo si colora di arancione), cliccata la sottovoce "storia aziendale" e aperta la pagina storia.asp che la voce "profilo rimanga" aperta e colorata di arancione e che la sottocategoria rimanga sottolineata con uno sfondo arancione chiaro.
Mi aiutate?
Il menù accordion in questione funziona così, nella pagina asp che ospita il menù si trova questo script (PRIMA DELLA CHIUSURA DEL TAG HEAD)
NELLA PAGINA INDEX.ASP
<script type='text/javascript'>
$(document).ready(function(){
$('#toggle_home').hide();
$('#toggle_profilo').hide();
$('#btn_home').addClass('active');
$('#btn_profilo').toggle(function(){
$(this).addClass('active');
}, function () {
$(this).removeClass('active');
});
$("#btn_home").click(function(){
$("#toggle_home").slideToggle("slow");
return false;
});
$("#btn_profilo").click(function(){
$("#toggle_profilo").slideToggle("slow");
return false;
});
});
</script>
nEl body:
<div id='sidebar'><div id='worksnav'>
Home
Profilo
<div id='toggle_profilo'>
Storia aziendaleServiziMission
</div>
Sono collegati alal pagina index.asp un file css e un file js
FILE JS
$(document).ready(function(){
$("#toggle_home").hide();
$("#toggle_profilo").hide();
$("#btn_home").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("#btn_home").click(function(){
$("#toggle_home").slideToggle("slow");
return false;
});
$("#btn_profilo").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("#btn_profilo").click(function(){
$("#toggle_profilo").slideToggle("slow");
return false;
});
});
Fhile css
/* ----------------- SIDEBAR ----------------- */
#sidebar {
z-index:999;
width:261px;
height:100%;
position:fixed;
background-repeat:repeat-y;
overflow:auto;
}
#sidebar h1 {
text-indent:-3000px;
width:261px;
height:94px;
margin:auto;
margin-top:25px;
/* WORKS NAV */
#worksnav {
padding: 0px 0 25px 0;
}
#worksnav a {
color:#6f6f6e;
text-decoration:none;
}
#worksnav #btn_home {
background-image:url(../immagini/verde.gif);
margin-top:10px;
}
#worksnav #btn_profilo {
background-image:url(../immagini/arancione.png);
margin-top:10px;
}
#worksnav #btn_home, #worksnav #btn_profilo {
background-repeat:repeat-y;
background-position:-27px;
text-indent:70px;
display:block;
width:100%;
}
#worksnav #btn_home:hover, #worksnav #btn_profilo:hover, #worksnav #btn_home.active, #worksnav #btn_profilo.active {
background-repeat:repeat;
background-position:top left;
color:#FFF;
}
#worksnav #toggle_home a, #worksnav #toggle_profilo a {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:11px;
font-style:italic;
text-indent:70px;
display:block;
width:100%;
height:15px;
margin-top:5px;
}
#worksnav #toggle_home a:hover {
background-color:#f4ecf4;
}
#worksnav #toggle_home .selected_home {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:11px;
font-style:italic;
text-indent:60px;
display:block;
width:100%;
height:15px;
margin-top:5px;
background-color:#f4ecf4;
}
#worksnav #toggle_profilo a:hover {
background-color:#e4ecf1;
}
#worksnav #toggle_profilo .selected_profilo {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:11px;
font-style:italic;
text-indent:60px;
display:block;
width:100%;
height:15px;
margin-top:5px;
background-color:#e4ecf1;
}

Rispondi quotando
