|
 Posté le 07/09/2012 @ 14:13 |
Nouvel astucien
| salut à tous . je viens de faire un menu deroulant mais j'arrive pas à le centrer .
merci de bien vouloir m'aider.
fichier html :
<ul id="menu"> <li><a href="index.php">Accueil</a> </li> <li><a href="acadomia.php">ACADOMIA</a> </li> <li><a href="primaire.php">PRIMAIRE</a> </li> <li><a href="college.pfp">COLLEGE</a> </li> <li><a href="secondaire.php">SECONDAIRE</a></li> <li><a href="informatique.php">INFORMATIQUE</a> <ul> <li><a href="tuto.php">PHP</a> <ul> <li><a href="exo.php">EXERCICES</a></li> </ul> </li> <li><a href="ajax.php">AJAX</a></li> <li><a href="site_web.php">SITE WEB</a></li> </ul> </li> <li><a href="enseignant.php">ENSEIGNANTS</a></li> <li><a href="contact.php">CONTACT</a> <ul> <li><a href="rappel.php">ETRE RAPPELE IMMEDIATEMENT</a></li> <li><a href="doc.php">DEMANDE DE DOCUMENT</a></li> <li><a href="agence.php">LOCALISER UNE AGENCE</a></li> <li><a href="joindre_enseignant.php">JOINDRE NOTRE CORPS ENSEIGNANT</a></li> </ul> </li> </ul> <p> </p> <p> <script src="jquery.js"></script> <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
fichier css
/* CSS Document */
#menu, #menu ul { margin:0; padding:0; position:relative; line-height:1.5em; }
#menu a { color:#FFF; background-color:#333; border:1px solid #444; display:block; text-decoration:none; text-align:center; width:125px; }
#menu a:hover { color:#000; background:#FFF; }
#menu li { position:relative; float:left; list-style:none; }
#menu ul { position:absolute; width:150px; top:25px; display:none; }
#menu li ul a { width:150px; float:left; }
#menu ul ul { top:auto; } #menu li ul ul { left:150px; }
|
|
|
|
|
|
Posté le 07/09/2012 à 15:02 |
Maître astucien | Salut
Centrer comment ??? |
|
Posté le 07/09/2012 à 15:08 |
Nouvel astucien
| je veux que tout le menu deroulant se trouve au milieu de la page . bien centré dans la page . et je viens de remarquer que mes sous menus n apparaisse pas :
voici le script que j'ai ajouté :
<script src="jquery.js"></script> <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script> <script> $('#menu li').hover(function(){ $('ul:first',this).css({visibility:"visible",display:"none"}).fadeln(600).show(); },function(){ $('ul:first',this).css({visibility:"hidden"}); }); </script>
|
|
Posté le 07/09/2012 à 15:16 |
Maître astucien | Tu as ouvblié le script de jquery.js pour avoir l'effet de déroulement ...
Si j'ai bien compris, c'est un menu horizontal qui doit être centré ?? |
|
Posté le 07/09/2012 à 15:20 |
Nouvel astucien
| oui un menu deroulant horizontal :
voici le script.
<script src="jquery.js"></script> <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script> <script> $('#menu li').hover(function(){ $('ul:first',this).css({visibility:"visible",display:"none"}).fadeln(600).show(); },function(){ $('ul:first',this).css({visibility:"hidden"}); }); </script> |
|
Posté le 07/09/2012 à 16:16 |
Maître astucien | Bon voici ce que tu veux faire .....
C'est un peu différent, mais facile à modifier !!
J'ai mis le menu dans un script afin de faire les essais, mis en minuscule les titres, etc ..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Test menu déroulant</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> div { width: 900px; margin-left: auto; margin-right: auto; } #menu, #menu ul { padding : 0; margin: 0 list-style: none; line-height : 25px; text-align : center; }
#menu { font-weight : bold; font-family : Arial; font-size : 12px; }
#menu a { display : block; / padding : 0; background : #333; color : #FFF; text-decoration : none; width : 110px; }
#menu li { float : left; border: 1px solid #444; list-style : none; }
html>body #menu li { border-right: 1px solid transparent ; }
#menu li ul /* Sous-listes */ { position: absolute; width: 110px; left: -999em; }
#menu li ul li { border-top : 1px solid #FFF; }
html>body #menu li ul li { border-top : 1px solid transparent; }
#menu li ul ul { margin: -22px 0 0 110px ; border-left : 1px solid #FFF ; }
html>body #menu li ul ul { border-left : 1px solid transparent ; }
#menu a:hover, #menu li ul a:hover { color: #000; background: #FFF; }
#menu li:hover ul ul, #menu li.sfhover ul ul { left: -999em; }
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { left: auto; min-height: 0; }
</style> <script type="text/javascript"> sfHover = function() { var sfEls = document.getElementById("menu").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+="sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> </head> <body> <div> <ul id="menu">
<li><a href="index.php">Accueil</a> </li>
<li><a href="acadomia.php">Acadomia</a> </li>
<li><a href="primaire.php">Primaire</a> </li>
<li><a href="college.pfp">Collège</a> </li>
<li><a href="secondaire.php">Secondaire</a></li>
<li><a href="informatique.php">Informatique</a>
<ul> <li><a href="tuto.php">Php</a>
<ul> <li><a href="exo.php">Exercices</a></li> </ul>
</li> <li><a href="ajax.php">Ajax</a></li> <li><a href="site_web.php">Site web</a></li> </ul>
</li>
<li><a href="enseignant.php">Enseignants</a></li>
<li><a href="contact.php">Contact</a>
<ul> <li><a href="rappel.php">Être rappelé immediatement</a></li> <li><a href="doc.php">Demande de document</a></li> <li><a href="agence.php">Localiser une agence</a></li> <li><a href="joindre_enseignant.php">Joindre notre corps enseignant</a></li> </ul>
</li>
</ul> </div> </body> </html> |
|
Posté le 07/09/2012 à 16:31 |
Nouvel astucien
| oui merci xa marche merci baucoup |
|
Posté le 07/09/2012 à 16:38 |
Maître astucien | Parfait, n'oublies pas de mettre en résolu !! |
|