/// Bonjour la communauté MODx,
Actuellement, je commence à adapter le menu déroulant du Templaite MODxHost (MODx 0.9.6.3) pour mon site. Celui-ci pause des problèmes d’affichage dans IE. En effet, sous IE, tous les onglets sont déployés. De plus, sur FireFox les onglets de second ne s’affiche pas. Voici le code généré dans les <ul></ul> de second degré sous FireFox : <ul style="display:none">.
->> Voici le style CSS de mon menu :
<link rel="stylesheet" href="assets/templates/modxhost/modxmenu.css" type="text/css" media="screen" />
#ajaxmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
#ajaxmenu ul li {
position: relative;
float: left;
width:111px;
display: block;
text-decoration: none;
text-align: center;
font-weight: normal;
}
#ajaxmenu ul li ul {
position: absolute;
left: 0; /* Set 1px less than menu width */
top:28px;
line-height: 16px;
}
#ajaxmenu ul li a {
color: #f5f7f6;
font-weight: bold;
}
/* Styles for Menu Items */
#ajaxmenu ul li.firstcategory {
color: #0d3692;
font-weight: bold;
height: 28px;
line-height: 28px;
padding-right: 0px;
padding-left: 0px;
background-image: url(images/array_332x28.jpg);
background-repeat: no-repeat;
background-position: 0px;
margin: 0px;
}
#ajaxmenu ul li.category {
color: #0d3692;
font-weight: bold;
height: 28px;
line-height: 28px;
padding-right: 0px;
padding-left: 0px;
background-image: url(images/array_332x28.jpg);
background-repeat: no-repeat;
background-position: -111px;
margin: 0px;
}
#ajaxmenu ul li.lastcategory {
color: #0d3692;
font-weight: bold;
height: 28px;
line-height: 28px;
padding-right: 0px;
padding-left: 0px;
background-image: url(images/array_332x28.jpg);
background-repeat: no-repeat;
background-position: -222px;
margin: 0px;
}
#ajaxmenu ul li.firstcategory:hover, #ajaxmenu ul li.firstcategory.over {
color: #fff;
background-image: url(images/array_332x28_roll.jpg);
}
#ajaxmenu ul li.category:hover, #ajaxmenu ul li.category.over {
color: #fff;
background-image: url(images/array_332x28_roll.jpg);
}
#ajaxmenu ul li.lastcategory:hover, #ajaxmenu ul li.lastcategory.over {
color: #fff;
background-image: url(images/array_332x28_roll.jpg);
}
/* commented backslash \*/
* html ul li a {height:1%}
/* end hack */
#ajaxmenu li a {
text-decoration: none;
}
/* hovered lists */
#ajaxmenu li a, #ajaxmenu li.over a {
color: #fff;
width: 111px;
display: block;
}
#ajaxmenu li li a:hover, #ajaxmenu li.over li a:hover {
background-image: url(images/bullet_11x8_roll.gif) !important;
color: #fff;
background-repeat: no-repeat;
background-color: #66b8dc;
background-position: left center;
text-indent: 8pt;
}
/* set dropdown */
#ajaxmenu li li a, #ajaxmenu li.over li a {
color: #ffffff;
background-image: url(images/bullet_11x8.gif) !important;
background-repeat: no-repeat !important;
text-align: left;
border-right: 1px solid #2f2f2f;
border-bottom: 1px solid #2f2f2f;
border-left: 1px solid #2f2f2f;
font-weight: normal;
width: 172px;
background-color: #0d3692;
background-position: left center;
text-indent: 8pt;
}
#ajaxmenu li ul li a {
background-image: url(images/sub_color_4x25.jpg);
background-repeat: repeat-x;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 5px;
padding-left: 5px;
} /* Sub Menu Styles */
#ajaxmenu li ul, #ajaxmenu li.over ul {
display: block;
} /* The pop */
#ajaxmenu {
margin-right: auto;
margin-left: auto;
width: 781px;
}
#myajaxmenu {
position: absolute;
top:1px;
left: 0px;
display: block;
z-index: 1000;
}
->> Voici le code javascript de mon menu :
<script src="assets/templates/modxhost/drop_down_menu.js" type="text/javascript"></script>
/**
* Light Menu System v0.1
* @author Jonathan Schemoul
* @copyright 2006-2007 Holdiland
* @license GPL V2 or newer
*/
var menuEffects = new Class({
initialize: function(selector, options) {
this.options = Object.extend({
subElement: false,
subElementSelector: ’a’
}, options || {})
this.selector = selector;
this.currTimer = 500;
$ES(selector + ’ li ul’).each(function(el) {
el.setStyles({
’display’: ’block’
});
normalHeight = el.offsetHeight;
el.setStyles({
’height’: 0,
’overflow’: ’hidden’
});
elParent = $(el.parentNode);
currentMenu = new Fx.Style(el, ’height’);
elParent.addEvents({
’mouseover’: function(submenu, myParent, targetValue) {
myParent.addClass(’hover’);
submenu.clearTimer();
submenu.custom(targetValue);
}.pass([currentMenu, elParent, normalHeight]),
’mouseout’: function(submenu, myParent, targetValue) {
myParent.removeClass(’hover’);
submenu.clearTimer();
submenu.custom(targetValue);
}.pass([currentMenu, elParent, 0])
})
}.bind(this));
}
});
function processMenuEffects (){
var myMenus = new menuEffects(’#myajaxmenu’, {
subElement: true
});
}
window.onDomReady(processMenuEffects);
Merci pour vos réponses…
BB Poletto
Xopaze Bponer NYC 00
/// ;-)
