11548 sujets

JavaScript, DOM et API Web HTML5

Menu déroulant affichage des rubriques au rechargement de la page

Bonjour,

J'ai intégré sur mon site un menu vertical déroulant où lorsque l'on clique sur la rubrique de 1er niveau, on accède aux sous-rubriques.
J'aimerais qu'en rechargeant la page pouvoir conserver l'affichage des sous-rubriques afin de savoir où je me situe dans mon menu.

Voici mon code html :

<!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" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link href="styles.css" rel="stylesheet" type="text/css" /

	<script type="text/javascript">
	<!--
	function toggle(id){
		ul = "ul_" + id;
		img = "img_" + id;
		ulElement = document.getElementById(ul);
		imgElement = document.getElementById(img);
		if (ulElement){
			if (ulElement.className == 'closed'){
				ulElement.className = "opened";
				imgElement.src = "opened.gif";
				}else{
				ulElement.className = "closed";
				imgElement.src = "closed.gif";
				}
			}
		}
	//-->
	</script>
	
</head>

<body>

	<div id="container">

		<div id="left">
			
			<h1>kristen fcty</h1>
				
			<div id="menu1">		
					<ul class="opened">
						<li id="item1"><a onclick="toggle('item1');" id="img_item1">actualités</a></li>
						<li id="item2"><a onclick="toggle('item2');" id="img_item2">travaux</a>
							<ul id="ul_item2" class="closed">
								<li id="item2_1"><a href="badge-me-harder.html">badge me harder</a></li>
								<li id="item2_2"><a href="objetgraphik.html">objetgraphik</a></li>
								<li id="item2_3"><a href="">bsm lorient-keroman</a></li>								
								<li id="item2_4"><a href="">granit</a></li>
							</ul>
						</li>
						<li id="item3"><a href="">Boutique</a></li>
					</ul>
				</div>
				
			</div>
			
			<div id="content">
				<p>
					Paphius quin etiam et Cornelius senatores, ambo venenorum artibus pravis se polluisse confessi, eodem pronuntiante Maximino sunt interfecti. pari sorte etiam procurator monetae extinctus est. Sericum enim et Asbolium supra dictos, quoniam cum hortaretur passim nominare, quos vellent, adiecta religione firmarat, nullum igni vel ferro se puniri iussurum, plumbi validis ictibus interemit. et post hoe flammis Campensem aruspicem dedit, in negotio eius nullo sacramento constrictus.
				</p>
			</div>

	</div>
	
</body>
</html>


Voci le code CSS :

body {
	margin-top: 100px;
	background:#333333 url(images/fond.jpg) fixed no-repeat;
	color: #FFFFFF;
	font-family: Tahoma, Geneva, Helvetica, Arial, sans-serif;
	font-size: 0.77em;
	text-align: left;
}

h1 {
	width: 160px;
	border-bottom: solid 1px #FFFFFF;
	margin-bottom: 20px;
	padding-bottom: 5px;
	color: #FFFFFF;
	font-weight: bold;
}

#container {
	margin-left: 50px;
}

#left {
	float: left;
	width: 200px;
}

#menu1 {
	color: #FFFFFF;
}

#menu1 ul {
	line-height: 20px;
}

#menu1 ul li {
	list-style-type: none;
}

#menu1 ul li a {
	color: #FFFFFF;
	font-weight: bold;
	cursor: pointer;
}

#menu1 ul ul{
	line-height: 20px;
}

#menu1 ul ul li {
	list-style-type: none;
}

#menu1 ul ul li a {
	color: #FFFFFF;
	font-weight: normal;
	cursor: pointer;
}

.opened {
	display: block;
}

.closed {
	display: none;

#content {
	float: left;
	width: 600px;
	margin-top: 19px;
	padding-top: 35px;
	border-top: solid 1px #FFFFFF;
}

#content p.nav {
	position: absolute;
	margin-top: 400px;
	color: #FFFFFF;
}

#content p {
	position: absolute;
	width: 600px;
	margin-top: 430px;
	padding-bottom: 50px;
	color: #FFFFFF;
}

#content a {
	color: #FFFFFF;
}

#content a:hover {
	color: #B00039;
	background-color: #B00039;
}


Je pense qu'il faut avoir une fonction qui enregistre la page où je suis mais bon je n'y connais rien en javascript.

J'espère que vous pourrez m'aider et que vous avez assez d'éléments.

Merci beaucoup

Vinix
Sujet clos
Aller à