Menu simple

4/5 (6 avis)

Snippet vu 19 124 fois - Téléchargée 30 fois

Contenu du snippet

Un bon menu assez parametrable

Source / Exemple :


<HEAD>

<SCRIPT LANGUAGE="JavaScript">
var isDOM = (document.getElementById ? true : false); 
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
function getSty(id) {
return (isNS4 ? getRef(id) : getRef(id).style);
} 

var popTimer = 0;
var litNow = new Array();
function popOver(menuNum, itemNum) {
clearTimeout(popTimer);
hideAllBut(menuNum);
litNow = getTree(menuNum, itemNum);
changeCol(litNow, true);
targetNum = menu[menuNum][itemNum].target;
if (targetNum > 0) {
thisX = parseInt(menu[menuNum][0].ref.left) + parseInt(menu[menuNum][itemNum].ref.left);
thisY = parseInt(menu[menuNum][0].ref.top) + parseInt(menu[menuNum][itemNum].ref.top);
with (menu[targetNum][0].ref) {
left = parseInt(thisX + menu[targetNum][0].x);
top = parseInt(thisY + menu[targetNum][0].y);
visibility = 'visible';
      }
   }
}
function popOut(menuNum, itemNum) {
if ((menuNum == 0) && !menu[menuNum][itemNum].target)
hideAllBut(0)
else
popTimer = setTimeout('hideAllBut(0)', 500);
}
function getTree(menuNum, itemNum) {
itemArray = new Array(menu.length);
while(1) {
itemArray[menuNum] = itemNum;
if (menuNum == 0) return itemArray;
itemNum = menu[menuNum][0].parentItem;
menuNum = menu[menuNum][0].parentMenu;
   }
}

function changeCol(changeArray, isOver) {
for (menuCount = 0; menuCount < changeArray.length; menuCount++) {
if (changeArray[menuCount]) {
newCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol;
with (menu[menuCount][changeArray[menuCount]].ref) {
if (isNS4) bgColor = newCol;
else backgroundColor = newCol;
         }
      }
   }
}
function hideAllBut(menuNum) {
var keepMenus = getTree(menuNum, 1);
for (count = 0; count < menu.length; count++)
if (!keepMenus[count])
menu[count][0].ref.visibility = 'hidden';
changeCol(litNow, false);
}

function Menu(isVert, popInd, x, y, width, overCol, backCol, borderClass, textClass) {
this.isVert = isVert;
this.popInd = popInd
this.x = x;
this.y = y;
this.width = width;
this.overCol = overCol;
this.backCol = backCol;
this.borderClass = borderClass;
this.textClass = textClass;
this.parentMenu = null;
this.parentItem = null;
this.ref = null;
}

function Item(text, href, frame, length, spacing, target) {
this.text = text;
this.href = href;
this.frame = frame;
this.length = length;
this.spacing = spacing;
this.target = target;
this.ref = null;
}

function writeMenus() {
if (!isDOM && !isIE4 && !isNS4) return;

for (currMenu = 0; currMenu < menu.length; currMenu++) with (menu[currMenu][0]) {
var str = '', itemX = 0, itemY = 0;
for (currItem = 1; currItem < menu[currMenu].length; currItem++) with (menu[currMenu][currItem]) {
var itemID = 'menu' + currMenu + 'item' + currItem;
var w = (isVert ? width : length);
var h = (isVert ? length : width);
if (isDOM || isIE4) {
str += '<div id="' + itemID + '" style="position: absolute; left: ' + itemX + '; top: ' + itemY + '; width: ' + w + '; height: ' + h + '; visibility: inherit; ';
if (backCol) str += 'background: ' + backCol + '; ';
str += '" ';
}
if (isNS4) {
str += '<layer id="' + itemID + '" left="' + itemX + '" top="' + itemY + '" width="' +  w + '" height="' + h + '" visibility="inherit" ';
if (backCol) str += 'bgcolor="' + backCol + '" ';
}
if (borderClass) str += 'class="' + borderClass + '" ';

str += 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')" onMouseOut="popOut(' + currMenu + ',' + currItem + ')">';

str += '<table width="' + (w - 8) + '" border="0" cellspacing="0" cellpadding="' + (!isNS4 && borderClass ? 3 : 0) + '"><tr><td width=1 nowrap></td><td align="left" height="' + (h - 7) + '">' + (href ?  '<a class="' + textClass + '" href="' + href + '"' + (frame ? ' target="' + frame + '">' : '>') + text + '</a></td>' :  '<a class="' + textClass + '">' + text + '</a></td>');
if (target > 0) {

menu[target][0].parentMenu = currMenu;
menu[target][0].parentItem = currItem;

if (popInd) str += '<td class="' + textClass + '" align="right">' + popInd + '</td>';
}
str += '</tr></table>' + (isNS4 ? '</layer>' : '</div>');
if (isVert) itemY += length + spacing;
else itemX += length + spacing;
}
if (isDOM) {
var newDiv = document.createElement('div');
document.getElementsByTagName('body').item(0).appendChild(newDiv);
newDiv.innerHTML = str;
ref = newDiv.style;
ref.position = 'absolute';
ref.visibility = 'hidden';
}

if (isIE4) {
document.body.insertAdjacentHTML('beforeEnd', '<div id="menu' + currMenu + 'div" ' + 'style="position: absolute; visibility: hidden">' + str + '</div>');
ref = getSty('menu' + currMenu + 'div');
}

if (isNS4) {
ref = new Layer(0);
ref.document.write(str);
ref.document.close();
}

for (currItem = 1; currItem < menu[currMenu].length; currItem++) {
itemName = 'menu' + currMenu + 'item' + currItem;
if (isDOM || isIE4) menu[currMenu][currItem].ref = getSty(itemName);
if (isNS4) menu[currMenu][currItem].ref = ref.document[itemName];
   }
}
with(menu[0][0]) {
ref.left = x;
ref.top = y;
ref.visibility = 'visible';
   }
}

