> 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
Gratuit3 mois d'abonnement à Amazon Music Unlimited gratuits
Valable jusqu'au 30 Mai

Amazon vous permet d'essayer son service de streaming musical pendant 3 mois gratuitement. Avec Amazon Music Unlimited, accédez à plus de 50 millions de titres, sans publicité et en illimité sur tous vos appareils : smartphone, tablette, PC/Mac, Fire, Alexa. Vous avez même la possibilité de télécharger vos playlists pour des écoutes hors connexion. A la fin de ces 3 mois, vous pourrez basculer vers l'offre payante à 9,99 € / mois ou bien arrêter sans frais le service. A noter l'existence d'une offre famille à 14,99 € / mois qui permet jusqu'à 6 utilisateurs d'écouter leur musique à tout moment et sur leurs appareils préférés. Vous pouvez annuler l'abonnement à tout moment.


> Voir l'offre
9,99 €Bloc multiprise parasurtenseur BRENNENSTUHL 8 prises à 9,99 €
Valable jusqu'au 07 Mai

Cdiscount fait une promotion sur le bloc multiprise parasurtenseur BRENNENSTUHL avec 8 prises à orientation inversée qui passe à 9,99 € au lieu de 20 €. Le câble fait 1,4 m.


> Voir l'offre
20,98 €Clé USB Sandisk Ultra Go 128 Go à double connectique USB 3.1 Type A et C à 20,98 €
Valable jusqu'au 07 Mai

Amazon fait une promotion sur la clé USB Sandisk Ultra Go 128 Go à double connectique USB 3.1 Type A et C qui passe à 20,98 €. Cette clé USB  dispose d'un connecteur USB Type C et d'un connecteur classique de type A. Grâce à elle, transférez en toute simplicité et rapidement (jusqu'à 150 Mo/s) vos fichiers entre vos smartphones, tablettes et ordinateurs. On la trouve ailleurs à plus de 35 €.


> Voir l'offre

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