menu horizontal avec sous menu déroulant vers le haut

Bonsoir,

J'ai un site qui possède un premier menu déroulant vers le bas dans l'entête de mon site.

J'aurais aimé pouvoir mettre un second menu horizontal dans mon pied de page mais que celui ci se déroule vers le haut cette fois ci.

Donc pour mon menu déroulant se trouvant sur mon entête de page, ce dernier est composé comme suit, j'ai:
1 fichier image "menu_off"
1 fichier image "menu_on"
1 fichier image "texture87298198" (texture du sous menu qui est plus clair quand la souris passe dessus)
1 fichier image "texture81439393" (texture du sous menu qui est plus foncé si la souris n'est pas dessus)
1 fichier image "menubar40751393" (image de ma barre de menu horizontale"
1 fichier JS
1 fichier HTML

Dans le fichier JS il est écrit ce qui suit:


function getElemWidth(Elem) {
    return document.getElementById(Elem).offsetWidth;
}

function getElementLeft(Elem) {
    var elem = document.getElementById(Elem);
    xPos = elem.offsetLeft;
    tempEl = elem.offsetParent;
    while (tempEl != null && tempEl.style.position !== "absolute") {
        xPos += tempEl.offsetLeft;
        tempEl = tempEl.offsetParent;
    }
    return xPos;
}

function getElementTop(Elem) {
    var elem = document.getElementById(Elem);
    yPos = elem.offsetTop;
    tempEl = elem.offsetParent;
    while (tempEl != null && tempEl.style.position !== "absolute") {
        yPos += tempEl.offsetTop;
        tempEl = tempEl.offsetParent;
    }
    return yPos;
}

function moveXY(obid, x, y) {
    obj = document.getElementById(obid).style;
    obj.top = y + 'px';
    obj.left = x + 'px';
}

function changeClass(Elem, myClass) {
    document.getElementById(Elem).className = myClass;
}

function changeBGColor(obid, colour) {
    var obj = document.getElementById(obid);
    if (obj) { obj.style.backgroundColor = colour; }
}

function changeBGImage(obid, imageURL) {
    var obj = document.getElementById(obid);
    if (obj && imageURL) { obj.style.backgroundImage = "url("+imageURL+")"; }
}

function changeBGOffset(obid, textureOffsetX, textureOffsetY) {
    var obj = document.getElementById(obid);
    if (obj) { obj.style.backgroundPosition = textureOffsetX+"px "+textureOffsetY+"px"; }
}

function changeBulletImage(target, source) {
    var imageObj;
    imageObj = eval('document.images.' + target);
    if (imageObj) imageObj.src = eval(source).src;
}

function bulletPoint(offURL, onURL) {   
    if (offURL && onURL) {
        this.offImage = new Image();
        this.offImage.src = offURL;
        this.onImage = new Image();
        this.onImage.src = onURL;
        this.URL = String(offURL);
    }
}

function menuOver(RandInt) {
    clearTimeout(timeOn[RandInt]);
}

function menuOut(RandInt, outColor, outTexture, textureOffsetXOut, textureOffsetYOut) {
    timeOn[RandInt] = setTimeout("hideAllMenus("+RandInt+", \""+outColor+"\", \""+outTexture+"\", "+textureOffsetXOut+", "+textureOffsetYOut+")", 500);
}

function showMenu(m_No, RandInt, overColor, overTextureURL, outColor, outTextureURL, textureOffsetXOut, textureOffsetYOut, textureOffsetXOver, textureOffsetYOver) {
    hideAllMenusTier(tier[RandInt][m_No]-1, RandInt, outColor, outTextureURL, textureOffsetXOut, textureOffsetYOut);
    var borderModSize = borderMod[RandInt];
    var borderModSizeIEHack = borderModIEHack[RandInt];
    changeBGColor('labelCell' + RandInt + m_No, overColor);
    changeBGImage('labelCell' + RandInt + m_No, overTextureURL);
    changeBGOffset('labelCell' + RandInt + m_No, textureOffsetXOver, textureOffsetYOver);
    changeClass('menuLink' + RandInt + m_No, onClass[RandInt][m_No]);
    if (labelBulletName[RandInt][m_No] != null) changeBulletImage('menuBullet' + RandInt + m_No, labelBulletName[RandInt][m_No] + '.onImage');
    menuActive[RandInt][m_No] = true;
    if (menuType[RandInt][m_No] != 'blank') {
        labelObj = 'labelCell'+RandInt+m_No;
        x = getElementLeft(labelObj) + borderModSize;
        y = getElementTop(labelObj) + document.getElementById(labelObj).offsetHeight - borderModSizeIEHack;
        if ( eval("menus"+RandInt+"[m_No].align == 'left'")   ) {
            x = x + 0;
        }
        if ( eval("menus"+RandInt+"[m_No].align == 'center'") ) {
            x = x + ((getElemWidth(labelObj)-getElemWidth('menu'+RandInt+m_No))/2);
        }
        if ( eval("menus"+RandInt+"[m_No].align == 'right'")  ) {
            x = x + ((getElemWidth(labelObj)-getElemWidth('menu'+RandInt+m_No)));
        }
        moveXY('menu' + RandInt + m_No, x, y);
        document.getElementById('menu' + RandInt + m_No).style.visibility = 'visible';
        return true;
    }
}

function showMenuSide(m_No, myTier, RandInt, overColor, overTextureURL, outColor, outTextureURL, textureOffsetXOut, textureOffsetYOut, textureOffsetXOver, textureOffsetYOver) {
    hideAllMenusTier(tier[RandInt][m_No]-1, RandInt, outColor, outTextureURL, textureOffsetXOut, textureOffsetYOut);
    var borderModSize = borderMod[RandInt];
    changeBGColor('labelCell' + RandInt + m_No, overColor);
    changeBGImage('labelCell' + RandInt + m_No, overTextureURL);
    changeBGOffset('labelCell' + RandInt + m_No, textureOffsetXOver, textureOffsetYOver);
    changeClass('menuLink' + RandInt + m_No, onClass[RandInt][m_No]);
    if (labelBulletName[RandInt][m_No] != null) changeBulletImage('menuBullet' + RandInt + m_No, labelBulletName[RandInt][m_No] + '.onImage');
    menuActive[RandInt][m_No] = true;
    if (menuType[RandInt][m_No] != 'blank') {
        labelObj = 'labelCell'+RandInt+m_No;
        x = getElementLeft(labelObj) + borderModSize;
        y = getElementTop(labelObj) - borderModSize;
        if ( eval("menus"+RandInt+"[m_No].align=='right'") )
            x += getElemWidth(labelObj) - borderModSize;
        else
            x -= getElemWidth('menu'+ RandInt + m_No);
        moveXY('menu' + RandInt + m_No, x, y);
        document.getElementById('menu' + RandInt + m_No).style.visibility = 'visible';
        return true;
    }
}

function hideAllMenus(RandInt, outColor, outTexture, textureOffsetXOut, textureOffsetYOut) {
    for (var i = 1; i < (currentMenuNo[RandInt]+1); i++) {
        if(menuActive[RandInt][i] == true) hideMenu(i, RandInt, outColor, outTexture, textureOffsetXOut, textureOffsetYOut);
    }
}

function hideAllMenusTier(myTier, RandInt, outColor, outTexture, textureOffsetXOut, textureOffsetYOut) {
    for (var i = 1; i < (currentMenuNo[RandInt]+1); i++) {
        if( tier[RandInt][i] > myTier && menuActive[RandInt][i] == true) hideMenu(i, RandInt, outColor, outTexture, textureOffsetXOut, textureOffsetYOut);
    }
}

function hideMenu(m_No, RandInt, outColor, outTexture, textureOffsetXOut, textureOffsetYOut) {
    changeBGColor('labelCell' + RandInt + m_No, outColor);
    changeBGImage('labelCell' + RandInt + m_No , outTexture);
    changeBGOffset('labelCell' + RandInt + m_No , textureOffsetXOut, textureOffsetYOut);
    changeClass('menuLink' + RandInt + m_No, offClass[RandInt][m_No]);
    if (labelBulletName[RandInt][m_No] != null){
        changeBulletImage('menuBullet' + RandInt + m_No, labelBulletName[RandInt][m_No] + '.offImage');
    }
    menuActive[RandInt][m_No] = false;
    document.getElementById('menu' + RandInt + m_No).style.visibility = 'hidden';
    return true;
}

function pOn() { document.body.style.cursor = "pointer"; }
function pOff() { document.body.style.cursor = "default"; }

function menuBar(barName, orientation, RandInt) {
    this.numLabels = 0;
    this.orientation = orientation;
    this.labelText = new Array();
    this.offClass = 'MenuLabelLink'+RandInt;
    this.onClass = 'MenuLabelLinkOn'+RandInt;
    this.bulletAlign = 'left';

    this.addLabel = function(bullet, labelText, menuNo, bgcolorOut, bgcolorOver, textureURLOut, textureURLOver, textureOffsetXOut, textureOffsetYOut, textureOffsetXOver, textureOffsetYOver, labelURL, align, labelwidth, labelheight, target) {
        this.numLabels += 1;
        labelData = menuLabelData[RandInt][this.numLabels-1];
        tier[RandInt][menuNo] = 0;
        if (menuNo != null) {
            onClass[RandInt][menuNo] = this.onClass;
            offClass[RandInt][menuNo] = this.offClass;
            labelBulletName[RandInt][menuNo] = bullet;
        }
       
        temp = '<td id="labelCell' + RandInt + menuNo + '" bgcolor="' + bgcolorOut + '" style=" ';
        temp += (labelwidth ? 'width:'+labelwidth+'; ' : '') + (labelheight ? 'height:'+labelheight+'; ' : '');
        temp += (textureURLOut ? ' background-image: url('+textureURLOut+'); background-position: '+textureOffsetXOut+'px '+textureOffsetYOut+'px;' : '') + '"';
       
        temp += ' onmouseout="pOff(); menuOut('+RandInt+', \''+bgcolorOut+'\', \''+textureURLOut+'\', '+textureOffsetXOut+', '+textureOffsetYOut+');" ';
        temp += ' onmouseover="pOn(); menuOver('+RandInt+'); ';
        temp += (this.orientation == 'vertical' ? 'return !showMenuSide(' + menuNo + ', tier['+RandInt+'][' + menuNo + '],' : 'return !showMenu(' + menuNo + ', ');
        temp += RandInt+', \''+bgcolorOver+'\', \''+textureURLOver+'\', \''+bgcolorOut+'\', \''+textureURLOut+'\', '+textureOffsetXOut+', '+textureOffsetYOut+', '+textureOffsetXOver+', '+textureOffsetYOver+'); " ';

        if (target == "new") {
            temp += ' onclick="window.open(\'' + labelURL + '\');" >';
        } else {
            temp += ' onclick="document.location.href=\'' + labelURL + '\';" >';
        }
        temp += '<div style="text-align: '+align+'; " class="' + this.offClass + '" id="menuLink' + RandInt + menuNo +'">' + labelText + '</div></td>';
        this.labelText[this.numLabels] = new String(temp);
    }
   
    this.writeMenuBar = function() {
        menuBarStr =  '<div id="' + barName + RandInt + '">';
        menuBarStr += '<table class="menuLabelTable'+RandInt+'" border="0" cellpadding="0" cellspacing="0">';
        if (this.orientation == 'vertical') {
            for (var i = 0; i < this.numLabels; i++) {
                menuBarStr += "<tr>" + this.labelText[i+1] + "</tr>";
            }
        } else {
            menuBarStr += '<tr>';
            for (var i = 0; i < this.numLabels; i++) {
                menuBarStr += this.labelText[i+1];
            }
            menuBarStr +=  '</tr>';
        }
        menuBarStr += '</table></div>';
        document.write(menuBarStr);
    }
}

function menu(orientation, RandInt) {
    currentMenuNo[RandInt] += 1;
    this.numItems = 0;
    this.itemText = new Array();
    this.align = 'left';
    this.offClass = 'MenuItemLink' + RandInt;
    this.onClass = 'MenuItemLinkOn' + RandInt;
    this.orientation = orientation;
    this.bulletAlign = 'left';

    this.addItem = function(bullet, itemText, menuNo, bgcolorOut, bgcolorOver, textureURLOut, textureURLOver, textureOffsetXOut, textureOffsetYOut, textureOffsetXOver, textureOffsetYOver, itemURL, align, target) {
        this.numItems += 1;
        labelData = menuLabelData[RandInt][currentMenuNo[RandInt]-1];
        var tempId = currentMenuNo[RandInt] + '_' + this.numItems;
        if (menuNo != null) {
            tier[RandInt][menuNo] = tier[RandInt][currentMenuNo[RandInt]] + 1;
            labelBulletName[RandInt][menuNo] = bullet;
        }
       
        temp = '';
        if (menuNo != null) {
            temp += '<td id="labelCell' + RandInt + menuNo + '" bgcolor="' + bgcolorOut + '" valign="middle" ';
        } else {
            temp += '<td id="itemCell' + RandInt + tempId + '" bgcolor="' + bgcolorOut + '" valign="middle" ';
        }
        if (textureURLOut) { temp += 'style="background-image: url('+textureURLOut+'); background-position: '+textureOffsetXOut+'px '+textureOffsetYOut+'px; " '; }

        if (target == "new") {
            temp += ' onclick="window.open(\'' + itemURL + '\');" ';
        } else {
            temp += ' onclick="document.location.href=\'' + itemURL + '\';" ';
        }

        if (menuNo != null) {
            if (this.orientation =='vertical') temp += ' onmouseover="pOn(); menuOver('+RandInt+'); return !showMenuSide(' + menuNo + ', tier['+RandInt+'][' + menuNo + '], '+RandInt+', \''+bgcolorOver+'\', \''+textureURLOver+'\', '+textureOffsetXOut+', '+textureOffsetYOut+', '+textureOffsetXOver+', '+textureOffsetYOver+'); " ';
            else temp += ' onmouseover="pOn(); menuOver('+RandInt+'); return !showMenu(' + menuNo + ', '+RandInt+', \''+bgcolorOver+'\', \''+textureURLOver+'\', \''+textureURLOver+'\', '+textureOffsetXOut+', '+textureOffsetYOut+', '+textureOffsetXOver+', '+textureOffsetYOver+'); " ';
            temp += ' onmouseout="pOff(); menuOut('+RandInt+', \''+labelData[0]+'\', \''+labelData[2]+'\', '+labelData[4]+', '+labelData[5]+'); "';
        } else {
            temp += ' onmouseover="pOn(); changeClass(\'menuLink'+RandInt + tempId + '\',\'' + this.onClass + '\'); hideAllMenusTier(tier['+RandInt+'][' + currentMenuNo[RandInt] + ', '+RandInt+'], '+RandInt+', \''+bgcolorOut+'\', \''+textureURLOut+'\', '+textureOffsetXOut+', '+textureOffsetYOut+'); menuOver('+RandInt+');  changeBGColor(\'itemCell' + RandInt + tempId + '\', \'' + bgcolorOver + '\'); changeBulletImage(\'menuItemBullet' + RandInt + tempId + '\', \'' + bullet + '.onImage\'); changeBGImage(\'itemCell\' + \''+RandInt+'\' + \''+tempId+'\',  \''+textureURLOver+'\'); changeBGOffset(\'itemCell\' + \''+RandInt+'\' + \''+tempId+'\',  '+textureOffsetXOver+', '+textureOffsetYOver+'); " onmouseout="pOff(); menuOut('+RandInt+', \''+labelData[0]+'\', \''+labelData[2]+'\', '+labelData[4]+', '+labelData[5]+'); changeClass(\'menuLink' + RandInt + tempId + '\',\'' + this.offClass + '\'); changeBGColor(\'itemCell' + RandInt + tempId + '\', \'' + bgcolorOut + '\'); changeBulletImage(\'menuItemBullet' + RandInt + tempId + '\', \'' + bullet + '.offImage\'); changeBGImage(\'itemCell\' + \''+RandInt+'\' + \''+tempId+'\',  \''+textureURLOut+'\'); changeBGOffset(\'itemCell\' + \''+RandInt+'\' + \''+tempId+'\',  '+textureOffsetXOut+', '+textureOffsetYOut+'); "';
        }
        temp += '><div style="text-align: '+align+';" class="' + this.offClass + '" id="menuLink' + RandInt + (menuNo != null ? menuNo : tempId) + '">';

        if (bullet) {
            if (menuNo != null) temp += '<nobr><img src="' + eval(bullet + ".URL") + '" border="0" align="' + this.bulletAlign + '" id="menuBullet' + RandInt + menuNo + '" name="menuBullet' + menuNo + '">';
            else temp += '<nobr><img src="' + eval(bullet + ".URL") + '" border="0" align="' + this.bulletAlign + '" id="menuItemBullet' + RandInt + tempId + '" name="menuItemBullet' + tempId + '">';
        }
        temp += itemText + '&nbsp;</nobr></div></td>';       
        this.itemText[this.numItems] = new String(temp);
    }
   
    this.writeMenu = function() {
        if (this.numItems == 0) menuType[RandInt][currentMenuNo[RandInt]] = 'blank';
        else menuType[RandInt][currentMenuNo[RandInt]] = 'default';
        var menuStr = '<div id="menu' + RandInt + currentMenuNo[RandInt] + '" name="menu' + currentMenuNo[RandInt] + '" class="menuDef'+RandInt+'" >';
        menuStr += '<table border="0" cellpadding="0" cellspacing="0" class="menuTable'+RandInt+'" >';
        if (this.orientation == 'vertical') {
            for (var count = 0; count < this.numItems; count++) {
                menuStr += "<tr>" + this.itemText[count+1] + "</tr>";
            }
        } else {
            menuStr += '<tr>';
            for (var count = 0; count < this.numItems; count++) {       
                menuStr += this.itemText[count+1];
            }
            menuStr +=  '</tr>';
        }
        menuStr += '</table></div>';
        document.write(menuStr);
    }
}



Dans le fichier HTML il est écrit ce qui suit:

<style type="text/css">

.leftMenu609 { text-align: center; }
.centerMenu609 { text-align: center; }
.rightMenu609 { text-align: center; }

.MenuLabelLink609     { color: #ffeecc; font-size: 18px; font-family: Monotype Corsiva, Arial, Helvetica, sans-serif; margin: 0px; padding: 4px 15px; font-weight: bold; text-decoration: None; }   
.MenuLabelLinkOn609 { color: #ffeecc; font-size: 18px; font-family: Monotype Corsiva, Arial, Helvetica, sans-serif; margin: 0px; padding: 4px 15px; font-weight: bold; text-decoration: None; }
.MenuItemLink609    { color: #ffeecc; font-size: 18px; font-family: Monotype Corsiva, Arial, Helvetica, sans-serif; margin: 0px; padding: 3px 4px; font-weight: bold; text-decoration: None; }
.MenuItemLinkOn609  { color: #ffeecc; font-size: 18px; font-family: Monotype Corsiva, Arial, Helvetica, sans-serif; margin: 0px; padding: 3px 4px; font-weight: bold; text-decoration: None; }

.menuDef609 { position: absolute; visibility: hidden; }       

.menuLabelTable609 { table-layout: auto; width: auto; border-collapse: collapse; border: 0; }
.menuLabelTable609 td { border: 0; }
.menuLabelTable609 td.x { border: 0; }

.menuTable609 { table-layout: auto; width: auto; border-collapse: collapse; border: 1px solid black; padding: 2px; }
.menuTable609 td { border: 0; padding: 2px; }

</style>

<script language="JavaScript" src="/compte/zjjp-tatiana-lingerie-votreboutiquepro-com/images//boutons-et-menus/dropdown20090318.js" type="text/javascript"></script>

<script language="JavaScript" type="text/javascript">

if (! menuActive) { var menuActive = []; }
if (! tier) { var tier = []; }
if (! borderMod) { var borderMod = []; }
if (! borderModIEHack) { var borderModIEHack = []; }
if (! offClass) { var offClass = []; }
if (! onClass) { var onClass = []; }
if (! labelBulletName) { var labelBulletName = []; }
if (! menuType) { var menuType = []; }
if (! currentMenuNo) { var currentMenuNo = []; }
if (! timeOn) { var timeOn = []; }
if (! menuLabelData) { var menuLabelData = []; }

menuActive['609'] = [];
tier['609'] = [];
borderMod['609'] = 0;
borderModIEHack['609'] = 0;
offClass['609'] = [];
onClass['609'] = [];
labelBulletName['609'] = [];
menuType['609'] = [];
currentMenuNo['609'] = 0;
timeOn['609'] = null;
menuLabelData['609'] = []

menus609 = [];


menuItemBullet609 = new bulletPoint("menu_off.gif","menu_on.gif");


myMenu609 = new menuBar('myMenu609', 'horizontal', '609');



    menuLabelData['609'].push([
        '#ffffff',
        '#ffffff',
        'menubar40751393.jpg',
        'menubar40751393.jpg',
        0, 0,
        -504, 0
    ]);
   
    myMenu609.addLabel(
        'labelBullet609',
        ('Information Société'),
        1,
        '#ffffff',
        '#ffffff',
        'menubar40751393.jpg',
        'menubar40751393.jpg',
        0, 0,
        -504, 0,
        'http://monsite.com',
        'center',
        '168px', '43px'
        );

    menus609[1] = new menu('vertical', '609');

   
        menus609[1].addItem(
            'menuItemBullet609',
            ('Conditions générales de ventes'),
            null,
            '#ffffff',
            '#ffffff',
            'texture87298198.jpg',
            'texture81439393.jpg',
            0, 0,
            0, 0,
            '/',
            'center' 
            );
   
       
    menus609[1].writeMenu();
   
         
            menus609[1].align = 'center';
        myMenu609.writeMenuBar();

</script>

<!--[if lte IE 7]>
  <script language="JavaScript" type="text/javascript">
  borderModIEHack['609'] = 1;
  </script>
<![endif]-->


Donc avec ceci mon menu se déroule vers le bas avec ma barre de menu horizontale.

Qu'est ce que je dois changer dans le HTML ou dans le Java script pour que mon sous menu se déroule du bas vers le haut??

Bien entendu je n'ai mis le code HTML que pour un seul menu et sous menu la barre de menu contenant plusieurs fois le code allant de" menuLabelData['609'].push([...........................à.................. menus609[1].align = 'center'; "


J'espere que vous allez pouvoir m'aiguiller. Je vous en remercie d'avance.

personne n'est capable de m'aider?

Bonjour,

ben... t'as vu ce que tu nous colles ici ?!?
un monstre obsolète et incomplet me semble-t-il ( aujourd'hui un menu
    ça se fait en css pur sans rien d'autre )
    que tu as pris je ne sais où et que tu nous demandes de modifier ?
    néanmoins : si cela se déroule vers le bas, ce n'est ni plus ni moins
        qu'un problème de positionnement. met ton sous-menu "plus haut"
        et point barre

Cordialement [mon Site] [M'écrire] Bul

c'est du java script.. donc il me semble que je suis bien sur le bon forum

je n'ai nullement dit que ce n'était pas du javascript !
j'ai dit que la manière de faire datait ( voire n'est plus
compatible avec l'état actuel du web), qu'on n'avait pas tout,
et j'ai même proposé une psite.... que veut-tu de plus ?
@+

la définition de psite lool

si tu n'as plus que cela comme argument....

Ben je ne sais pas ce qu'est un psite.. donc tu as fais quelque chose mais je ne sais pas de quoi tu parles

sleon une édtue de l'Uvinertisé de Cmabrigde, l'odrre des ltteers dnas
    un mot n'a que peu d'ipmrotncae.
La suele coshe qui cpotme c'est que la pmeirère et la drenèire lteetrs
    sinoet à leur bnnoe pclae.
Le rsete puet êrte dnas un dsérrode ttoal et vuos puoevz tujoruos lrie
    snas (torp de) porblmèe.

Bnoujuor,
Il suffit que la partie affichable du menu vienne au dessus donc
- récupération position Y Menu principal
- récupération hauteur SousMenu
- affichage à la position Y = Y_Menu - haut_SousMenu;

Voila, à peu prés la démarche !
Je pense néanmoins qu'il y a de nos jours bien plus simple, mais bon...

;O)