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

11 réponses

  1.
    JoloKossovar Messages postés 111 Statut Membre 33
     
    Tu ferai bien de commencer par qqchose de plus simple ...
    2
  2. 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
    1. 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
  4. 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
    1. 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

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

    Posez votre question
  6. 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
  8. 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
    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
  9. 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
    1. lami20j Messages postés 21506 Date d'inscription   Statut Modérateur, Contributeur sécurité Dernière intervention   3 571
       
      Regarde le code source de la page.
      0
      1. nathalie > lami20j Messages postés 21506 Date d'inscription   Statut Modérateur, Contributeur sécurité Dernière intervention  
         
        salut
        merci pour ton aide mais je ne vois pas de code source de la page !!! je le trouve ou? svp

        merci
        0
  10. antic80 Messages postés 4877 Statut Contributeur 1 178
     
    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
    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
  12. 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
    1. louisfelix905684
       
      salut, la page est maintenant non trouvable!! pourais tu donné une autre adresse, stp?
      0

Discussions similaires

Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses
Comment faire afin d'accéder au boot menu ou BIOS sous MSI ?
Kaheil -
Ismo87 -

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

5 réponses
menu caché
laurent -
ChariduP -

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

7 réponses