MENUS

Un menu horizontal avec ouverture de sous listes, visuellement, un peu comme les menus contextuels image rady, mais en DHTML!

Citation :: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">

</script>

<style type="text/css">

</style>
</head>

<body>

<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>

</div>

</body>
</html>

Un menu vertical partiellement masqué à l'ouverture de la page et qui se déroule au mouseover... à personnaliser.

Code en 2 partie

1 - une page html appelant un fichier .js
2 un fichier js (donc à enregister en .js)

LA PAGE HMTL

Citation :: <html>
<head>
<title>BASE HTML</title>

<STYLE type="text/css">

</STYLE>
<script src="ssmItems.js"> language="JavaScript1.2"></script>
</head>
<body topmargin="100">
<center>

</center>
</body>
</html>

LE FICHIER JS

Citation :: //Static Slide Menu 6.5 © MaXimuS 2000-2001, All Rights Reserved.
//Site: http://www.absolutegb.com/maximus
//E-mail: maximus@nsimail.com
//Script featured on Dynamic Drive (http://www.dynamicdrive.com)

NS6 = (document.getElementById&&!document.all)
IE = (document.all)
NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")

tempBar='';barBuilt=0;ssmItems=new Array();

moving=setTimeout('null',1)
function moveOut() {
if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) {
clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}};
function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)}
function moveBack1() {
if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) {
clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}}
function slideMenu(num){
if (IE) {ssm.pixelLeft += num;}
if (NS||NS6) {ssm.left = parseInt(ssm.left)+num;}
if (NS) {bssm.clip.right+=num;bssm2.clip.right+=num;}}

function makeStatic() {
if (NS||NS6) {winY = window.pageYOffset;}
if (IE) {winY = document.body.scrollTop;}
if (NS6||IE||NS) {
if (winY!=lastY&&winY>YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - YOffset + staticYOffset);}
else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - (YOffset-(YOffset-winY)));}
else {smooth=0}
if(smooth > 0) smooth = Math.ceil(smooth);
else smooth = Math.floor(smooth);
if (IE) bssm.pixelTop+=smooth;
if (NS6||NS) bssm.top=parseInt(bssm.top)+smooth
lastY = lastY+smooth;
setTimeout('makeStatic()', 1)}}

function buildBar() {
if(barText.indexOf('<IMG')>-1) {tempBar=barText}
else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+"<BR>"}}
document.write('<td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD>')}

function initSlide() {
if (NS6){
ssm=document.getElementById("thessm").style;
bssm=document.getElementById("basessm").style;
bssm.clip="rect(0 "+document.getElementById("thessm").offsetWidth+" "+document.getElementById("thessm").offsetHeight+" 0)";ssm.visibility="visible";
}else if (IE) {
ssm=document.all("thessm").style;
bssm=document.all("basessm").style;
bssm.clip="rect(0 "+thessm.offsetWidth+" "+thessm.offsetHeight+" 0)";bssm.visibility = "visible";
}else if (NS) {
bssm=document.layers["basessm1"];
bssm2=bssm.document.layers["basessm2"];ssm=bssm2.document.layers["thessm"];
bssm2.clip.left=0;ssm.visibility = "show";
}
if (menuIsStatic=="yes")
makeStatic();
}

