Menu déroulant pour site personnel

Soyez le premier à donner votre avis sur cette source.

Snippet vu 25 485 fois - Téléchargée 27 fois

Contenu du snippet

Ben vla a vous de juger :)
A noter que c'est ma premiere source sur javascriptfr

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(true,' ',0,0,100,'#0080FF','#8080FF','itemunBorder','itemunText');
menu[0][1]=new Item('','','_self',25, 0, 0);
menu[0][2]=new Item('Index','index.htm','_self',25, 0, 0);
menu[0][3]=new Item('Moi','','_self',25, 0, 1);
menu[1]=new Array();
menu[1][0]=new Menu(true, '>',100,0 ,80, '#FFA851', '#80FFFF', 'itemBorder', 'itemText');
menu[1][1]=new Item('Mes hobbys','hobbys.htm','_self',15, 0, 0);
menu[1][2]=new Item('Mon CV','CV.htm','_self',15, 0, 0);
menu[0][4]=new Item('Interactif','','_self',25, 0, 2);
menu[2]=new Array();
menu[2][0]=new Menu(true, '>',100,0 ,80, '#FFA851', '#80FFFF', 'itemBorder', 'itemText');
menu[2][1]=new Item('Livre d'or','livredor.htm','_self',15, 0, 0);
menu[2][2]=new Item('Forum','forum.htm','_self',15, 0, 0);
menu[2][3]=new Item('Chat','Chat.htm','_self',15, 0, 0);
menu[2][4]=new Item('Vos lien','liens.htm','_self',15, 0, 0);
menu[0][5]=new Item('Contacts','','_self',25, 0, 3);
menu[3]=new Array();
menu[3][0]=new Menu(true, '>',100,0 ,80, '#FFA851', '#80FFFF', 'itemBorder', 'itemText');
</script>
<style>
<!--
.itemunBorder { border: 1px solid black }
.itemunText {text-decoration: none; color: #FFFFFF; font:  11px MS Sans Serif}
.itemBorder { border: 1px solid black }
.itemText {text-decoration: none; color: #0000FF; font:  11px MS Sans Serif}
.itemtroisBorder { border: 1px solid black }
.itemtroisText {text-decoration: none; color: #800000; font:  11px MS Sans Serif}
-->
</style>
</HEAD>
<BODY marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" onResize="if (isNS4) nsResizeHandler()">

Conclusion :


++
Bon site!

A voir également

Ajouter un commentaire

Commentaires

goldziko9
Messages postés
39
Date d'inscription
lundi 3 janvier 2005
Statut
Membre
Dernière intervention
5 avril 2010
-
c'est très cool votre source, mais j'ai passer 5mn a supprimer la list des numero, peut etre mieu si tu met la source en zip.
cs_macromed
Messages postés
30
Date d'inscription
mardi 5 octobre 2004
Statut
Membre
Dernière intervention
25 février 2007
-
Marche pas sous IE 6
Gobelindefeu
Messages postés
10
Date d'inscription
mercredi 1 novembre 2000
Statut
Membre
Dernière intervention
16 juin 2005
-
juste comme ca vu que tu as Onloade et ben apres ca va pas si tu veux ecrire du texte par dessus
tiggy
Messages postés
5
Date d'inscription
dimanche 7 décembre 2003
Statut
Membre
Dernière intervention
24 juin 2004
-
moi ca marche pas
cs_T0x1K
Messages postés
261
Date d'inscription
dimanche 6 avril 2003
Statut
Membre
Dernière intervention
12 janvier 2010
-
lol derien ;)

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.