javascript menu horizontal

[sim100]

Bonjour
Quelqu'un aurait un script de menu horizontal sympas avec 1 ou 2 niveaux au choix et les sous-menus qui se ferme quand la souris n'est plus dessus?
J'ai pas trouvé de bien sur des sites genre editeurjava...

Ce serait sympas
Merci d'avance

[Borower]

Salut c'est du java que tu veux ou du javascript ??

[sim100]

Du javascript si possible

Merci

[Borower]

Ba alors change ton titre de post car c'est pas ce que tu as marqué.
Sinon va sur le site d'alsacreation:
css.alsacreations.com et tu trouvera tous ton bonheur.
Je te conseil d'utiliser du CSS au lieu du javascript.

[jibi]

si tu tiens au javascript tu as un grand choix ici:
http://perso.calixo.net/~mastro/

[sim100]

Ouai c'est dommage dans alsacreation les menu horizontaux en CSS, lorsqu'on retire la souries les sous-menu ne disparaissent pas

Idem pour le site de jibi, il y a deux menus sympas mais en verticaux.

Donc si quelqu'un en a un bien. J'en avais un avant je n'arrive pas à mettre la main dessus.

Merci encore pour l'aide, vous allez me dire que je suis compliqué, mais en fait c'est un tout simple que je veux, juste les catégories, les sous menu qui apparaissent (pas besoin qu'ils apparaissent avec des tonnes d'effets spéciaux ), et les sous-menu qui disparaissent de suite quand on enlève la souris.

Merci beaucoup

[Borower]

Ouai c'est dommage dans alsacreation les menu horizontaux en CSS, lorsqu'on retire la souries les sous-menu ne disparaissent pas

C'est du CSS.
Tu peux le modifier comme tu le sens.
Pense au fonction ouseover et onmouseout

[Borower]

Re je t' ai trouvé un menu.

Code: Tout sélectionner

A mettre dans ton fichier HTML:
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 7;

//menu constructor
function menu(allitems,thisitem,startstate){
  callname= "gl"+thisitem;
  divname="subglobal"+thisitem; 
  this.numberofmenuitems = 7;
  this.caller = document.getElementById(callname);
  this.thediv = document.getElementById(divname);
  this.thediv.style.visibility = startstate;
}

//menu methods
function ehandler(event,theobj){
  for (var i=1; i<= theobj.numberofmenuitems; i++){
    var shutdiv =eval( "menuitem"+i+".thediv");
    shutdiv.style.visibility="hidden";
  }
  theobj.thediv.style.visibility="visible";
}
            
function closesubnav(event){
  if ((event.clientY <48)||(event.clientY > 107)){
    for (var i=1; i<= numofitems; i++){
      var shutdiv =eval('menuitem'+i+'.thediv');
      shutdiv.style.visibility='hidden';
    }
  }
}
// -->
</script>
    <div id="globalLink">
      <a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">global
     link</a><a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">global
      link</a><a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">global
      link</a><a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">global
      link</a><a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">global
      link</a><a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">global
      link</a><a href="#" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">global
      link</a>
    </div>
      <!-- end globalNav -->
  <div id="subglobal1" class="subglobalNav">
    <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1
    link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1
    link</a> | <a href="#">subglobal1 link</a>
  </div>
  <div id="subglobal2" class="subglobalNav">
    <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
    link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
    link</a> | <a href="#">subglobal2 link</a>
  </div>
  <div id="subglobal3" class="subglobalNav">
    <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
    link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
    link</a> | <a href="#">subglobal3 link</a>
  </div>
  <div id="subglobal4" class="subglobalNav">
    <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4
    link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4
    link</a> | <a href="#">subglobal4 link</a>
  </div>
  <div id="subglobal5" class="subglobalNav">
    <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5
    link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5
    link</a> | <a href="#">subglobal5 link</a>
  </div>
  <div id="subglobal6" class="subglobalNav">
    <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6
    link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6
    link</a> | <a href="#">subglobal6 link</a>
  </div>
  <div id="subglobal7" class="subglobalNav">
    <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7
    link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7
    link</a> | <a href="#">subglobal7 link</a>
  </div>
  <div id="subglobal8" class="subglobalNav">
    <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8
    link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8
    link</a> | <a href="#">subglobal8 link</a>
  </div>


Code: Tout sélectionner

Dans le CSS:
.subglobalNav{
   position: absolute;
   top: 84px;
   left: 0px;
   /*width: 100%;*/
   min-width: 640px;
   height: 20px;
   padding: 0px 0px 0px 10px;
   visibility: hidden;
   color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
   font-size: 80%;
   color: #ffffff;
}

.subglobalNav a:hover{
   color: #cccccc;
}
#globalLink{
   position: absolute;
   top: 6px;
   height: 22px;
   min-width: 640px;
   padding: 0px;
   margin: 0px;
   left: 10px;
   z-index: 100;
}


a.glink, a.glink:visited{
     font-size: small;
     color: #000000;
   font-weight: bold;
   margin: 0px;
   padding: 2px 5px 4px 5px;
   border-right: 1px solid #8FB8BC;
}

a.glink:hover{
   text-decoration: none;
}


A toi de le modifier pour toi.
C'est du code recopier a la vas vite

[sim100]

Merci, je vais le tester.

Merci encore

[Borower]

DSL j'ai oublié une partie du script

A mettre a la fin avant le /body et le /html

Code: Tout sélectionner

<script type="text/javascript">
    <!--
      var menuitem1 = new menu(7,1,"hidden");
         var menuitem2 = new menu(7,2,"hidden");
         var menuitem3 = new menu(7,3,"hidden");
         var menuitem4 = new menu(7,4,"hidden");
         var menuitem5 = new menu(7,5,"hidden");
         var menuitem6 = new menu(7,6,"hidden");
         var menuitem7 = new menu(7,7,"hidden");
    // -->
    </script>


[SIBELIUS]

Ouai c'est dommage dans alsacreation les menu horizontaux en CSS, lorsqu'on retire la souries les sous-menu ne disparaissent pas

Si si, il suffit de lire le tutoriel jusqu'au bout ("variante : les sous-menus disparaissent")

[sim100]

oui merci, j'avias regardé les exemple en premier c'est pour ça.
Merci