function buildMenu() {
if (IE||NS6) {
document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+' ;Top : '+YOffset+' ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+' ;Top : 0 ;Z-Index : 20;" onmouseover="moveOut()" onmouseout="moveBack()">');
}
if (NS) {
document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="'+menuBGColor+'" left="'+(-menuWidth)+'" onmouseover="moveOut()" onmouseout="moveBack()">');
}
if (NS6){
document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'"><TR><TD>');
}
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'">');
for(i=0;i<ssmItems.length;i++) {
if(!ssmItems[i][3]){
ssmItems[i][3]=menuCols;
ssmItems[i][5]=menuWidth-1;
}else if(ssmItems[i][3]!=menuCols)
ssmItems[i][5]=Math.round(menuWidth*(ssmItems[i][3]/menuCols)-1);
if ( ssmItems[i-1] && ssmItems[i-1][4] != "no" ) {

document.write('<TR>');
}
if(!ssmItems[i][1]){
document.write('<td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'"><font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"> <b>'+ssmItems[i][0]+'</b></font></td>');
}else {
if(!ssmItems[i][2])
ssmItems[i][2]=linkTarget;
document.write('<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+ssmItems[i][1]+'" target="'+ssmItems[i][2]+'" CLASS="ssmItems">'+ssmItems[i][0]+'</DIV></LAYER></ILAYER></TD>');
}
if(ssmItems[i][4]!="no"&&barBuilt==0){
buildBar();
barBuilt=1;
}
if(ssmItems[i][4]!="no"){
document.write('</TR>');
}
}
document.write('</table>');
if (NS6){
document.write('</TD></TR></TABLE>');
}
if (IE||NS6) {
document.write('</DIV></DIV>');
}
if (NS) {
document.write('</LAYER></ILAYER></LAYER>');
}
theleft=-menuWidth;lastY=0;setTimeout('initSlide();', 1);
}

Un menu déplacable, le manu n'est pas fixe et peut se repositonner n'importe où sur la page avec la souris.

Même principe que précdemment:

- Une page HTML
- Un fichier Javascript ( a enregistrer en .js)

LA PAGE HTML

Citation :: <html>
<head>
<title>BASE HTML</title>
</head>

<body topmargin="100">
<center>
<script language="JavaScript" src="ejs_menu_mob.js"></script>
</center>
</body>
</html>

LE FICHIER .JS

Citation :: /*
SCRIPT EDITE SUR L'EDITEUR JAVACSRIPT
http://www.editeurjavascript.com
*/

document.write('<style type="text/css">\nA.ejsmenu { color:#000000;text-decoration:none }\n</style>')
document.write('<DIV id=menu_dep STYLE="position:absolute; top:10; left:10"><TABLE BORDER=0 CELLPADDING=1 CELLSPACING=2 WIDTH=150>')
document.write('<TR><TD BGCOLOR=#000000 onMouseDown="testClick()" onMouseUp="testClick2()" style="cursor:move"><FONT SIZE=2 face="Verdana" COLOR=#FFCC00><B>Menu</B></FONT></TD></TR>')
document.write('</TR><TR><TD BGCOLOR=#9FB1D8 NOWRAP><FONT SIZE=2 face="Verdana"> <A HREF=home CLASS=ejsmenu>Accueil</A></FONT> </TD></TR><TR><TD BGCOLOR=#9FB1D8 NOWRAP><FONT SIZE=2 face="Verdana"> <A HREF=page1 CLASS=ejsmenu>page1</A></FONT> </TD></TR><TR><TD BGCOLOR=#9FB1D8 NOWRAP><FONT SIZE=2 face="Verdana"> <A HREF=page2 CLASS=ejsmenu>page2</A></FONT> </TD></TR><TR><TD BGCOLOR=#9FB1D8 NOWRAP><FONT SIZE=2 face="Verdana"> <A HREF=page3 CLASS=ejsmenu>page3</A></FONT> </TD></TR><TR><TD BGCOLOR=#9FB1D8 NOWRAP><FONT SIZE=2 face="Verdana"> <A HREF=page4 CLASS=ejsmenu>page4</A></FONT> </TD></TR></TABLE></DIV>')

clickOui = false;
bloc_x = 10;
bloc_y = 10;

function testClick() {
base_x = x-bloc_x;
base_y = y-bloc_y;
clickOui=true;
}
function testClick2() {
clickOui=false;
}

function get_mouse(e)
{
x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
if(clickOui && document.getElementById)
{
bloc_x = x-base_x;
bloc_y = y-base_y;
}
document.getElementById("menu_dep").style.left = bloc_x
document.getElementById("menu_dep").style.top = bloc_y
}
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse;

Un menu contextuel vertical

Citation :: <html>
<head>
<title>:: EasyScript - Exemple ::</title>
<STYLE TYPE="text/css">BODY {scrollbar-face-color: #0069B3; scrollbar-shadow-color: #000000;scrollbar-highlight-color: #FFFFFF;scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #0069B3; scrollbar-arrow-color: #FFCC00;}</STYLE>
<SCRIPT LANGUAGE="JavaScript">
window.defaultStatus="Menu vertical dynamique";
</SCRIPT>
<script language="javascript">
/*
Script téléchargé sur EasyScript (www.easy-script.com)

JAVASCRIPT CREE SUR
ESPACE JAVASCRIPT.COM
http://www.espacejavascript.com
*/
total = 3;
// Entrez ci-dessus le nombre de sous-menus

control = total+1;
function cache(n)
{
document.getElementById(n).style.visibility = 'hidden';
}
function montre(n)
{
document.getElementById(n).style.visibility = 'visible';
document.getElementById(n).style.left = event.clientX + document.body.scrollLeft;
document.getElementById(n).style.top = event.clientY + document.body.scrollTop;
}
function controle(n)
{
for(i = 1; i < control; i++)
{
if((document.getElementById(i).style.visibility = 'visible')&&(i != n))
{
document.getElementById(i).style.visibility = 'hidden';
}
}
}
</script>
</head>
<body bgcolor="#0069B3">
<center><br><br>
<DIV ID="1" STYLE="position:absolute;visibility:hidden" onmouseout="cache(1)">
<table width=150 bgcolor="#004080" cellpadding=0 cellspacing=1>
<tr><td bgcolor="#6F8DD9" STYLE="padding:4" onmouseover="document.getElementById(1).style.visibility = 'visible';controle(1)">
<font face="verdana" size=1 color="#ffffff"><b>
<a href="http://www.easy-script.com" STYLE="color:#ffffff">Accueil</a><br>
</td></tr></table>
</DIV>

<DIV ID="2" STYLE="position:absolute;visibility:hidden" onmouseout="cache(2)">
<table width=150 bgcolor="#004080" cellpadding=0 cellspacing=1>
<tr><td bgcolor="#6F8DD9" STYLE="padding:4" onmouseover="document.getElementById(2).style.visibility = 'visible';controle(2)">
<font face="verdana" size=1 color="#ffffff"><b>
<a href="http://www.easy-script.com/javascript.php" STYLE="color:#ffffff"><b>JavaScript</b></a><br>
<a href="http://www.easy-script.com/phpscript.php" STYLE="color:#ffffff"><b>PHP / MySQL</b></a><br>
<a href="http://www.easy-script.com/dhtmlscript.php" STYLE="color:#ffffff"><b>DHTML</b></a><br>
<a href="http://www.easy-script.com/top10.php" STYLE="color:#ffffff"><b>Top 10</b></a><br>
<a href="http://www.easy-script.com/resc.php" STYLE="color:#ffffff"><b>Rechercher un script</a></b>
</td></tr></table>
</DIV>

<DIV ID="3" STYLE="position:absolute;visibility:hidden" onmouseout="cache(3)">
<table width=150 bgcolor="#004080" cellpadding=0 cellspacing=1>
<tr><td bgcolor="#6F8DD9" STYLE="padding:4" onmouseover="document.getElementById(3).style.visibility = 'visible'">
<font face="verdana" size=1 color="#ffffff"><b>
<a href="http://www.easy-script.com/download.php" STYLE="color:#ffffff"><b>Utilitaires</b></a><br>
<a href="http://www.easy-script.com/phpBB/" STYLE="color:#ffffff"><b>Forums</b></a><br>
<a href="http://www.easy-script.com/livredor/index.php" STYLE="color:#ffffff"><b>Livre d'or</b></a><br>
<a href="http://www.easy-script.com/annu/lien.php3" STYLE="color:#ffffff"><b>Annuaire</b></a><br>
</td></tr></table>
</DIV>

<table width="150" cellpadding=3 border=1 bordercolor="#FFFFFF" bgcolor="#FFFFFF" cellspacing=0 bordercolorlight="#000000" bordercolordark="#C0C0C0">
<tr>
<td width=150 STYLE="cursor:hand;color:#FFFFFF;background-color:#004080" onmouseout="this.style.background='#004080'" onmouseover="this.style.background='#B8C8FE';montre(1);controle(1)"><font face=verdana size=1>HomePage</font></td></a>
</tr><tr>
<td width=150 STYLE="cursor:hand;color:#FFFFFF;background-color:#004080" onmouseout="this.style.background='#004080'" onmouseover="this.style.background='#B8C8FE';montre(2);controle(2)"><font face=verdana size=1>Scripts</font></td></a>
</tr><tr>
<td width=150 STYLE="cursor:hand;color:#FFFFFF;background-color:#004080" onmouseout="this.style.background='#004080'" onmouseover="this.style.background='#B8C8FE';montre(3);controle(3)"><font face=verdana size=1>Ressources</font></td></a>
</tr>
</table>
</center>
</body>
</html>