Javascript menu horizontal

WRInaute passionné
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
 
WRInaute passionné
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.
 
WRInaute passionné
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 :D ), et les sous-menu qui disparaissent de suite quand on enlève la souris.

Merci beaucoup
 
WRInaute passionné
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
 
WRInaute passionné
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
 
WRInaute passionné
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>
 
WRInaute occasionnel
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:
 
Discussions similaires
Haut