Menu horizontal

jebo -  
 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
A voir également:

11 réponses

Réponse 1 / 11
JoloKossovar Messages postés 111 Statut Membre 33
 
Tu ferai bien de commencer par qqchose de plus simple ...
2
Réponse 2 / 11
kasken Messages postés 54 Statut Membre 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
LDD-Soft
 
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 !
0
Réponse 3 / 11
casper
 
as-tu ete voir
http://www.ccim.be/ccim328/trucs/menu07.html ?

casper
0
Réponse 4 / 11
nathalie
 
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
0
Linton
 
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+
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 11
Mohammad
 
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
-1
Réponse 6 / 11
eclipse
 
Salut,

Il y a ça qu'est vraiment pas mal : http://www.dhtmlcentral.com/projects/coolmenus/?m=31
-1
Réponse 7 / 11
Mohammad
 
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+
-1
kenji
 
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 !
0
Réponse 8 / 11
nathalie
 
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
-1
lami20j Messages postés 21644 Statut Modérateur, Contributeur sécurité 3 570
 
Regarde le code source de la page.
0
nathalie > lami20j Messages postés 21644 Statut Modérateur, Contributeur sécurité
 
salut
merci pour ton aide mais je ne vois pas de code source de la page !!! je le trouve ou? svp

merci
0
Réponse 9 / 11
antic80 Messages postés 4877 Statut Contributeur 1 161
 
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
-1
nathalie
 
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
0
Réponse 10 / 11
hael
 
je ne sais pas ;)
-1
Réponse 11 / 11
cavaliere2 Messages postés 14 Statut Membre 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.
-1
louisfelix905684
 
salut, la page est maintenant non trouvable!! pourais tu donné une autre adresse, stp?
0

Discussions similaires

TV continental Edison bloqué sur le menu
Utilisateur anonyme -
jeannets -

1 réponse
menu caché
laurent -
ChariduP -

7 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses
Mon PC marque press the esc key for startup menu
Jonas2022 -
SATS_fr -

5 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses