Menu simple

Commenter

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

S'inscrire maintenant

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.

Du même auteur (tit1012)