Problème Menu Déroulant Extensible
Nyx'
Messages postés
1
Statut
Membre
-
math 2000 Messages postés 2833 Statut Membre -
math 2000 Messages postés 2833 Statut Membre -
Bonjour,
Alors voila, j'ai fait un design composé de div, le tout est en pourcentages, il s'adapte en hauteur comme en largeur, peu importe l'écran ou la résolution que l'utilisateur as.
Mon problème ce situe au niveau du menu.
En effet je n'arrive pas à le rendre extensible, à faire en sorte qu'il s'adapte à la hauteur et la largeur de la div dans laquelle il est mis. Si je met en % au lieu de px, la largeur des éléments du menu s'adaptent en fonction du contenu, donc du texte, c'est assez genant.
Aussi j'aimerais savoir si il était possible d'obtenir le même effet de survol, tout simple avec le sous menu qui s'affiche par dessus le reste du site sous forme de colonne sans le javascript, Mais cette solution doit être compatible tout navigateur, au pire une solution comme du css pour les bon navigateurs et qqch comme If IE, bla bla bla.
Voici à quoi ressemble mon code.
Code : CSS
@charset "utf-8";
/* CSS Document */
html { overflow:hidden;}
body { margin: 0; padding: 0; overflow:hidden; font:Arial, Helvetica, sans-seri; font-size: 1em; font-weight: lighter; behavior: url(csshover.htc)}
html, body, .conteneur, .header, .footer { width: 100%;}
html, body, .conteneur, .f_c, .borderLeft, .borderRight { height: 100%;}
.h_c, .f_c, .menu, .frame { width: 75%; max-width: 75%; margin: 0 auto;}
.borderLeft, .borderRight { width: 30px; position:absolute; background-repeat:repeat-y;}
.header, .footer { background: #2cb40d;}
.h_c, f_c { background: #4ec732; }
.conteneur { background: #fff; position: relative; min-height: 86%; }
.header { height: 11%;}
.h_c { height: 70%;}
.menu { height: 30%;}
.borderLeft { background: url(images/borderLeft.png); left: 10.15%;}
.borderRight { background: url(images/borderRight.png); right: 10.15%;}
.frame { height: 86%; margin: 0 auto; background: #fff; overflow: auto;}
.contenu { width: 98%; height: 96%; padding: 1%}
.footer { height: 2.5%; bottom:0; position:absolute;}
p { margin: 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: black;}
/* Menu */
#menu, #menu ul { padding : 0; margin : 0; list-style : none; line-height : 22px; text-align : center;}
#menu { font-weight : bold; font-family : Arial; font-size : 12px; height: 100%;}
#menu a { display : block; padding : 0; background : #4ec732; color : #fff; text-decoration : none; width : 144px;}
#menu a:hover { color: #000; background: #fff;}
#menu li { float : left; border-right : 1px solid #fff;}
html>body #menu li { border-right: 0px solid transparent ;}
#menu li ul { position: absolute; width: 144px; left: -999em;}
#menu li ul li { border-top : 1px solid #fff;}
#menu li ul ul { margin : -22px 0 0 144px ; border-left : 1px solid #fff ;}
html>body #menu li ul ul { border-left: 1px solid transparent ;}
html>body #menu li ul li { border-top: 1px solid transparent;}
#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;}
Code : JavaScript
// JavaScript Document
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);
Code : HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div class="conteneur">
<div class="header">
<div class="borderRight"></div>
<div class="borderLeft"></div>
<div class="h_c"></div>
<div class="menu">
<ul id="menu">
<li><a href="#">1</a>
<ul>
<li><a href="#">1.1</a></li>
<li><a href="#">1.2</a></li>
</ul>
</li>
<li><a href="#">2</a>
<ul>
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
<li><a href="#">2.3</a></li>
<li><a href="#">2.4</a></li>
</ul>
</li>
<li><a href="#">3</a>
<ul>
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a></li>
</ul>
</li>
<li><a href="#">4</a></li>
</ul>
</div>
</div>
<div class="borderRight"></div>
<div class="borderLeft"></div>
<div class="frame">
<div class="contenu">
<p>Texte</p>
</div>
</div>
<div class="footer">
<div class="borderRight"></div>
<div class="borderLeft"></div>
<div class="f_c">Tout droits réservés</div>
</div>
</div>
</body>
</html>
En vous remerciant.
Alors voila, j'ai fait un design composé de div, le tout est en pourcentages, il s'adapte en hauteur comme en largeur, peu importe l'écran ou la résolution que l'utilisateur as.
Mon problème ce situe au niveau du menu.
En effet je n'arrive pas à le rendre extensible, à faire en sorte qu'il s'adapte à la hauteur et la largeur de la div dans laquelle il est mis. Si je met en % au lieu de px, la largeur des éléments du menu s'adaptent en fonction du contenu, donc du texte, c'est assez genant.
Aussi j'aimerais savoir si il était possible d'obtenir le même effet de survol, tout simple avec le sous menu qui s'affiche par dessus le reste du site sous forme de colonne sans le javascript, Mais cette solution doit être compatible tout navigateur, au pire une solution comme du css pour les bon navigateurs et qqch comme If IE, bla bla bla.
Voici à quoi ressemble mon code.
Code : CSS
@charset "utf-8";
/* CSS Document */
html { overflow:hidden;}
body { margin: 0; padding: 0; overflow:hidden; font:Arial, Helvetica, sans-seri; font-size: 1em; font-weight: lighter; behavior: url(csshover.htc)}
html, body, .conteneur, .header, .footer { width: 100%;}
html, body, .conteneur, .f_c, .borderLeft, .borderRight { height: 100%;}
.h_c, .f_c, .menu, .frame { width: 75%; max-width: 75%; margin: 0 auto;}
.borderLeft, .borderRight { width: 30px; position:absolute; background-repeat:repeat-y;}
.header, .footer { background: #2cb40d;}
.h_c, f_c { background: #4ec732; }
.conteneur { background: #fff; position: relative; min-height: 86%; }
.header { height: 11%;}
.h_c { height: 70%;}
.menu { height: 30%;}
.borderLeft { background: url(images/borderLeft.png); left: 10.15%;}
.borderRight { background: url(images/borderRight.png); right: 10.15%;}
.frame { height: 86%; margin: 0 auto; background: #fff; overflow: auto;}
.contenu { width: 98%; height: 96%; padding: 1%}
.footer { height: 2.5%; bottom:0; position:absolute;}
p { margin: 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: black;}
/* Menu */
#menu, #menu ul { padding : 0; margin : 0; list-style : none; line-height : 22px; text-align : center;}
#menu { font-weight : bold; font-family : Arial; font-size : 12px; height: 100%;}
#menu a { display : block; padding : 0; background : #4ec732; color : #fff; text-decoration : none; width : 144px;}
#menu a:hover { color: #000; background: #fff;}
#menu li { float : left; border-right : 1px solid #fff;}
html>body #menu li { border-right: 0px solid transparent ;}
#menu li ul { position: absolute; width: 144px; left: -999em;}
#menu li ul li { border-top : 1px solid #fff;}
#menu li ul ul { margin : -22px 0 0 144px ; border-left : 1px solid #fff ;}
html>body #menu li ul ul { border-left: 1px solid transparent ;}
html>body #menu li ul li { border-top: 1px solid transparent;}
#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;}
Code : JavaScript
// JavaScript Document
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);
Code : HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div class="conteneur">
<div class="header">
<div class="borderRight"></div>
<div class="borderLeft"></div>
<div class="h_c"></div>
<div class="menu">
<ul id="menu">
<li><a href="#">1</a>
<ul>
<li><a href="#">1.1</a></li>
<li><a href="#">1.2</a></li>
</ul>
</li>
<li><a href="#">2</a>
<ul>
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
<li><a href="#">2.3</a></li>
<li><a href="#">2.4</a></li>
</ul>
</li>
<li><a href="#">3</a>
<ul>
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a></li>
</ul>
</li>
<li><a href="#">4</a></li>
</ul>
</div>
</div>
<div class="borderRight"></div>
<div class="borderLeft"></div>
<div class="frame">
<div class="contenu">
<p>Texte</p>
</div>
</div>
<div class="footer">
<div class="borderRight"></div>
<div class="borderLeft"></div>
<div class="f_c">Tout droits réservés</div>
</div>
</div>
</body>
</html>
En vous remerciant.
A voir également:
- Problème Menu Déroulant Extensible
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Canon quick menu - Télécharger - Utilitaires
- Supprimer menu déroulant excel - Forum Excel
