Menu horizontal [Fermé]

Signaler
-
 LDD-Soft -
slt

je suis en train de créer un site web

et je cherche un menu horizontal assez sofistiqué

----------- -------------
accueil accueil1
----------- -------------
liens
-----------

qd je clique sur accueil, je dois avoir accueil 1
et ainsi de suite

couleur : gris/bleu

inutile de préciser que j'ai déjà visité bon nombre de sites pour les ressources webmaster

merci de votre aide

11 réponses

Messages postés
111
Date d'inscription
mercredi 1 août 2007
Statut
Membre
Dernière intervention
5 septembre 2007
33
Tu ferai bien de commencer par qqchose de plus simple ...
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
50
Date d'inscription
mercredi 9 janvier 2008
Statut
Membre
Dernière intervention
10 juillet 2014
2
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>
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

C'est bien beau tout ça, mais le script ne fonctionne pas sous IE7 !! De plus, Il pré-télécharge des images qu'on n'a pas.
A fignoler !
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
Salut !
oui il te faut recopier le code source mais tu remarqueras qu'il utilise un fichier externe qui est "coolmenus4.js"
pour l'uploader tu as juste a mettre dans l'url coolmenus4.js à la place de menu1.html

a+
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
Salut,

Il y a ça qu'est vraiment pas mal : http://www.dhtmlcentral.com/projects/coolmenus/?m=31
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+
cc ! Je serais ravi de répondre a ta question ! Même si je n'en connais pas la réponse mais j'aurais au moins des nouvelles de toi !
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
Messages postés
21331
Date d'inscription
jeudi 4 novembre 2004
Statut
Modérateur, Contributeur sécurité
Dernière intervention
30 octobre 2019
3 532
Regarde le code source de la page.
>
Messages postés
21331
Date d'inscription
jeudi 4 novembre 2004
Statut
Modérateur, Contributeur sécurité
Dernière intervention
30 octobre 2019

salut
merci pour ton aide mais je ne vois pas de code source de la page !!! je le trouve ou? svp

merci
Messages postés
4751
Date d'inscription
lundi 30 mai 2005
Statut
Contributeur
Dernière intervention
9 septembre 2009
1 152
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
je ne sais pas ;)
Messages postés
14
Date d'inscription
dimanche 5 août 2007
Statut
Membre
Dernière intervention
24 novembre 2007
4
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.

salut, la page est maintenant non trouvable!! pourais tu donné une autre adresse, stp?