Bonsoir,
Après maintes recherches sur le net (et votre site), je n'ai pas trouvé de solution à mon pbm d'affichage de mon menu.
C'est 1 menu à 2 niveaux dont le 2ème niveau est caché et ne s'affiche que lors le curseur passe sur le 1er niveau. ca fonctionne mal (sous IE et FF).
Je pense que c'est la propriété Visibility qui pose pbm.
Il y 3 fichiers : 1 html, 1 css, et 1 JS (pour IE !)
Si qqun pouvait jeter un oeil et me dire ce qui fait défaut, je précise que je suis débutante et que je me suis farçie 36 sites, forums, tutos etc depuis plusieurs semaines, en vain. J'ai bien mérité un peu d'aide non ?
je joins les 3 fichiers en question.
Merci à l'âme charitable qui pourra me dépanner (je craque)
Titus2
HTML :
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Accueil</a></li>
<li><a href="#">Actualités</a></li>
<li><a href="#">Qui sommes-nous ?</a></li>
<li><a href="#">Nos lieux d'accueil</a>
<ul><li><a href="#">La Chaume</a></li>
<li><a href="#">Oaza</a></li></ul></li>
<li><a href="#">Vidéos & bulletins</a></li>
<li><a href="#">Nos actions</a>
<ul><li><a href="#">Sauvetages</a></li>
<li><a href="#">Campagnes de stérilisations</a></li></ul></li>
<li><a href="#">Adoptions</a>
<ul><li><a href="#">Photos des candidats</a></li>
<li><a href="#">Formalités d'adoption</a></li></ul></li>
<li><a href="#">Comment nous aider ?</a></li>
<li><a href="#">Liens & partenaires</a></li>
<li><a href="#">Nous contacter</a></li></ul></div>
CSS :
.sidebarmenu ul{
margin: 216px 25px;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 190px; /* Main Menu Item width */
border-bottom: 1px solid #ccc;
}
.sidebarmenu ul li{
position: relative;
}
/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
color: white;
text-decoration:none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #CCCCCC; /*background of tabs (default state)*/
}
.sidebarmenu ul li a:visited{
color: white;
}
.sidebarmenu ul li a:hover{
background-color: rosybrown;
}
/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
float:right;
top: -216px;
width: 170px; /*Sub Menu Items width */
visibility:collapse;
}
.sidebarmenu a.subfolderstyle{
background: url(Flechedroite.gif) no-repeat 97% 50%;
}
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 29px; }
* html .sidebarmenu ul li a { height: 25%; }
/* End */
Javascript (inséré dans le html entre les balises head) :
<script type="text/javascript">
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}
if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)
</script>
[/i]
Après maintes recherches sur le net (et votre site), je n'ai pas trouvé de solution à mon pbm d'affichage de mon menu.
C'est 1 menu à 2 niveaux dont le 2ème niveau est caché et ne s'affiche que lors le curseur passe sur le 1er niveau. ca fonctionne mal (sous IE et FF).
Je pense que c'est la propriété Visibility qui pose pbm.
Il y 3 fichiers : 1 html, 1 css, et 1 JS (pour IE !)
Si qqun pouvait jeter un oeil et me dire ce qui fait défaut, je précise que je suis débutante et que je me suis farçie 36 sites, forums, tutos etc depuis plusieurs semaines, en vain. J'ai bien mérité un peu d'aide non ?
je joins les 3 fichiers en question.
Merci à l'âme charitable qui pourra me dépanner (je craque)
Titus2
HTML :
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Accueil</a></li>
<li><a href="#">Actualités</a></li>
<li><a href="#">Qui sommes-nous ?</a></li>
<li><a href="#">Nos lieux d'accueil</a>
<ul><li><a href="#">La Chaume</a></li>
<li><a href="#">Oaza</a></li></ul></li>
<li><a href="#">Vidéos & bulletins</a></li>
<li><a href="#">Nos actions</a>
<ul><li><a href="#">Sauvetages</a></li>
<li><a href="#">Campagnes de stérilisations</a></li></ul></li>
<li><a href="#">Adoptions</a>
<ul><li><a href="#">Photos des candidats</a></li>
<li><a href="#">Formalités d'adoption</a></li></ul></li>
<li><a href="#">Comment nous aider ?</a></li>
<li><a href="#">Liens & partenaires</a></li>
<li><a href="#">Nous contacter</a></li></ul></div>
CSS :
.sidebarmenu ul{
margin: 216px 25px;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 190px; /* Main Menu Item width */
border-bottom: 1px solid #ccc;
}
.sidebarmenu ul li{
position: relative;
}
/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
color: white;
text-decoration:none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #CCCCCC; /*background of tabs (default state)*/
}
.sidebarmenu ul li a:visited{
color: white;
}
.sidebarmenu ul li a:hover{
background-color: rosybrown;
}
/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
float:right;
top: -216px;
width: 170px; /*Sub Menu Items width */
visibility:collapse;
}
.sidebarmenu a.subfolderstyle{
background: url(Flechedroite.gif) no-repeat 97% 50%;
}
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 29px; }
* html .sidebarmenu ul li a { height: 25%; }
/* End */
Javascript (inséré dans le html entre les balises head) :
<script type="text/javascript">
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}
if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)
</script>
[/i]