Menu horizontal avec sous menu déroulant vers le haut

Signaler
Messages postés
9
Date d'inscription
lundi 20 avril 2009
Statut
Membre
Dernière intervention
1 avril 2012
-
Messages postés
9
Date d'inscription
lundi 20 avril 2009
Statut
Membre
Dernière intervention
1 avril 2012
-
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 += '
' + labelText + '
</td>';
        this.labelText[this.numLabels] = new String(temp);
    }
   
    this.writeMenuBar = function() {
        menuBarStr =  '
';
        menuBarStr += '';
        if (this.orientation == 'vertical') {
            for (var i = 0; i < this.numLabels; i++) {
                menuBarStr += \"----
\" + this.labelText[i+1] + \"\";
            }
        } else {
            menuBarStr += '----
';
            for (var i = 0; i < this.numLabels; i++) {
                menuBarStr += this.labelText[i+1];
            }
            menuBarStr +=  '';
        }
        menuBarStr += '

';
        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 += '>
';

        if (bullet) {
            if (menuNo != null) temp += '<nobr>';
            else temp += '<nobr>';
        }
        temp += itemText + '&nbsp;</nobr>
</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 = '
';
        menuStr += '';
        if (this.orientation == 'vertical') {
            for (var count = 0; count < this.numItems; count++) {
                menuStr += \"----
\" + this.itemText[count+1] + \"\";
            }
        } else {
            menuStr += '----
';
            for (var count = 0; count < this.numItems; count++) {       
                menuStr += this.itemText[count+1];
            }
            menuStr +=  '';
        }
        menuStr += '

';
        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.

10 réponses

Messages postés
9
Date d'inscription
lundi 20 avril 2009
Statut
Membre
Dernière intervention
1 avril 2012

personne n'est capable de m'aider?
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
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
Messages postés
9
Date d'inscription
lundi 20 avril 2009
Statut
Membre
Dernière intervention
1 avril 2012

c'est du java script.. donc il me semble que je suis bien sur le bon forum
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
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 ?
@+
Messages postés
9
Date d'inscription
lundi 20 avril 2009
Statut
Membre
Dernière intervention
1 avril 2012

la définition de psite lool
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
si tu n'as plus que cela comme argument....
Messages postés
9
Date d'inscription
lundi 20 avril 2009
Statut
Membre
Dernière intervention
1 avril 2012

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
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
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.
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
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)
Messages postés
9
Date d'inscription
lundi 20 avril 2009
Statut
Membre
Dernière intervention
1 avril 2012

qu'est ce que vous entendez par récupérer la position?

Je n'y connais vraiment rien serait il possible de m'expliquer un tout petit peu mieux?