var menu = new Array();
menu[0]=new Array();
menu[0][0]=new Menu(false,' ',1,5,30,'#ffffff','#666666','itemunBorder','itemunText');
menu[0][1]=new Item('Menu','','_self',100, 0, 0);
menu[0][2]=new Item('rubrique 1','','_self',100, 0, 1);
menu[1]=new Array();
menu[1][0]=new Menu(true, '>', 0 ,30 ,100, '#FFA851', '#FF8040', 'itemBorder', 'itemText');
menu[1][1]=new Item('Mon site','www.ff8.fr.fm','_self',30, 0, 0);
menu[1][2]=new Item('Cat2','','_self',30, 0, 0);
menu[1][3]=new Item('Cat3','','_self',30, 0, 0);
menu[0][3]=new Item('Rubrique 2','','_self',100, 0, 2);
menu[2]=new Array();
menu[2][0]=new Menu(true, '>', 0 ,30 ,100, '#FFA851', '#FF8040', 'itemBorder', 'itemText');
menu[2][1]=new Item('Cat1','','_self',30, 0, 0);
menu[2][2]=new Item('Cat2','','_self',30, 0, 0);
menu[2][3]=new Item('Cat3','','_self',30, 0, 0);
menu[0][4]=new Item('Rubrique 3','','_self',100, 0, 3);
menu[3]=new Array();
menu[3][0]=new Menu(true, '>', 0 ,30 ,100, '#FFA851', '#FF8040', 'itemBorder', 'itemText');
menu[3][1]=new Item('Cat1','','_self',30, 0, 0);
menu[3][2]=new Item('Cat2','','_self',30, 0, 0);
menu[3][3]=new Item('Cat3','','_self',30, 0, 6);
menu[6]=new Array();
menu[6][0]=new Menu(true, '>', 100 ,0 ,100, '#FFA851', '#FF8040', 'itemtroisBorder', 'itemtroisText');
menu[6][1]=new Item('Cat3.1','','_self',30, 0, 0);
menu[6][2]=new Item('Cat3.2','','_self',30, 0, 0);
menu[6][3]=new Item('Cat3.3','','_self',30, 0, 0);
menu[0][5]=new Item('Rubrique 4','','_self',100, 0, 4);
menu[4]=new Array();
menu[4][0]=new Menu(true, '>', 0 ,30 ,100, '#FFA851', '#FF8040', 'itemBorder', 'itemText');
menu[4][1]=new Item('Cat1','','_self',30, 0, 0);
menu[4][2]=new Item('Cat2','','_self',30, 0, 0);
menu[4][3]=new Item('Cat3','','_self',30, 0, 0);
menu[0][6]=new Item('Rubrique 5','','_self',100, 0, 5);
menu[5]=new Array();
menu[5][0]=new Menu(true, '>', 0 ,30 ,100, '#FFA851', '#FF8040', 'itemBorder', 'itemText');
menu[5][1]=new Item('Cat1','','_self',30, 0, 0);
menu[5][2]=new Item('Cat2','','_self',30, 0, 0);
menu[5][3]=new Item('Cat3','','_self',30, 0, 0);
menu[5][4]=new Item('Cat4','','_self',30, 0, 0);
</script>
<style>
<!--
.itemunBorder { border: 2px solid grey }
.itemunText {text-decoration: none; color: #999999; font:  11px News Gothic MT}
.itemBorder { border: 1px solid black }
.itemText {text-decoration: none; color: #000000; font:  11px MS Sans Serif}
.itemtroisBorder { border: 1px solid black }
.itemtroisText {text-decoration: none; color: #000000; font:  11px MS Sans Serif}
-->
</style>
</HEAD>
<BODY marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" onResize="if (isNS4) nsResizeHandler()">
</body>

Conclusion :


Remplacer les rubrique et les Categorie par votre menu perso

A voir également

Ajouter un commentaire Commentaires
gadgetissime
Messages postés
2
Date d'inscription
mardi 22 avril 2008
Statut
Membre
Dernière intervention
23 avril 2008

23 avril 2008 à 08:18
bien bien bien
cyclurba
Messages postés
4
Date d'inscription
lundi 13 décembre 2004
Statut
Membre
Dernière intervention
14 décembre 2004

4 août 2005 à 14:30
fonctionne sous Firefox... ? j'en ai pas l'impression...
dodsoft
Messages postés
1
Date d'inscription
mercredi 2 juillet 2003
Statut
Membre
Dernière intervention
8 juin 2004

8 juin 2004 à 14:02
Je suis un vrai débutant en javascript; aussi la question va paraitre bete mais... il semble que dans ce script, on soit limité à 8 options et sous-options. Comment en mettre plus ?
merci
crashmax03
Messages postés
1
Date d'inscription
lundi 9 février 2004
Statut
Membre
Dernière intervention
7 mars 2004

7 mars 2004 à 20:55
30Km de code, c plus simple en le fesant avec du css
tit1012
Messages postés
47
Date d'inscription
dimanche 12 octobre 2003
Statut
Membre
Dernière intervention
4 mars 2007

2 janv. 2004 à 18:21
Moi je vois pas
Afficher les 6 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.