Menu déroulant html/css php

Fermé

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 - 7 oct. 2012 à 15:02

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:

Menu déroulant html/css php
Menu déroulant excel - Guide
Excel menu déroulant en cascade - Guide
Menu déroulant google sheet - Accueil - Guide bureautique
Editeur html - Télécharger - HTML
Windows 11 menu démarrer classique - Guide

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 ???

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

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 208
6 oct. 2012 à 23:33

Bonsoir on peu voir le code

Réponse 4 / 4

cuistophe Messages postés 4 Date d'inscription samedi 6 octobre 2012 Statut Membre Dernière intervention 7 octobre 2012
Modifié par cuistophe le 7/10/2012 à 15:03

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"); ?>

Discussions similaires

Suppression listes déroulantes

Supprimer liste déroulante Excel

Effacer liste déroulante

supprimer une liste déroulante