Javascript menu horizontal

sim100 · 21 Août 2005

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 · 21 Août 2005

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

sim100 · 21 Août 2005

javascript

Du javascript si possible

Merci

Borower · 21 Août 2005

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 · 21 Août 2005

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

sim100 · 21 Août 2005

merci

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

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 · 21 Août 2005

Re: merci

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

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

Borower · 21 Août 2005

Re je t' ai trouvé un menu.

Code:

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:

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 · 21 Août 2005

super merci

Merci, je vais le tester.

Merci encore

Borower · 21 Août 2005

DSL j'ai oublié une partie du script

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

Code:

<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 · 24 Août 2005

Re: merci

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

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

sim100 · 24 Août 2005

Ah oui

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