|
Voir le sujet précédent :: Voir le sujet suivant
|
| Auteur |
Message |
| |
|
sim100
WRInaute accro
Inscrit le: 02 Fév 2003
Messages: 1097
Localisation: Thailande
|
 Posté le : Dim Aoû 21, 2005 18:20 Sujet du message: javascript menu horizontal |
|
|
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
Dernière édition par sim100 le Dim Aoû 21, 2005 18:33; édité 1 fois |
|
| |
|
 |
Borower
WRInaute accro
Inscrit le: 18 Avr 2005
Messages: 2128
Localisation: Lyon
|
| Posté le : Dim Aoû 21, 2005 18:22 Sujet du message: javascript menu horizontal |
|
|
| Salut c'est du java que tu veux ou du javascript ?? |
|
| |
|
|
sim100
WRInaute accro
Inscrit le: 02 Fév 2003
Messages: 1097
Localisation: Thailande
|
| Posté le : Dim Aoû 21, 2005 18:23 Sujet du message: javascript |
|
|
Du javascript si possible
Merci |
|
| |
|
|
Borower
WRInaute accro
Inscrit le: 18 Avr 2005
Messages: 2128
Localisation: Lyon
|
| Posté le : Dim Aoû 21, 2005 18:31 Sujet du message: javascript menu horizontal |
|
|
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
WRInaute impliqué
Inscrit le: 18 Aoû 2003
Messages: 302
|
| Posté le : Dim Aoû 21, 2005 18:38 Sujet du message: javascript menu horizontal |
|
|
si tu tiens au javascript tu as un grand choix ici:
http://perso.calixo.net/~mastro/ |
|
| |
|
|
sim100
WRInaute accro
Inscrit le: 02 Fév 2003
Messages: 1097
Localisation: Thailande
|
| Posté le : Dim Aoû 21, 2005 19:09 Sujet du message: merci |
|
|
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
WRInaute accro
Inscrit le: 18 Avr 2005
Messages: 2128
Localisation: Lyon
|
| Posté le : Dim Aoû 21, 2005 19:30 Sujet du message: Re: merci |
|
|
| sim100 a écrit: |
| 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
WRInaute accro
Inscrit le: 18 Avr 2005
Messages: 2128
Localisation: Lyon
|
| Posté le : Dim Aoû 21, 2005 19:36 Sujet du message: javascript menu horizontal |
|
|
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
Dernière édition par Borower le Dim Aoû 21, 2005 20:09; édité 1 fois |
|
| |
|
|
sim100
WRInaute accro
Inscrit le: 02 Fév 2003
Messages: 1097
Localisation: Thailande
|
| Posté le : Dim Aoû 21, 2005 19:38 Sujet du message: super merci |
|
|
Merci, je vais le tester.
Merci encore |
|
| |
|
|
Borower
WRInaute accro
Inscrit le: 18 Avr 2005
Messages: 2128
Localisation: Lyon
|
| Posté le : Dim Aoû 21, 2005 21:48 Sujet du message: javascript menu horizontal |
|
|
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
WRInaute impliqué
Inscrit le: 21 Déc 2003
Messages: 282
Localisation: Strasbourg
|
| Posté le : Mer Aoû 24, 2005 9:41 Sujet du message: Re: merci |
|
|
| sim100 a écrit: |
| 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
WRInaute accro
Inscrit le: 02 Fév 2003
Messages: 1097
Localisation: Thailande
|
| Posté le : Mer Aoû 24, 2005 12:48 Sujet du message: Ah oui |
|
|
oui merci, j'avias regardé les exemple en premier c'est pour ça.
Merci |
|
| |
|
|
| |
|
|
