Garder ouvert un menu accordeon

AlexFaitDesChoses Messages postés 4 Date d'inscription samedi 13 mars 2010 Statut Membre Dernière intervention 16 mars 2010 - 13 mars 2010 à 15:26
AlexFaitDesChoses Messages postés 4 Date d'inscription samedi 13 mars 2010 Statut Membre Dernière intervention 16 mars 2010 - 13 mars 2010 à 17:10
Bonjour à tous,
je débute en PHP et j'aimerais quelques conseils.
Je suis entrain de créer mon nouveau site qui se compose comme ceci:
un menu déroulant accordéon(type Jquery) placé dans un fichier menu.php puis inséré dans chacune de mes pages.
Je tiens à garder le menu dans un fichier séparé du fait des nombreuses et fréquentes modifications de mes listes.
Mais j'aimerais pouvoir garder mes sous-menus ouverts (ou fermés) selon chaque page de mon site.
Y'a t-il une solution à mon problème?

Voici le contenu de mon menu.php pour l'instant:

 



<li class='section-title'>GRAPHIC DESIGN
</li>
<li> Identity</li>
<li>Green Analogy</li>
<li>Monsieur +</li>
<li>Bar des Capucins</li>
<li>Mrs. Jones</li>
<li>S.C.P. Avocats Associés</li>
<li>Marseille-Provence 2013</li>
<li>Ooprint</li>
<li>Tchangodeï</li>

<li> Books</li>
<li>Alex Fait Des Choses</li>
<li>Rabelais</li>
<li>L'Usine à Cordes</li>
<li>Le Guide de l'Étudiant</li>	

<li> Posters</li>
<li>Typosters</li>
<li>Beautiful Decay</li>
<li>MusiKampus</li>
<li>L'Original</li>
<li>Artzébouilles</li>
<li>Rock'n'Solex</li>
<li>Derby de la Meije</li>
<li>Quais du Polar</li>
<li>Jongl'Hop</li>

<li> Typeface</li>
<li>Tangoes</li>
<li>Slim</li>
<li>Fat</li>
<li>Break The Silence</li>		





<li class='section-title'>ILLUSTRATION
</li>

<li>Paintings</li>
<li>Drawings</li>
<li>Graffiti</li>
<li>Collages</li>
<li>Comics</li>




<li class='section-title'>VARIOUS
</li>
<li> Photography</li>
<li>USA By Designers</li>
<li>The Wolf</li>
<li>G.I. Joe</li>
<li>New York</li>
<li>Europe</li>
<li>Untitled</li>


<li> Installation</li>
<li>Fête des Lumières</li>
<li>Wild Wide Woods</li>

<li> Live Performance</li>
<li>Mascarade</li>




<li class='section-title'>INFOS
</li>
<li>Profile</li>
<li>Contact</li>






<li class='section-title'>BLOG</li>


<li class='section-title'>BEHANCE</li>






© 2010<h4/>





Merci d'avance de votre aide!

2 réponses

kohntark Messages postés 3706 Date d'inscription lundi 5 juillet 2004 Statut Membre Dernière intervention 27 avril 2012 30
13 mars 2010 à 16:38
Salut,

2 choses :
- ici tu es sur le forum PHP hors ta question traite du javascript
- il est impossible de t'aider sans connaitre le code JS du menu et le css


Cordialement,



Kohntark -
0
AlexFaitDesChoses Messages postés 4 Date d'inscription samedi 13 mars 2010 Statut Membre Dernière intervention 16 mars 2010
13 mars 2010 à 17:10
Oups!
Donc le expandingMenu.js est:

function expandingMenu(num) {
var speed = 500;

var item_title = $("#menu ul").eq(num).children(":first");
var items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; });

/* hide items if not active */
if (items.is(".active") == false) {
items.hide();
}

/* add click functions + pointer to title */
item_title.css({cursor:"pointer"}).toggle(
function () {
items.show(speed);
}, function () {
items.hide(speed);
}
)
}/code

Le style.css est:
/**
* CSS
* 
* @version 1.0
* @author Vaska 
* @author Gregory Cadar
*/
* {
margin: 0;
padding: 0;
}

body {
font-size: 10px;
font-family: Verdana, sans-serif;
background-color: #FFFFFF;	



}

#content .container a, .dyn, #menu li a:hover, #menu li.active a {
color:#66CCCC;
}

body.section-1 {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-position: 215px 0;
background-attachment: fixed;
}
body.section-2 { }
body.section-3 { }

a:link { text-decoration: none; color:#666666; font-size:11px; }
a:active { text-decoration: none; color:#66CCCC; }
a:visited { text-decoration: line-through; color:#999999; }
a:hover { text-decoration: none; color:#66CCCC; }

a img { border: none; }

#menu {
    width: 215px;
    overflow: auto;
    top: 0;
    bottom: 0;
left: 0;
    position: fixed;
    height: 100%;
margin-left: 28px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 25px;
background-image:url(images/fondmenu.gif);
}

#menu ul {
list-style: none;
margin: 0 0 0 0;
}

#menu ul li.section-title { 
border-bottom: 1px solid #999999;
color:#000000
text-decoration:none;
text-indent:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-style: normal;
font-weight:300;
line-height:1.7em;

}

.menucontainer {
    padding: 0px 15px 0px 0px;
}

#menutext {
    padding: 0px 15px 0px 15px;
}

#content {
height: 100%;
margin: 0 0 0 250px;
top: 0;
clear: left;
}

.container {
    padding: 119px 25px 25px 75px;
}

#content p { width: 400px; margin-bottom: 9px; }

#header {
    padding: 20px 10px 0px 0px;
height: 70px;
width:192px;
}

p {
    margin: 0 0 9px 0;
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 16px; }
h4 { font-size: 10px; font-weight:100; color:#666666;}

h5 {	
font-size: 11px;
line-height:1.5em;
font-family: Arial, Helvetica, sans-serif;
color:#999999;
font-style:normal;
font-weight:normal;
}

#img-container	{ margin: 0; padding: 0; }
#img-container p	{ width: 400px; margin: 0; padding: 0 0 12px 0; }

#once { clear: left; }
0