begin process at 2012 05 29 08:51:59
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript Orienté objet (POO)

 > 

Divers

 > 

Garder ouvert un menu accordeon


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Garder ouvert un menu accordeon

lundi 15 mars 2010 à 14:22:00 | Garder ouvert un menu accordeon

AlexFaitDesChoses

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:
Code PHP :

Code PHP :
<div id='menutext'>
<p> </p>
<ul>
<li class='section-title'>GRAPHIC DESIGN<br /></li>
<li> Identity</li>
<li><a href='green.php' onclick="do_click();">Green Analogy</a></li>
<li><a href='monsieur.php' onclick="do_click();">Monsieur +</a></li>
<li><a href='capu.php' onclick="do_click();">Bar des Capucins</a></li>
<li><a href='mrsjones.php' onclick="do_click();">Mrs. Jones</a></li>
<li><a href='scp.php' onclick="do_click();">S.C.P. Avocats Associés</a></li>
<li><a href='marseille.php' onclick="do_click();">Marseille-Provence 2013</a></li>
<li><a href='ooprint.php' onclick="do_click();">Ooprint</a></li>
<li><a href='tchangodei.php' onclick="do_click();">Tchangodeï</a></li>

<li> Books</li>
<li><a href='afdc.php' onclick="do_click();">Alex Fait Des Choses</a></li>
<li><a href='rabelais.php' onclick="do_click();">Rabelais</a></li>
<li><a href='uac.php' onclick="do_click();">L'Usine à Cordes</a></li>
<li><a href='guide.php' onclick="do_click();">Le Guide de l'Étudiant</a></li>	

<li> Posters</li>
<li><a href='typosters.php' onclick="do_click();">Typosters</a></li>
<li><a href='decay.php' onclick="do_click();">Beautiful Decay</a></li>
<li><a href='musikampus.php' onclick="do_click();">MusiKampus</a></li>
<li><a href='original.php' onclick="do_click();">L'Original</a></li>
<li><a href='artzebouilles.php' onclick="do_click();">Artzébouilles</a></li>
<li><a href='solex.php' onclick="do_click();">Rock'n'Solex</a></li>
<li><a href='derby.php' onclick="do_click();">Derby de la Meije</a></li>
<li><a href='quais.php' onclick="do_click();">Quais du Polar</a></li>
<li><a href='jonglhop.php' onclick="do_click();">Jongl'Hop</a></li>

<li> Typeface</li>
<li><a href='tangoes.php' onclick="do_click();">Tangoes</a></li>
<li><a href='slim.php' onclick="do_click();">Slim</a></li>
<li><a href='fat.php' onclick="do_click();">Fat</a></li>
<li><a href='silence.php' onclick="do_click();">Break The Silence</a></li>		


</ul>

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

<li><a href='paintings.php' onclick="do_click();">Paintings</a></li>
<li><a href='drawings.php' onclick="do_click();">Drawings</a></li>
<li><a href='graffiti.php' onclick="do_click();">Graffiti</a></li>
<li><a href='collages.php' onclick="do_click();">Collages</a></li>
<li><a href='comics.php' onclick="do_click();">Comics</a></li>

</ul>

<ul>
<li class='section-title'>VARIOUS<br /></li>
<li> Photography</li>
<li><a href='usa.php' onclick="do_click();">USA By Designers</a></li>
<li><a href='wolf.php' onclick="do_click();">The Wolf</a></li>
<li><a href='gijoe.php' onclick="do_click();">G.I. Joe</a></li>
<li><a href='newyork.php' onclick="do_click();">New York</a></li>
<li><a href='europe.php' onclick="do_click();">Europe</a></li>
<li><a href='untitled.php' onclick="do_click();">Untitled</a></li>


<li> Installation</li>
<li><a href='lumiere.php' onclick="do_click();">Fête des Lumières</a></li>
<li><a href='www.php' onclick="do_click();">Wild Wide Woods</a></li>

