|
 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 !! |
|
centrer mon menu deroulant
À LA UNE
PRATIQUE
LOGITHÈQUE
TABLETTE ET MOBILE
BONS PLANS
FONDS D'ÉCRAN
JEUX
FORUM
