Menu déroulant html/css php

cuistophe Messages postés 4 Date d'inscription samedi 6 octobre 2012 Statut Membre Dernière intervention 7 octobre 2012 - 6 oct. 2012 à 19:38
cuistophe Messages postés 4 Date d'inscription samedi 6 octobre 2012 Statut Membre Dernière intervention 7 octobre 2012 -
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
A voir également:

4 réponses

Réponse 1 / 4
cuistophe Messages postés 4 Date d'inscription samedi 6 octobre 2012 Statut Membre Dernière intervention 7 octobre 2012
6 oct. 2012 à 20:46
up ???
0
Réponse 2 / 4
cuistophe Messages postés 4 Date d'inscription samedi 6 octobre 2012 Statut Membre Dernière intervention 7 octobre 2012
6 oct. 2012 à 21:55
je galère répondez moi svp
0
Réponse 3 / 4
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012
6 oct. 2012 à 23:33
Bonsoir on peu voir le code
0
Réponse 4 / 4
cuistophe Messages postés 4 Date d'inscription samedi 6 octobre 2012 Statut Membre Dernière intervention 7 octobre 2012
7 oct. 2012 à 15:02
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"); ?>
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
menu caché
laurent -
ChariduP -

7 réponses
supprimer une liste déroulante
fred94 -
m@rina -

3 réponses