Mettre mon menu dans une feuille de style

par **Wendy** » 25 juin 2005, 16:07

Merci bien.

par **naholyr** » 25 juin 2005, 16:04

Tu veux ne pas répéter quoi ? Le style ou bien le menu en entier ?

Pour le style, tu copies ce qu'il y a entre <style> et </style> dans un fichier style.css, et tu le supprimes de la page de base. Tu remplaceras la balise <style> par une balise <link> : <link href="style.css" rel="stylesheet" type="text/css" /> qui permet d'indiquer au navigateur la feuille de style à utiliser.

Pour le menu, le seul moyen (hors PHP) c'est de convertir ton code HTML en un script Javascript qui l'affichera (document.write), que tu mettras dans un fichier menu.js. Et tu remplaceras dans tes pages ton menu par <script type="text/javascript" language="javascript" src="menu.js"></script>

Je te conseille personnellement de ne choisir que la première méthode, qui te fera déjà gagner pas mal de place sur tes pages.

par **Wendy** » 25 juin 2005, 15:26

Bonjour, j'ai un menu dans ma page menu.html et j'aimerais le mettre dans ma feuille de style style.css pour pas avoir à le refaire à chaque page de mon futur site.

Voici le code de la page menu.html

Code : Tout sélectionner

<html>
<head>

</head>
<body>

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

<style type="text/css">
<!--
body {
background: white;
padding:0;
margin:0;
font-family: verdana, arial, sans-serif;
font-size: 90%;
color: black;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 1em;
left: 1em;
width: 10em;
}

#menu dt {
cursor: pointer;
background: #A9BFCB;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid gray;
text-align: center;
font-weight: bold;
}

#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #A9BFCB;
border: 1px solid gray;
}

#menu ul {
padding: 2px;
}
#menu li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
}

#menu li a:hover {
text-decoration: underline;
}


#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
-->
</style>

<dl id="menu">
		<dt onclick="javascript:montre('smenu1');"><a href="http://www.google.fr">Menu 1</a></dt>
			
		<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Menu 2</dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
				</ul>
			</dd>	

		<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Menu 3</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>

		<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Menu 4</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.1</a></li>
				</ul>
			</dd>
</dl>

</body>
</html>

Mettre mon menu dans une feuille de style

Répondre

Étendre la vue Revue du sujet : Mettre mon menu dans une feuille de style

Mettre mon menu dans une feuille de style