> Tous les forums > Forum des Webmasters
 centrer mon menu deroulantSujet résolu
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
msi79
  Posté le 07/09/2012 @ 14:13 
Aller en bas de la page 
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>&nbsp;</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;
}

Publicité
Dreamer
 Posté le 07/09/2012 à 15:02 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Salut

Centrer comment ???

msi79
 Posté le 07/09/2012 à 15:08 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
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>

Dreamer
 Posté le 07/09/2012 à 15:16 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  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é ??

msi79
 Posté le 07/09/2012 à 15:20 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
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>

Dreamer
 Posté le 07/09/2012 à 16:16 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  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>

msi79
 Posté le 07/09/2012 à 16:31 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Nouvel astucien

oui merci xa marche merci baucoup

Dreamer
 Posté le 07/09/2012 à 16:38 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Parfait, n'oublies pas de mettre en résolu !!

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
Disque dur externe Western Digital Elements Desktop USB 3.0 18 To
299,72 € 400 € -25%
@Amazon Allemagne
Batterie externe Ampace Andes 1500, 2400W, LifePOE4
599 € 899 € -33%
@Geekbuying
Tournevis électrique de précision Xiaomi (24 embouts, informatique, électronique)
24,59 € 49,99 € -51%
@AliExpress
Ecran PC 34 pouces incurvé BenQ EX3415R (WQHD, HDR, FreeSync, 144Hz)
689,04 € 900 € -23%
@Amazon
Lot de 2 étagères de rangement Songmics à 5 niveaux réglables (40 x 90 x 180 cm)
48,59 € 80 € -39%
@Amazon
Ecran 27 pouces KTC H27T27 (QHD, IPS, 100 Hz, 1 ms, HDR10)
89,05 € 120 € -26%
@AliExpress

Sujets relatifs
centrer un menu deroulant horizontal / CSS-HTML
Centrer menu!!
Target dans menu déroulant "option value=...." html
Comment centrer le menu
Menu déroulant devenu inactif
menu deroulant vertical
aide pour menu déroulant
menu déroulant pas en place!
menu déroulant. : décalage sous-menu
menu déroulant - petit soucis
Plus de sujets relatifs à centrer mon menu deroulant
 > Tous les forums > Forum Forum des Webmasters