A voir également:
- Menu horizontal
- Menu déroulant excel - Guide
- Menu démarrer windows 11 - Guide
- Canon quick menu - Télécharger - Utilitaires
- Menu demarrer - Guide
- Menu contextuel windows 11 - Guide
11 réponses
JoloKossovar
Messages postés
111
Date d'inscription
mercredi 1 août 2007
Statut
Membre
Dernière intervention
5 septembre 2007
33
6 août 2007 à 17:31
6 août 2007 à 17:31
Tu ferai bien de commencer par qqchose de plus simple ...
kasken
Messages postés
51
Date d'inscription
mercredi 9 janvier 2008
Statut
Membre
Dernière intervention
10 juillet 2014
2
4 févr. 2009 à 19:48
4 févr. 2009 à 19:48
Bonjour,
voici un simple code que tu va te debrouiller avec
<style type="text/css" media="screen">
body{
behavior:url("csshover2.htc");
background-color: #333333;
background-image:;
}
.menu {
float:left;
padding: 0;
margin: 0;
color: #0F57FF;
background: #9FBCFF;
border: solid 1px #cfdeff;
width:400px;
clear:both; }
.rad_menu a, .rad_menu a:visited {width: 160px;
font-family: Georgia, Times New Roman, serif;
font-style: normal;
font-weight: normal;
font-size: 11px;
color: #0F57FF;
background-color: #9FBCFF;
text-decoration: none;
}
.rad_menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.rad_menu ul li {
float: left;
position: relative;
z-index: auto !important;
z-index: 1000;
border-right: solid 1px #cfdeff;
border-left: solid 1px #cfdeff;
}
.rad_menu ul li a {
color: #0F57FF;
background: #9FBCFF;
float: none !important;
float: left;
display: block;
height: 30px;
line-height: 30px;
padding: 0 10px 0 10px;
text-decoration: none;
}
.rad_menu ul li ul {
display: none;
border: none;
color: #0F57FF;
background: #9FBCFF;
width: 1px
}
.rad_menu ul li:hover a {
background-color: #cfdeff;
text-decoration: none;
color: #0F57FF;
}
.rad_menu ul li:hover ul {
display: block;
position: absolute;
z-index: 999;
top: 29px;
margin-top: 1px;
left: 0;
}
.rad_menu ul li:hover ul li a {
display: block;
width: 160px
height: auto;
line-height: 1.3em;
margin-left: -1px;
padding: 5px 10px 5px 10px;
border-left: solid 1px #cfdeff;
border-bottom: solid 1px #cfdeff;
background-color: #9FBCFF;
color: #0F57FF;
}
.rad_menu ul li:hover ul li a:hover {
background-color: #cfdeff;
text-decoration: none;
color: #0F57FF;
}
.rad_menu ul li a:hover {
background-color: #cfdeff;
text-decoration: none;
color: #0F57FF;
}
.rad_menu ul li a:hover ul {
display: block;
width: 9em;
position: absolute;
z-index: 999;
top: 29px;
left: 0;
}
.rad_menu ul li ul li a:visited {
background-color: #9FBCFF;
color: #0F57FF;
}
.rad_menu ul li a:hover ul li a {
display: block;
width: 9em;
height: 1px;
line-height: 1.3em;
padding: 4px 16px 4px 16px;
border-left: solid 1px #cfdeff;
border-bottom: solid 1px #cfdeff;
background-color: #9FBCFF;
color: #0F57FF;
}
.rad_menu ul li a:hover ul li a:hover {
background-color: #cfdeff;
text-decoration: none;
color: #0F57FF;
}
.Style1 {font-size: 16}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('kasampikaimage/titre2b.jpg','kasampikaimage/titre4b.jpg','kasampikaimage/titre1b.jpg','kasampikaimage/titre5b.jpg','kasampikaimage/titre6b.jpg','kasampikaimage/titre7b.jpg','kasampikaimage/titre8b.jpg','kasampikaimage/titre9b.jpg','kasampikaimage/titre10b.jpg')"><table width="881" height="103" border="0" align="center" cellspacing="0" background="kasampikaimage/KAS05.jpg">
<tr>
<td height="97"> </td>
</tr>
</table>
<div class="rad_menu ">
<ul><li class="Style1">
<a href="#">BBB</a>
<ul><li>
<a href="#" > sub-menu 3</a></li><li>
<a href="#" > sub-menu 4</a></li>
</ul></li>
</ul>
<ul><li class="Style1">
<a href="#">CCC</a>
<ul><li>
<a href="#" >sub-menu 5</a></li><li>
<a href="#" > sub-menu 6</a></li>
</ul></li>
</ul>
<ul><li class="Style1">
<a href="#">BBB</a>
<ul><li>
<a href="#" > sub-menu 3</a></li><li>
<a href="#" > sub-menu 4</a></li>
</ul></li>
</ul>
<ul><li class="Style1">
<a href="#">BBB</a>
<ul><li>
<a href="#" > sub-menu 3</a></li><li>
<a href="#" > sub-menu 4</a></li>
</ul></li>
</ul>
</div>
voici un simple code que tu va te debrouiller avec
<style type="text/css" media="screen">
body{
behavior:url("csshover2.htc");
background-color: #333333;
background-image:;
}
.menu {
float:left;
padding: 0;
margin: 0;
color: #0F57FF;
background: #9FBCFF;
border: solid 1px #cfdeff;
width:400px;
clear:both; }
.rad_menu a, .rad_menu a:visited {width: 160px;
font-family: Georgia, Times New Roman, serif;
font-style: normal;
font-weight: normal;
font-size: 11px;
color: #0F57FF;
background-color: #9FBCFF;
text-decoration: none;
}
.rad_menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.rad_menu ul li {
float: left;
position: relative;
z-index: auto !important;
z-index: 1000;
border-right: solid 1px #cfdeff;
border-left: solid 1px #cfdeff;
}
.rad_menu ul li a {
color: #0F57FF;
background: #9FBCFF;
float: none !important;
float: left;
display: block;
height: 30px;
line-height: 30px;
padding: 0 10px 0 10px;
text-decoration: none;
}
.rad_menu ul li ul {
display: none;
border: none;
color: #0F57FF;
background: #9FBCFF;
width: 1px
}
.rad_menu ul li:hover a {
background-color: #cfdeff;
text-decoration: none;
color: #0F57FF;
}
.rad_menu ul li:hover ul {
display: block;
position: absolute;
z-index: 999;
top: 29px;
margin-top: 1px;
left: 0;
}
.rad_menu ul li:hover ul li a {
display: block;
width: 160px
height: auto;
line-height: 1.3em;
margin-left: -1px;
padding: 5px 10px 5px 10px;
border-left: solid 1px #cfdeff;
border-bottom: solid 1px #cfdeff;
background-color: #9FBCFF;
color: #0F57FF;
}
.rad_menu ul li:hover ul li a:hover {
background-color: #cfdeff;
text-decoration: none;
color: #0F57FF;
}
.rad_menu ul li a:hover {
background-color: #cfdeff;
text-decoration: none;
color: #0F57FF;
}
.rad_menu ul li a:hover ul {
display: block;
width: 9em;
position: absolute;
z-index: 999;
top: 29px;
left: 0;
}
.rad_menu ul li ul li a:visited {
background-color: #9FBCFF;
color: #0F57FF;
}
.rad_menu ul li a:hover ul li a {
display: block;
width: 9em;
height: 1px;
line-height: 1.3em;
padding: 4px 16px 4px 16px;
border-left: solid 1px #cfdeff;
border-bottom: solid 1px #cfdeff;
background-color: #9FBCFF;
color: #0F57FF;
}
.rad_menu ul li a:hover ul li a:hover {
background-color: #cfdeff;
text-decoration: none;
color: #0F57FF;
}
.Style1 {font-size: 16}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('kasampikaimage/titre2b.jpg','kasampikaimage/titre4b.jpg','kasampikaimage/titre1b.jpg','kasampikaimage/titre5b.jpg','kasampikaimage/titre6b.jpg','kasampikaimage/titre7b.jpg','kasampikaimage/titre8b.jpg','kasampikaimage/titre9b.jpg','kasampikaimage/titre10b.jpg')"><table width="881" height="103" border="0" align="center" cellspacing="0" background="kasampikaimage/KAS05.jpg">
<tr>
<td height="97"> </td>
</tr>
</table>
<div class="rad_menu ">
<ul><li class="Style1">
<a href="#">BBB</a>
<ul><li>
<a href="#" > sub-menu 3</a></li><li>
<a href="#" > sub-menu 4</a></li>
</ul></li>
</ul>
<ul><li class="Style1">
<a href="#">CCC</a>
<ul><li>
<a href="#" >sub-menu 5</a></li><li>
<a href="#" > sub-menu 6</a></li>
</ul></li>
</ul>
<ul><li class="Style1">
<a href="#">BBB</a>
<ul><li>
<a href="#" > sub-menu 3</a></li><li>
<a href="#" > sub-menu 4</a></li>
</ul></li>
</ul>
<ul><li class="Style1">
<a href="#">BBB</a>
<ul><li>
<a href="#" > sub-menu 3</a></li><li>
<a href="#" > sub-menu 4</a></li>
</ul></li>
</ul>
</div>
merci
mais je suis tres novice !!! j'ai fait ce que tu m'as dit :
<html>
<head>
<title>Coolmenus example - CoolMenus4 DHTML script made by Thomas Brattli from DHTMLCentral.com. Visit for more great scripts.</title>
<style>
/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
/*Style for the background-bar*/
.clBar{position:absolute; width:10; height:10; background-color:Navy; layer-background-color:Navy; visibility:hidden}
/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:12px; font-weight:bold}
.clLevel0{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel0over{background-color:#336699; layer-background-color:#336699; color:Yellow; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}
/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:tahoma, arial,helvetica; font-size:11px; font-weight:bold}
.clLevel1{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel1over{background-color:#336699; layer-background-color:#336699; color:Yellow; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}
/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold}
.clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:Yellow; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}
</style>
<script language="JavaScript1.2" src="coolmenus4.js">
/*****************************************************************************
Copyright (c) 2001 Thomas Brattli (webmaster@dhtmlcentral.com)
DHTML coolMenus - Get it at coolmenus.dhtmlcentral.com
Version 4.0_beta
This script can be used freely as long as all copyright messages are
intact.
Extra info - Coolmenus reference/help - Extra links to help files ****
CSS help: http://coolmenus.dhtmlcentral.com/projects/coolmenus/reference.asp?m=37
General: http://coolmenus.dhtmlcentral.com/reference.asp?m=35
Menu properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=47
Level properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=48
Background bar properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=49
Item properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=50
******************************************************************************/
</script>
</head>
<body>
<script>
/***
This is the menu creation code - place it right after you body tag
Feel free to add this to a stand-alone js file and link it to your page.
**/
//Menu object creation
oCMenu=new makeCM("oCMenu") //Making the menu object. Argument: menuname
oCMenu.frames = 0
//Menu properties
oCMenu.pxBetween=30
oCMenu.fromLeft=20
oCMenu.fromTop=0
oCMenu.rows=1
oCMenu.menuPlacement="center"
oCMenu.offlineRoot="file:///C|/Inetpub/wwwroot/dhtmlcentral/projects/coolmenus/examples/"
oCMenu.onlineRoot="/coolmenus/"
oCMenu.resizeCheck=1
oCMenu.wait=1000
oCMenu.fillImg="cm_fill.gif"
oCMenu.zIndex=0
//Background bar properties
oCMenu.useBar=1
oCMenu.barWidth="100%"
oCMenu.barHeight="menu"
oCMenu.barClass="clBar"
oCMenu.barX=0
oCMenu.barY=0
oCMenu.barBorderX=0
oCMenu.barBorderY=0
oCMenu.barBorderClass=""
//Level properties - ALL properties have to be spesified in level 0
oCMenu.level[0]=new cm_makeLevel() //Add this for each new level
oCMenu.level[0].width=110
oCMenu.level[0].height=25
oCMenu.level[0].regClass="clLevel0"
oCMenu.level[0].overClass="clLevel0over"
oCMenu.level[0].borderX=1
oCMenu.level[0].borderY=1
oCMenu.level[0].borderClass="clLevel0border"
oCMenu.level[0].offsetX=0
oCMenu.level[0].offsetY=0
oCMenu.level[0].rows=0
oCMenu.level[0].arrow=0
oCMenu.level[0].arrowWidth=0
oCMenu.level[0].arrowHeight=0
oCMenu.level[0].align="bottom"
//EXAMPLE SUB LEVEL[1] PROPERTIES - You have to specify the properties you want different from LEVEL[0] - If you want all items to look the same just remove this
oCMenu.level[1]=new cm_makeLevel() //Add this for each new level (adding one to the number)
oCMenu.level[1].width=oCMenu.level[0].width-2
oCMenu.level[1].height=22
oCMenu.level[1].regClass="clLevel1"
oCMenu.level[1].overClass="clLevel1over"
oCMenu.level[1].borderX=1
oCMenu.level[1].borderY=1
oCMenu.level[1].align="right"
oCMenu.level[1].offsetX=-(oCMenu.level[0].width-2)/2+20
oCMenu.level[1].offsetY=0
oCMenu.level[1].borderClass="clLevel1border"
//EXAMPLE SUB LEVEL[2] PROPERTIES - You have to spesify the properties you want different from LEVEL[1] OR LEVEL[0] - If you want all items to look the same just remove this
oCMenu.level[2]=new cm_makeLevel() //Add this for each new level (adding one to the number)
oCMenu.level[2].width=150
oCMenu.level[2].height=20
oCMenu.level[2].offsetX=0
oCMenu.level[2].offsetY=0
oCMenu.level[2].regClass="clLevel2"
oCMenu.level[2].overClass="clLevel2over"
oCMenu.level[2].borderClass="clLevel2border"
/******************************************
Menu item creation:
myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout)
*************************************/
oCMenu.makeMenu('top0','',' News','example2.html','')
oCMenu.makeMenu('sub00','top0','Newest news','/news/index.asp')
oCMenu.makeMenu('sub001','sub00','- New DHTML API released','','',160,0)
oCMenu.makeMenu('sub002','sub00','- Explorer 7 is out','','',160,0)
oCMenu.makeMenu('sub003','sub00','- Opera 6 supports innerHTML','','',160,0)
oCMenu.makeMenu('sub01','top0','News archive','/news/archive.asp')
oCMenu.makeMenu('top1','',' Scripts','/scripts/index.asp')
oCMenu.makeMenu('sub10','top1','New scripts','/scripts/index.asp?show=new')
oCMenu.makeMenu('sub11','top1','All scripts','/scripts/index.asp?show=all')
oCMenu.makeMenu('sub12','top1','Popular scripts','/scripts/index.asp?show=pop')
oCMenu.makeMenu('top2','',' Articles','/articles/index.asp')
oCMenu.makeMenu('sub21','top2','Tutorials','/tutorials/index.asp')
oCMenu.makeMenu('sub210','sub21','New tutorials','/tutorials/index.asp')
oCMenu.makeMenu('sub211','sub21','Tutorials archive','/tutorials/archive.asp')
oCMenu.makeMenu('sub22','top2','Other articles','/articles/index.asp')
oCMenu.makeMenu('sub220','sub22','New articles','/articles/index.asp?show=new')
oCMenu.makeMenu('sub221','sub22','Article archive','/articles/archive.asp')
oCMenu.makeMenu('top3','',' Forums','http://www.sdf.sdf.sdf/')
oCMenu.makeMenu('sub30','top3','General','/forums/forum.asp?FORUM_ID=6&CAT_ID=1&Forum_Title=General+DHTML+issues')
oCMenu.makeMenu('sub31','top3','Scripts','/forums/forum.asp?FORUM_ID=4&CAT_ID=1&Forum_Title=DHTML+Scripts')
oCMenu.makeMenu('sub32','top3','Crossbrowser','/forums/forum.asp?FORUM_ID=3&CAT_ID=1&Forum_Title=Crossbrowser+DHTML')
oCMenu.makeMenu('sub33','top3','CoolMenus','/forums/forum.asp?FORUM_ID=2&CAT_ID=1&Forum_Title=CoolMenus')
oCMenu.makeMenu('sub34','top3','dhtmlcentral.com','/forums/forum.asp?FORUM_ID=5&CAT_ID=1&Forum_Title=dhtmlcentral%2Ecom')
oCMenu.makeMenu('sub35','top3','Cool sites','/forums/forum.asp?FORUM_ID=1&CAT_ID=1&Forum_Title=Cool+sites')
oCMenu.makeMenu('top5','',' CoolMenus','mailto:test.html')
oCMenu.makeMenu('sub50','top5','Examples','/coolmenus/examples.asp')
oCMenu.makeMenu('sub500','sub50','With frames','/coolmenus/examples.asp?show=with')
oCMenu.makeMenu('sub501','sub50','Without frames','/coolmenus/examples.asp?show=without')
oCMenu.makeMenu('sub51','top5','Download','/coolmenus/download.asp')
oCMenu.makeMenu('sub510','sub51','Download the source code to this menu','/coolmenus/download.asp','',150,40)
oCMenu.makeMenu('sub52','top5','Tutorial','/coolmenus/tutorial.asp')
oCMenu.makeMenu('sub520','sub52','Learn how to set up the menu','/coolmenus/tutorial.asp','',150,40)
oCMenu.makeMenu('sub53','top5','MenuMaker','','',0,0,'','','','','','','','window.open("/coolmenus/maker/","","width=800,height=600")')
oCMenu.makeMenu('sub530','sub53','Use the menuMaker to make the menu code for you','','',150,40,'','','','','','','','window.open("/coolmenus/maker/","","width=800,height=600")')
oCMenu.makeMenu('sub54','top5','FAQ','/coolmenus/faq.asp')
oCMenu.makeMenu('sub540','sub54','Frequently asked questions','coolmenus/faq.asp','',150,40)
oCMenu.makeMenu('sub55','top5','Help forum','/forums/forum.asp?FORUM_ID=2&CAT_ID=1&Forum_Title=CoolMenus')
oCMenu.makeMenu('sub550','sub55','Go to this forum and post you problems or suggestions regarding the CoolMenus','/forum/forum.asp?forum_id=2','',150,40)
//Leave this line - it constructs the menu
oCMenu.construct()
</script>
</body>
</html>
voilà mes je dois recopier quoi ??? car quand je recopie tout ça ne marche pas !!!!
merci
mais je suis tres novice !!! j'ai fait ce que tu m'as dit :
<html>
<head>
<title>Coolmenus example - CoolMenus4 DHTML script made by Thomas Brattli from DHTMLCentral.com. Visit for more great scripts.</title>
<style>
/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
/*Style for the background-bar*/
.clBar{position:absolute; width:10; height:10; background-color:Navy; layer-background-color:Navy; visibility:hidden}
/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:12px; font-weight:bold}
.clLevel0{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel0over{background-color:#336699; layer-background-color:#336699; color:Yellow; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}
/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:tahoma, arial,helvetica; font-size:11px; font-weight:bold}
.clLevel1{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel1over{background-color:#336699; layer-background-color:#336699; color:Yellow; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}
/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold}
.clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:Yellow; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}
</style>
<script language="JavaScript1.2" src="coolmenus4.js">
/*****************************************************************************
Copyright (c) 2001 Thomas Brattli (webmaster@dhtmlcentral.com)
DHTML coolMenus - Get it at coolmenus.dhtmlcentral.com
Version 4.0_beta
This script can be used freely as long as all copyright messages are
intact.
Extra info - Coolmenus reference/help - Extra links to help files ****
CSS help: http://coolmenus.dhtmlcentral.com/projects/coolmenus/reference.asp?m=37
General: http://coolmenus.dhtmlcentral.com/reference.asp?m=35
Menu properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=47
Level properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=48
Background bar properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=49
Item properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=50
******************************************************************************/
</script>
</head>
<body>
<script>
/***
This is the menu creation code - place it right after you body tag
Feel free to add this to a stand-alone js file and link it to your page.
**/
//Menu object creation
oCMenu=new makeCM("oCMenu") //Making the menu object. Argument: menuname
oCMenu.frames = 0
//Menu properties
oCMenu.pxBetween=30
oCMenu.fromLeft=20
oCMenu.fromTop=0
oCMenu.rows=1
oCMenu.menuPlacement="center"
oCMenu.offlineRoot="file:///C|/Inetpub/wwwroot/dhtmlcentral/projects/coolmenus/examples/"
oCMenu.onlineRoot="/coolmenus/"
oCMenu.resizeCheck=1
oCMenu.wait=1000
oCMenu.fillImg="cm_fill.gif"
oCMenu.zIndex=0
//Background bar properties
oCMenu.useBar=1
oCMenu.barWidth="100%"
oCMenu.barHeight="menu"
oCMenu.barClass="clBar"
oCMenu.barX=0
oCMenu.barY=0
oCMenu.barBorderX=0
oCMenu.barBorderY=0
oCMenu.barBorderClass=""
//Level properties - ALL properties have to be spesified in level 0
oCMenu.level[0]=new cm_makeLevel() //Add this for each new level
oCMenu.level[0].width=110
oCMenu.level[0].height=25
oCMenu.level[0].regClass="clLevel0"
oCMenu.level[0].overClass="clLevel0over"
oCMenu.level[0].borderX=1
oCMenu.level[0].borderY=1
oCMenu.level[0].borderClass="clLevel0border"
oCMenu.level[0].offsetX=0
oCMenu.level[0].offsetY=0
oCMenu.level[0].rows=0
oCMenu.level[0].arrow=0
oCMenu.level[0].arrowWidth=0
oCMenu.level[0].arrowHeight=0
oCMenu.level[0].align="bottom"
//EXAMPLE SUB LEVEL[1] PROPERTIES - You have to specify the properties you want different from LEVEL[0] - If you want all items to look the same just remove this
oCMenu.level[1]=new cm_makeLevel() //Add this for each new level (adding one to the number)
oCMenu.level[1].width=oCMenu.level[0].width-2
oCMenu.level[1].height=22
oCMenu.level[1].regClass="clLevel1"
oCMenu.level[1].overClass="clLevel1over"
oCMenu.level[1].borderX=1
oCMenu.level[1].borderY=1
oCMenu.level[1].align="right"
oCMenu.level[1].offsetX=-(oCMenu.level[0].width-2)/2+20
oCMenu.level[1].offsetY=0
oCMenu.level[1].borderClass="clLevel1border"
//EXAMPLE SUB LEVEL[2] PROPERTIES - You have to spesify the properties you want different from LEVEL[1] OR LEVEL[0] - If you want all items to look the same just remove this
oCMenu.level[2]=new cm_makeLevel() //Add this for each new level (adding one to the number)
oCMenu.level[2].width=150
oCMenu.level[2].height=20
oCMenu.level[2].offsetX=0
oCMenu.level[2].offsetY=0
oCMenu.level[2].regClass="clLevel2"
oCMenu.level[2].overClass="clLevel2over"
oCMenu.level[2].borderClass="clLevel2border"
/******************************************
Menu item creation:
myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout)
*************************************/
oCMenu.makeMenu('top0','',' News','example2.html','')
oCMenu.makeMenu('sub00','top0','Newest news','/news/index.asp')
oCMenu.makeMenu('sub001','sub00','- New DHTML API released','','',160,0)
oCMenu.makeMenu('sub002','sub00','- Explorer 7 is out','','',160,0)
oCMenu.makeMenu('sub003','sub00','- Opera 6 supports innerHTML','','',160,0)
oCMenu.makeMenu('sub01','top0','News archive','/news/archive.asp')
oCMenu.makeMenu('top1','',' Scripts','/scripts/index.asp')
oCMenu.makeMenu('sub10','top1','New scripts','/scripts/index.asp?show=new')
oCMenu.makeMenu('sub11','top1','All scripts','/scripts/index.asp?show=all')
oCMenu.makeMenu('sub12','top1','Popular scripts','/scripts/index.asp?show=pop')
oCMenu.makeMenu('top2','',' Articles','/articles/index.asp')
oCMenu.makeMenu('sub21','top2','Tutorials','/tutorials/index.asp')
oCMenu.makeMenu('sub210','sub21','New tutorials','/tutorials/index.asp')
oCMenu.makeMenu('sub211','sub21','Tutorials archive','/tutorials/archive.asp')
oCMenu.makeMenu('sub22','top2','Other articles','/articles/index.asp')
oCMenu.makeMenu('sub220','sub22','New articles','/articles/index.asp?show=new')
oCMenu.makeMenu('sub221','sub22','Article archive','/articles/archive.asp')
oCMenu.makeMenu('top3','',' Forums','http://www.sdf.sdf.sdf/')
oCMenu.makeMenu('sub30','top3','General','/forums/forum.asp?FORUM_ID=6&CAT_ID=1&Forum_Title=General+DHTML+issues')
oCMenu.makeMenu('sub31','top3','Scripts','/forums/forum.asp?FORUM_ID=4&CAT_ID=1&Forum_Title=DHTML+Scripts')
oCMenu.makeMenu('sub32','top3','Crossbrowser','/forums/forum.asp?FORUM_ID=3&CAT_ID=1&Forum_Title=Crossbrowser+DHTML')
oCMenu.makeMenu('sub33','top3','CoolMenus','/forums/forum.asp?FORUM_ID=2&CAT_ID=1&Forum_Title=CoolMenus')
oCMenu.makeMenu('sub34','top3','dhtmlcentral.com','/forums/forum.asp?FORUM_ID=5&CAT_ID=1&Forum_Title=dhtmlcentral%2Ecom')
oCMenu.makeMenu('sub35','top3','Cool sites','/forums/forum.asp?FORUM_ID=1&CAT_ID=1&Forum_Title=Cool+sites')
oCMenu.makeMenu('top5','',' CoolMenus','mailto:test.html')
oCMenu.makeMenu('sub50','top5','Examples','/coolmenus/examples.asp')
oCMenu.makeMenu('sub500','sub50','With frames','/coolmenus/examples.asp?show=with')
oCMenu.makeMenu('sub501','sub50','Without frames','/coolmenus/examples.asp?show=without')
oCMenu.makeMenu('sub51','top5','Download','/coolmenus/download.asp')
oCMenu.makeMenu('sub510','sub51','Download the source code to this menu','/coolmenus/download.asp','',150,40)
oCMenu.makeMenu('sub52','top5','Tutorial','/coolmenus/tutorial.asp')
oCMenu.makeMenu('sub520','sub52','Learn how to set up the menu','/coolmenus/tutorial.asp','',150,40)
oCMenu.makeMenu('sub53','top5','MenuMaker','','',0,0,'','','','','','','','window.open("/coolmenus/maker/","","width=800,height=600")')
oCMenu.makeMenu('sub530','sub53','Use the menuMaker to make the menu code for you','','',150,40,'','','','','','','','window.open("/coolmenus/maker/","","width=800,height=600")')
oCMenu.makeMenu('sub54','top5','FAQ','/coolmenus/faq.asp')
oCMenu.makeMenu('sub540','sub54','Frequently asked questions','coolmenus/faq.asp','',150,40)
oCMenu.makeMenu('sub55','top5','Help forum','/forums/forum.asp?FORUM_ID=2&CAT_ID=1&Forum_Title=CoolMenus')
oCMenu.makeMenu('sub550','sub55','Go to this forum and post you problems or suggestions regarding the CoolMenus','/forum/forum.asp?forum_id=2','',150,40)
//Leave this line - it constructs the menu
oCMenu.construct()
</script>
</body>
</html>
voilà mes je dois recopier quoi ??? car quand je recopie tout ça ne marche pas !!!!
merci
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
je voudrais egalement avoir un menu horizontal, mais je sais pas comment on fé, si qqun pourrait m'aider
c un peu urgent
c pour un etudiant en stage, svp c urgent
merci d'avance
freepsy@voila.fr
c un peu urgent
c pour un etudiant en stage, svp c urgent
merci d'avance
freepsy@voila.fr
Merci beaucoup eclipse pour le coup de main, tééé depuis le temps que je cherchais le code, j'espere je pourrais utiliser comme j'en ai besoin, merci beaucoup beaucoup !!
au plaisir ....
a+
au plaisir ....
a+
Bonjour j'aimerais faire un menu horizontal comme celui là http://www.dhtmlcentral.com/projects/coolmenus/examples/menu1.html
pouvez vous me donner le script???
merci
pouvez vous me donner le script???
merci
lami20j
Messages postés
21331
Date d'inscription
jeudi 4 novembre 2004
Statut
Modérateur, Contributeur sécurité
Dernière intervention
30 octobre 2019
3 567
29 mars 2006 à 23:34
29 mars 2006 à 23:34
Regarde le code source de la page.
nathalie
>
lami20j
Messages postés
21331
Date d'inscription
jeudi 4 novembre 2004
Statut
Modérateur, Contributeur sécurité
Dernière intervention
30 octobre 2019
30 mars 2006 à 10:41
30 mars 2006 à 10:41
salut
merci pour ton aide mais je ne vois pas de code source de la page !!! je le trouve ou? svp
merci
merci pour ton aide mais je ne vois pas de code source de la page !!! je le trouve ou? svp
merci
antic80
Messages postés
4751
Date d'inscription
lundi 30 mai 2005
Statut
Contributeur
Dernière intervention
9 septembre 2009
1 159
30 mars 2006 à 10:49
30 mars 2006 à 10:49
faire un clic droit sur la page ou il y a le menu et dans le petit menu qui apparait clic sur afficher la source
pour faire + simple voila mon script de mon menu actuel
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title>menu</title>
</head>
<body bgcolor="#58AB91" text="#B6B110">
<ul id="navlist">
<li id="active"><a href="accueil.htm" target="droite_inf"
id="current">ACCUEIL </a></li>
<li><a href="#">ARCHIVES</a></li>
<li><a href="#">LIENS UTILES</a></li>
<li><a href="#">FORUM</a></li>
<li><a href="sug_html.htm" target="droite_inf">SUGGESTIONS</a></li>
<li><a href="mailto:esr@wanadoo.fr" target="droite_inf">NOUS
CONTACTER</a></li>
<li><a href="#">RECHERCHER</a></li>
</ul>
<style type="text/css" media="screen"><!--
ul#navlist { font-family: sans-serif; }
ul#navlist a
{
font-weight: bold;
text-decoration: none;
}
ul#navlist, ul#navlist ul, ul#navlist li
{
margin: 3px;
padding:0px;
list-style-type: none;
}
ul#navlist li { float: left; }
ul#navlist li a
{
color: #ffffff;
background-color: #003366;
padding: 6px;
border: 3px #ffffff outset;
}
ul#navlist li a:hover
{
color: #ffff00;
background-color: #003366;
}
ul#navlist li a:active
{
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
}
ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }
ul#subnavlist li a
{
padding: 0px;
margin: 0px;
}
ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}
ul#navlist li:hover ul#subnavlist li a
{
display: block;
width: 10em;
border: none;
padding: 2px;
}
ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }
--></style>
</body>
</html>
le probleme c'est les subnavlist!!! je n'arrive pas à les faire!!!!
Si tu pouvais m'aider ca serait cool!!!
merci
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title>menu</title>
</head>
<body bgcolor="#58AB91" text="#B6B110">
<ul id="navlist">
<li id="active"><a href="accueil.htm" target="droite_inf"
id="current">ACCUEIL </a></li>
<li><a href="#">ARCHIVES</a></li>
<li><a href="#">LIENS UTILES</a></li>
<li><a href="#">FORUM</a></li>
<li><a href="sug_html.htm" target="droite_inf">SUGGESTIONS</a></li>
<li><a href="mailto:esr@wanadoo.fr" target="droite_inf">NOUS
CONTACTER</a></li>
<li><a href="#">RECHERCHER</a></li>
</ul>
<style type="text/css" media="screen"><!--
ul#navlist { font-family: sans-serif; }
ul#navlist a
{
font-weight: bold;
text-decoration: none;
}
ul#navlist, ul#navlist ul, ul#navlist li
{
margin: 3px;
padding:0px;
list-style-type: none;
}
ul#navlist li { float: left; }
ul#navlist li a
{
color: #ffffff;
background-color: #003366;
padding: 6px;
border: 3px #ffffff outset;
}
ul#navlist li a:hover
{
color: #ffff00;
background-color: #003366;
}
ul#navlist li a:active
{
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
}
ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }
ul#subnavlist li a
{
padding: 0px;
margin: 0px;
}
ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}
ul#navlist li:hover ul#subnavlist li a
{
display: block;
width: 10em;
border: none;
padding: 2px;
}
ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }
--></style>
</body>
</html>
le probleme c'est les subnavlist!!! je n'arrive pas à les faire!!!!
Si tu pouvais m'aider ca serait cool!!!
merci
cavaliere2
Messages postés
14
Date d'inscription
dimanche 5 août 2007
Statut
Membre
Dernière intervention
24 novembre 2007
4
15 août 2007 à 23:38
15 août 2007 à 23:38
Bonsoir, allez donc voir sur : http://iubito.free.fr/prog/menu.php. C'est super bien fait, facile à utiliser selon vos critères de couleur etc.