<li> Live Performance</li>
<li><a href='mascarade.php' onclick="do_click();">Mascarade</a></li>


</ul>
<ul>
<li class='section-title'>INFOS<br /></li>
<li><a href='profile.php' onclick="do_click();">Profile</a></li>
<li><a href='contact.php' onclick="do_click();">Contact</a></li>


</ul>

<em>
<ul>
<li class='section-title'><a href='http://alexfaitdeschoses.blogspot.com/'  target="_blank" onclick="do_click();">BLOG</a></li>
</ul>
<ul>
<li class='section-title'><a href='http://behance.net/alexchavot/'  target="_blank" onclick="do_click();">BEHANCE</a></li>
</ul></em>



<br />
© 2010<h4/>


</div>


le expandingMenu.js est:
Code Javascript :

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);
}
)
}


Le style.css est:
Code HTML :
/**
* 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; }




mardi 16 mars 2010 à 21:27:09 | Re : Garder ouvert un menu accordeon

AlexFaitDesChoses

J'ai posté ce message ici car dans la partie PHP, on m'a dit qu'il s'agissait de javascript...
Personne peut m'aider?
mercredi 17 mars 2010 à 19:02:02 | Re : Garder ouvert un menu accordeon

PetoleTeam

Membre Club
Bonjour,
voir du coté des cookies pour enregistrer l'état de tes menus et lire à l'ouverture pour récupérer et appliquer le même état.
;O)


Cette discussion est classée dans : menu, font, color, margin, 0px


Répondre à ce message

Sujets en rapport avec ce message

Le background ne s'affiche pas sous IE7 [ par 311064 ] BonjourJ'ai des soucis avec l'affichage du background sous IE7.Il fonctionne bien sous Firefoxe mais sous IE7 l'image de fond de la page ne s'affiche [css]pas assez d'espace entre corps et banniere [ par pygo ] salut a tous,j'ai un petit soucis,je suis en train de construire une nouvelle version de mon site mais je n'ai pas assez d'espace entre le corps et la Déroulement menu css et javascript [ par kristale ] Hello! j'ai un petit soucis avec mon menu déroulant. J'aimerai que les sous menus ne disparaissent pas quand on clique dessus, mais qu'ils restent.Et integrer image arriere plan dans menu CSS [ par ju0123456789 ] Bonjour,je viens de mettre en place un menu avec sous menu, et mon probleme est que je voudrais integrer une image d'arriere plan, mais soit ce n'est  Newbie total a besoin d'aide pour inserer menu vertical (html) en JavaScript [ par lhawai1 ] Bonjour a tous,Je suis totalement débutant en la matière et je connais depuis peu le mot "JavaScript". Je suis assomé d'information depuis que j'ai co Menu glissant sous html ne fonctionne pas sous DOCTYPE XHTML [ par michof ] Bonjour,J'ai construit un petit menu glissant tout simple en CSS et javascript qui fonctionne très bien en HTML, mais sous XHTML il bloque. Le menu es PB menu dynamique - affichage pas terrible [ par chabgyver ] Bonjour,J'ai placé un menu sur un site que je suis en train de faire, il s'agit d'un menu horizontal dynamique.Voici le code html de ce dernier :<br Conflit OnMouseOut et OnClick [ par rehtakulveets ] Bonjour à tous. Je sais que le sujet a déjà été traité mais mon problème est un peu différent et je n'arrive pas à m'en sortir. J'ai récupéré un code Prb de décalage de DIV sous IE [ par softarg24 ] Bonjour,Voici l'adresse du site que je tente de faire pour des amis. Je suis loin d'être experte:http://www.so6online.net/exploitation.php Sous intern mon menu et toujour ouver php/mysql/javacript [ par ramirez21000 ] je veut que mon menu soit fermer  et on clicon ou onmousover les sous menu apparesstvoila mon travail*************************************************


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,574 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales