Menu déroulant html/css php
Bonjour,
Voilà je désire inclure un menu dans mes pages, le menu est créé en html, avec un script qui le rappel et un feuille css pour le style de mon menu, jusque là ça va
http://cuistophe.free.fr/screen2.jpg
Par contre quand je veux l'intégrer à mes pages php, mon menu n'apparait pas comme il devrait mais avec toute l'arborescence, peut on m'aider voici un screen
http://cuistophe.free.fr/screen.jpg
Voilà je désire inclure un menu dans mes pages, le menu est créé en html, avec un script qui le rappel et un feuille css pour le style de mon menu, jusque là ça va
http://cuistophe.free.fr/screen2.jpg
Par contre quand je veux l'intégrer à mes pages php, mon menu n'apparait pas comme il devrait mais avec toute l'arborescence, peut on m'aider voici un screen
http://cuistophe.free.fr/screen.jpg
4 réponses
-
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" lang="fr">
<head>
<title>Menu horizontal déroulant</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div id="centrer">
<div id="menu">
<ul>
<li onmouseover="montre('smenu5',true);" onmouseout="montre('smenu5',false);">Menu 5
<ul id="smenu5">
<li onmouseover="montre('smenu51',true);" onmouseout="montre('smenu51',false);"><a href="#">smenu51</a>
<ul class="dernier" id="smenu51">
<li><a href="#">smenu511</a></li>
<li><a href="#">smenu512</a></li>
<li><a href="#">smenu513</a></li>
</ul>
<li onmouseover="montre('smenu52',true);" onmouseout="montre('smenu52',false);"><a href="#">smenu52</a>
<ul class="dernier" id="smenu52">
<li><a href="#">smenu521</a></li>
<li><a href="#">smenu522</a></li>
<li><a href="#">smenu523</a></li>
</ul>
<li onmouseover="montre('smenu53',true);" onmouseout="montre('smenu53',false);"><a href="#">smenu53</a>
<ul class="dernier" id="smenu53">
<li><a href="#">smenu531</a></li>
<li><a href="#">smenu532</a></li>
<li><a href="#">smenu533</a></li>
</ul>
</ul>
<li onmouseover="montre('smenu4',true);" onmouseout="montre('smenu4',false);">Menu 4
<ul id="smenu4">
<li onmouseover="montre('smenu41',true);" onmouseout="montre('smenu41',false);"><a href="#">smenu41</a>
<ul id="smenu41">
<li><a href="#">smenu411</a></li>
<li><a href="#">smenu412</a></li>
<li><a href="#">smenu413</a></li>
</ul>
<li onmouseover="montre('smenu42',true);" onmouseout="montre('smenu42',false);"><a href="#">smenu42</a>
<ul id="smenu42">
<li><a href="#">smenu421</a></li>
<li><a href="#">smenu422</a></li>
<li><a href="#">smenu423</a></li>
</ul>
<li><a href="#">smenu43</a></li>
<li><a href="#">smenu44</a></li>
</ul>
<li onmouseover="montre('smenu3',true);" onmouseout="montre('smenu3',false);">Menu 3
<ul id="smenu3">
<li onmouseover="montre('smenu31',true);" onmouseout="montre('smenu31',false);"><a href="#">smenu31</a>
<ul id="smenu31">
<li><a href="#">smenu311</a></li>
<li><a href="#">smenu312</a></li>
<li><a href="#">smenu313</a></li>
</ul>
<li><a href="#">smenu32</a></li>
<li><a href="#">smenu33</a></li>
<li><a href="#">smenu34</a></li>
<li onmouseover="montre('smenu35',true);" onmouseout="montre('smenu35',false);"><a href="#">smenu35</a>
<ul id="smenu35">
<li><a href="#">smenu352</a></li>
<li><a href="#">smenu353</a></li>
</ul>
<li onmouseover="montre('smenu36',true);" onmouseout="montre('smenu36',false);"><a href="#">smenu36</a>
<ul id="smenu36">
<li><a href="#">smenu361</a></li>
<li><a href="#">smenu362</a></li>
<li><a href="#">smenu363</a></li>
</ul>
</ul>
<li onmouseover="montre('smenu2',true);" onmouseout="montre('smenu2',false);">Menu 2
<ul id="smenu2">
<li><a href="#">smenu21</a></li>
<li><a href="#">smenu22</a></li>
<li><a href="#">smenu23</a></li>
<li onmouseover="montre('smenu24',true);" onmouseout="montre('smenu24',false);"><a href="#">smenu24</a>
<ul id="smenu24">
<li><a href="#">smenu241</a></li>
<li><a href="#">smenu242</a></li>
<li><a href="#">smenu243</a></li>
</ul>
</ul>
<li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);">Menu 1
<ul id="smenu1">
<li onmouseover="montre('smenu11',true);" onmouseout="montre('smenu11',false);"><a href="#">Vocabulaire pro</a>
<ul id="smenu11">
<li><a href="vocpro/A.php">A</a></li>
<li><a href="#">B</a></li>
</ul>
<li><a href="#">smenu12</a></li>
<li onmouseover="montre('smenu13',true);" onmouseout="montre('smenu13',false);"><a href="#">smenu13</a>
<ul id="smenu13">
<li><a href="#">smenu131</a></li>
<li><a href="#">smenu132</a></li>
<li><a href="#">smenu133</a></li>
</ul>
</ul>
</ul>
</div>
</div>
</body>
</html>
Code CSS :
* {
margin:0px;
padding:0px;
background:#ffffff;
text-align:center;
}
body{
font-family:Arial, Helvetica, sans-serif;
}
img {
border:none;
}
a {
color:#000000;
text-decoration:none;
text-transform:none;
}
/*centre la page et donne la largeur pour une basse résolution*/
#centrer {
margin-left:auto;
margin-right:auto;
width:776px;
}
/****************************/
/* début menu déroulant */
/****************************/
ul, li {
list-style-type:none;
}
/*chaque sous-menu*/
#menu ul li {
position:relative;
float:right;
width:125px;
cursor:pointer;
display:block;
background:none;
height:22px;
}
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
display:none;
position:absolute;
width:125px;
border:1px solid #dddddd;
border-top:none;
top:22px;
left:0;
}
#menu ul li ul li {
height:100%;
}
#menu ul li ul li a {
color:#3399ff;
font-size:11px;
font-weight:normal;
display:block;
height:100%;
border-top:1px solid #dddddd;
}
/*au passage de la souris on inverse les couleurs de la case*/
#menu ul li ul li a:hover {
color:#ffffff;
background:#3399ff;
}
/*décalage des sous-menu niveau 2 vers la droite*/
#menu ul li ul li ul {
top:0px;
left:125px;
}
/*décalage du sous-menu niveau 2 le plus à droite vers la gauche*/
#menu ul li ul li ul.dernier {
left:-127px;
}
Code javascript :
//au chargement de la page, on appelle la fonction montre()
window.onload=montre;
//affichage du menu déroulant et placement de ce dernier
function montre(id,affiche)
{
var d = document.getElementById(id);
//si on quitte un élément du menu
if (d && !affiche)
{
d.style.display='none'; //on l'efface
var c=d.parentNode; //son parent
if (c.parentNode.parentNode.parentNode.tagName!='DIV') //si c'est un sous-menu, on rend à son parent les couleurs d'origine
{
c.firstChild.style.color='#39f';
c.firstChild.style.background='#fff';
}
}
//sinon si on se mets sur un élément du menu
else if (d && affiche)
{
d.style.display='block'; //on l'affiche
var c=d.parentNode; //son parent
if (c.parentNode.parentNode.parentNode.tagName!='DIV') //si c'est un sous-menu, on donne à son parent les couleurs de survol
{
c.firstChild.style.color='#fff';
c.firstChild.style.background='#39f';
}
}
}
Et j'appelle le menu avec la commande php :
<?php include("menu.php"); ?> -
Bonsoir on peu voir le code
-
je galère répondez moi svp
-
up ???
