In FF werkt alles perfect, in IE toont hij eerst alle subitems en klapt dan in tot de items die hij nodig heeft, er gebeurt dus geen slide.
voorbeeld is te zien op http://www.haco.com/sales
inloggen met 'test' en 'test' (zonder ' )
wat code:
css
<style type="text/css">
.clear{
clear:both;
}
#mainContainer{
width:960px;
text-align:left;
margin:0 auto;
/*border-left:1px solid #000;
border-right:1px solid #000;*/
height:100%;
}
#languages{
top:81px;
left: 350px;
z-index:100;
position:absolute;
}
#logout{
top:80px;
left: 85%;
z-index:100;
position:absolute;
}
#logout img{
border: none;
}
#logout a{
text-decoration:none;
}
#languages img{
border: none;
}
#languages a{
text-decoration:none;
}
#leftMenu{
width:200px;
padding-left:10px;
padding-right:10px;
float:left;
}
#mainContent{
width: 720px;
padding-right:10px;
float:left;
}
/*
General rules
*/
#dhtmlgoodies_slidedown_menu li{
list-style-type:none;
position:relative;
}
#dhtmlgoodies_slidedown_menu ul{
margin:0px;
padding:0px;
position:relative;
}
#dhtmlgoodies_slidedown_menu div{
margin:0px;
padding:0px;
}
/* Layout CSS */
#dhtmlgoodies_slidedown_menu{
width:205px;
}
/* All A tags - i.e menu items. */
#dhtmlgoodies_slidedown_menu a{
color: #ffffff;
text-decoration:none;
display:block;
clear:both;
width:170px;
padding-left:2px;
}
/*
A tags
*/
#dhtmlgoodies_slidedown_menu .slMenuItem_depth1{ /* Main menu items */
margin-top:1px;
border-bottom:1px solid #ffffff;
font-weight:bold;
color: #FFffff;
}
#dhtmlgoodies_slidedown_menu .slMenuItem_depth2{ /* Sub menu items */
margin-top:1px;
}
#dhtmlgoodies_slidedown_menu .slMenuItem_depth3{ /* Sub menu items */
margin-top:1px;
font-style:italic;
color: #CCCCCC;
}
#dhtmlgoodies_slidedown_menu .slMenuItem_depth4{ /* Sub menu items */
margin-top:1px;
color: #999999;
}
#dhtmlgoodies_slidedown_menu .slMenuItem_depth5{ /* Sub menu items */
margin-top:1px;
}
/* UL tags, i.e group of menu utems.
It's important to add style to the UL if you're specifying margins. If not, assign the style directly
to the parent DIV, i.e.
#dhtmlgoodies_slidedown_menu .slideMenuDiv1
instead of
#dhtmlgoodies_slidedown_menu .slideMenuDiv1 ul
*/
#dhtmlgoodies_slidedown_menu .slideMenuDiv1 ul{
padding:1px;
}
#dhtmlgoodies_slidedown_menu .slideMenuDiv2 ul{
margin-left:5px;
padding:1px;
}
#dhtmlgoodies_slidedown_menu .slideMenuDiv3 ul{
margin-left:10px;
padding:1px;
}
#dhtmlgoodies_slidedown_menu .slMenuItem_depth4 ul{
margin-left:15px;
padding:1px;
}
</style>
javascript
<script type="text/javascript">
var expandFirstItemAutomatically = false; // Expand first menu item automatically ?
var initMenuIdToExpand = false; // Id of menu item that should be initially expanded. the id is defined in the <li> tag.
var expandMenuItemByUrl = true; // Menu will automatically expand by url - i.e. if the href of the menu item is in the current location, it will expand
var initialMenuItemAlwaysExpanded = true; // NOT IMPLEMENTED YET
var dhtmlgoodies_slmenuObj;
var divToScroll = false;
var ulToScroll = false;
var divCounter = 1;
var otherDivsToScroll = new Array();
var divToHide = false;
var parentDivToHide = new Array();
var ulToHide = false;
var offsetOpera = 0;
if(navigator.userAgent.indexOf('Opera')>=0)offsetOpera=1;
var slideMenuHeightOfCurrentBox = 0;
var objectsToExpand = new Array();
var initExpandIndex = 0;
var alwaysExpanedItems = new Array();
function popMenusToShow()
{
var obj = divToScroll;
var endArray = new Array();
while(obj && obj.tagName!='BODY'){
if(obj.tagName=='DIV' && obj.id.indexOf('slideDiv')>=0){
var objFound = -1;
for(var no=0;no<otherDivsToScroll.length;no++){
if(otherDivsToScroll[no]==obj){
objFound = no;
}
}
if(objFound>=0){
otherDivsToScroll.splice(objFound,1);
}
}
obj = obj.parentNode;
}
}
function showSubMenu(e,inputObj)
{
if(this && this.tagName)inputObj = this.parentNode;
if(inputObj && inputObj.tagName=='LI'){
divToScroll = inputObj.getElementsByTagName('DIV')[0];
for(var no=0;no<otherDivsToScroll.length;no++){
if(otherDivsToScroll[no]==divToScroll)return;
}
}
hidingInProcess = false;
if(otherDivsToScroll.length>0){
if(divToScroll){
if(otherDivsToScroll.length>0){
popMenusToShow();
}
if(otherDivsToScroll.length>0){
autoHideMenus();
hidingInProcess = true;
}
}
}
if(divToScroll && !hidingInProcess){
divToScroll.style.display='';
otherDivsToScroll.length = 0;
otherDivToScroll = divToScroll.parentNode;
otherDivsToScroll.push(divToScroll);
while(otherDivToScroll && otherDivToScroll.tagName!='BODY'){
if(otherDivToScroll.tagName=='DIV' && otherDivToScroll.id.indexOf('slideDiv')>=0){
otherDivsToScroll.push(otherDivToScroll);
}
otherDivToScroll = otherDivToScroll.parentNode;
}
ulToScroll = divToScroll.getElementsByTagName('UL')[0];
if(divToScroll.style.height.replace('px','')/1<=1)scrollDownSub();
}
}
function autoHideMenus()
{
if(otherDivsToScroll.length>0){
divToHide = otherDivsToScroll[otherDivsToScroll.length-1];
parentDivToHide.length=0;
var obj = divToHide.parentNode.parentNode.parentNode;
while(obj && obj.tagName=='DIV'){
if(obj.id.indexOf('slideDiv')>=0)parentDivToHide.push(obj);
obj = obj.parentNode.parentNode.parentNode;
}
var tmpHeight = (divToHide.style.height.replace('px','')/1 - slideMenuHeightOfCurrentBox);
if(tmpHeight<0)tmpHeight=0;
if(slideMenuHeightOfCurrentBox)divToHide.style.height = tmpHeight + 'px';
ulToHide = divToHide.getElementsByTagName('UL')[0];
slideMenuHeightOfCurrentBox = ulToHide.offsetHeight;
scrollUpMenu();
}else{
slideMenuHeightOfCurrentBox = 0;
showSubMenu();
}
}
function scrollUpMenu()
{
var height = divToHide.offsetHeight;
height-=15;
if(height<0)height=0;
divToHide.style.height = height + 'px';
for(var no=0;no<parentDivToHide.length;no++){
parentDivToHide[no].style.height = parentDivToHide[no].getElementsByTagName('UL')[0].offsetHeight + 'px';
}
if(height>0){
setTimeout('scrollUpMenu()',5);
}else{
divToHide.style.display='none';
otherDivsToScroll.length = otherDivsToScroll.length-1;
autoHideMenus();
}
}
function scrollDownSub()
{
if(divToScroll){
var height = divToScroll.offsetHeight/1;
var offsetMove =Math.min(15,(ulToScroll.offsetHeight - height));
height = height +offsetMove ;
divToScroll.style.height = height + 'px';
for(var no=1;no<otherDivsToScroll.length;no++){
var tmpHeight = otherDivsToScroll[no].offsetHeight/1 + offsetMove;
otherDivsToScroll[no].style.height = tmpHeight + 'px';
}
if(height<ulToScroll.offsetHeight)setTimeout('scrollDownSub()',5); else {
divToScroll = false;
ulToScroll = false;
if(objectsToExpand.length>0 && initExpandIndex<(objectsToExpand.length-1)){
initExpandIndex++;
showSubMenu(false,objectsToExpand[initExpandIndex]);
}
}
}
}
function initSubItems(inputObj,currentDepth)
{
divCounter++;
var div = document.createElement('DIV'); // Creating new div
div.style.overflow = 'hidden';
div.style.position = 'relative';
div.style.display='none';
div.style.height = '1px';
div.id = 'slideDiv' + divCounter;
div.className = 'slideMenuDiv' + currentDepth;
inputObj.parentNode.appendChild(div); // Appending DIV as child element of <LI> that is parent of input <UL>
div.appendChild(inputObj); // Appending <UL> to the div
var menuItem = inputObj.getElementsByTagName('LI')[0];
while(menuItem){
if(menuItem.tagName=='LI'){
var aTag = menuItem.getElementsByTagName('A')[0];
aTag.className='slMenuItem_depth'+currentDepth;
var subUl = menuItem.getElementsByTagName('UL');
if(subUl.length>0){
initSubItems(subUl[0],currentDepth+1);
}
aTag.onclick = showSubMenu;
}
menuItem = menuItem.nextSibling;
}
}
function initSlideDownMenu()
{
dhtmlgoodies_slmenuObj = document.getElementById('dhtmlgoodies_slidedown_menu');
dhtmlgoodies_slmenuObj.style.visibility='visible';
var mainUl = dhtmlgoodies_slmenuObj.getElementsByTagName('UL')[0];
var mainMenuItem = mainUl.getElementsByTagName('LI')[0];
mainItemCounter = 1;
while(mainMenuItem){
if(mainMenuItem.tagName=='LI'){
var aTag = mainMenuItem.getElementsByTagName('A')[0];
aTag.className='slMenuItem_depth1';
var subUl = mainMenuItem.getElementsByTagName('UL');
if(subUl.length>0){
mainMenuItem.id = 'mainMenuItem' + mainItemCounter;
initSubItems(subUl[0],2);
aTag.onclick = showSubMenu;
mainItemCounter++;
}
}
mainMenuItem = mainMenuItem.nextSibling;
}
if(location.search.indexOf('mainMenuItemToSlide')>=0){
var items = location.search.split('&');
for(var no=0;no<items.length;no++){
if(items[no].indexOf('mainMenuItemToSlide')>=0){
values = items[no].split('=');
showSubMenu(false,document.getElementById('mainMenuItem' + values[1]));
initMenuIdToExpand = false;
}
}
}else if(expandFirstItemAutomatically>0){
if(document.getElementById('mainMenuItem' + expandFirstItemAutomatically)){
showSubMenu(false,document.getElementById('mainMenuItem' + expandFirstItemAutomatically));
initMenuIdToExpand = false;
}
}
if(expandMenuItemByUrl)
{
var aTags = dhtmlgoodies_slmenuObj.getElementsByTagName('A');
for(var no=0;no<aTags.length;no++){
var hrefToCheckOn = aTags[no].href;
if(location.href.indexOf(hrefToCheckOn)>=0 && hrefToCheckOn.indexOf('#')<hrefToCheckOn.length-1){
initMenuIdToExpand = false;
var obj = aTags[no].parentNode;
while(obj && obj.id!='dhtmlgoodies_slidedown_menu'){
if(obj.tagName=='LI'){
var subUl = obj.getElementsByTagName('UL');
if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
if(subUl.length>0){
objectsToExpand.unshift(obj);
}
}
obj = obj.parentNode;
}
showSubMenu(false,objectsToExpand[0]);
break;
}
}
}
if(initMenuIdToExpand)
{
objectsToExpand = new Array();
var obj = document.getElementById(initMenuIdToExpand)
while(obj && obj.id!='dhtmlgoodies_slidedown_menu'){
if(obj.tagName=='LI'){
var subUl = obj.getElementsByTagName('UL');
if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
if(subUl.length>0){
objectsToExpand.unshift(obj);
}
}
obj = obj.parentNode;
}
showSubMenu(false,objectsToExpand[0]);
}
}
window.onload = initSlideDownMenu;
</script>
en een stuk van de php code:
<div id="leftMenu">
<div id="dhtmlgoodies_slidedown_menu">
<ul>
<?php
include_once $_SERVER["DOCUMENT_ROOT"]."/sales/includes/connect.php";
$query = mysql_query("SELECT id,".$lang." FROM menu ") or die(mysql_error());
while($row = mysql_fetch_array($query, MYSQL_ASSOC))
{
if (($_SESSION['scountry']=='Canada') AND ($row['id']==1)){
//echo"mag niet";
}else{
?>
<li><!--eerste niveau-->
kan er mij iemand helpen??