|
Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
MENU SIMPLE
Information sur la source
Description
Un bon menu assez parametrable
Source
- <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>
<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
Sources du même auteur
Sources de la même categorie
Sources en rapport avec celle ci
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
javascript dans formulaire acrobat [ par domi ]
"Envoie par mèl du contenu du formulaire"j'ai écrit deux lignes simple en javascript dans un formulaire acrobat, il fonctionne bien avec Acrobat "prog
Faire une action sur le menu par un simple lien [ par ThePooh ]
BonjourJe débute dans la création d'un site webJe m'expliqueDans ma page j'ai mon menu à gauche et au milieu page avec du blabla et je souhaite dans m
Simple pb d'affichage javascript ! [ par joduak ]
Bonjour, J'ai créé un formulaire, et je veux vérifier le contenu d'un textbox, pour cela j'ai créer une fonction qui teste this.v
addition toute simple en javascript [ par newbie70 ]
bonjour,Ma question est un peu bete, mais je voudrais tout simplement savoir comment on effectue une addition, et on affiche le resultat par al
Formulaire tout simple avec envoi en JAVASCRIPT ! NO PHP [ par putainnn ]
Bonjour,voila ma question est simple je voudrais que mon formulaire envoi ce que contient<input type="nom"><input type="pseudo">a mon emai
menu tout simple [ par wireless12 ]
Bonjours à tous, Je suis à la recherche de mon menu idéal ! Malheureusement je n'arrive pas à le créer (même si dans ma tête je vois exactement ce que
Probleme de menu javascript dans du php [ par japower01 ]
Bonjour,J'ai un menu js dans une page php, quand on clique sur un des lien du menu celuici se recharge a chaque fois.http://www.redlion-studio.com/pre
Ordre de chargement page WEB (html+javascript) ? [ par tlc77 ]
Bonjour à tous ! :-) Je suis en train de faire un site pour la société qui m'emploi en alternance cette année. J'ai appris le HTML ainsi que le PHP, p
menu déroulant [ par peyge ]
Bonjour,voila j'essaye de rappetiser la largeur des boutons de la list emais je ne suis pas capable, quelqu'un peut m,aider. Je voudrais que les colo
Petite question pour un pb qui vous paraitra simple [ par yanis7518 ]
Salut a tousvoila j'ai un petit probleme. j'ai un formulaire html avec un bouton pour poster le formulaire<input type=submit>jusque la tout marc
|
Téléchargements
Logiciels à télécharger sur le même thème :
|