Menu accordeon vertical [Résolu]

Signaler
Messages postés
30
Date d'inscription
samedi 13 mars 2004
Statut
Membre
Dernière intervention
2 mai 2012
-
Messages postés
30
Date d'inscription
samedi 13 mars 2004
Statut
Membre
Dernière intervention
2 mai 2012
-
Bonjour
J'aimerais adapter le menu suivant pour mon site:
http://www.phatfusion.net/imagemenu/
mais le mettre en menu vertical, dans le genre de celui-ci: (mais sans flash)
http://www.sacbee.com/static/live/news/projects/biotech/
mais la je bloque...
est-ce que quelqu'un aurait une piste ?
Merci

Antoine

32 réponses

Messages postés
30
Date d'inscription
samedi 13 mars 2004
Statut
Membre
Dernière intervention
2 mai 2012
16
Au risque de vous interrompre dans vos discutions, on s'éloigne quand même du sujet initial.
de mon coté j'ai enfin réussi à adapter les scripts.

HTML: (index.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Horizontal Slide Menu</title>
<link rel="stylesheet" type="text/css" href="slidemenu.css" />
<script type="text/javascript" src="slidemenu.js"></script>
<style type="text/css">
<!--
body {
    background-color: #99FF00;
}
-->
</style></head>

    <li>http://www.google.com</li>
    <li>http://www.google.com</li>
    <li>http://www.google.com</li>
    <li>http://www.google.com</li>
    <li>http://www.google.com</li>

</html>

pour le CSS: (slidemenu.css)

* {margin:0; padding:0; border:0}
.sm {list-style:none; width:200px; height:600px; display:block; overflow:hidden}
.sm li {float:left; display:inline; overflow:hidden}

Pour le JS: (slidemenu.js)
var slideMenu=function(){
    var sp,st,t,m,sa,l,w,gw,ot;
    return{
        build:function(sm,sw,mt,s,sl,h){
            sp=s; st=sw; t=mt;
            m=document.getElementById(sm);
            sa=m.getElementsByTagName('li');
            l=sa.length; w=m.offsetHeight; gw=w/l;
            ot=Math.floor((w-st)/(l-1)); var i=0;
            for(i;i<l;i++){s=sa[i]; s.style.height=gw+'px'; this.timer(s)}
            if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}
        },
        timer:function(s){
            s.onmouseover=function(){clearInterval(m.htimer);clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(s)},t)}
            s.onmouseout=function(){clearInterval(m.timer);clearInterval(m.htimer);m.htimer=setInterval(function(){slideMenu.slide(s,true)},t)}
        },
        slide:function(s,c){
            var cw=parseInt(s.style.height);
            if((cw<st && !c) || (cw>gw && c)){
                var owt=0; var i=0;
                for(i;i<l;i++){
                    if(sa[i]!=s){
                        var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.height);
                        if(ow<gw && c){oi=Math.floor((gw-ow)/sp); oi=(oi>0)?oi:1; o.style.height=(ow+oi)+'px';
                        }else if(ow>ot && !c){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.height=(ow-oi)+'px'}
                        if(c){owt=owt+(ow+oi)}else{owt=owt+(ow-oi)}}}
                s.style.height=(w-owt)+'px';
            }else{clearInterval(m.timer);clearInterval(m.htimer)}
        }
    };
}();

pour ceux que ça intéresse voila le script initial:
http://www.leigeber.com/2008/05/horizontal-javascript-accordion-menu/

Encore merci à tous.
Messages postés
30
Date d'inscription
samedi 13 mars 2004
Statut
Membre
Dernière intervention
2 mai 2012
16
Finalement voila exactement ce que je cherchais...
http://www.scriptocean.com/accordion.html

Merci à tous pour votre aide
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
Bonjour,
il va donc falloir qu'on aille ches phatfusion voir ce qu'ils font
puis chez sacbee
essayer de comprendre ce que tu veux à travers des pages html....

pas simple ! hein ?

si tu exprimais, simplement, en français ou à peu près,  ce dont tu as besoin ?

si c'est un "menu en accordéon" il y en a pas mal dans les sources.
peut-être comme celui de codesSources ici à gauche ?
oui, il est disponible je crois et comme l'a dit son auteur, ce n'est jamais
qu'un div caché qu'on montre, pas grand chose de plus ( trop modeste l'auteur ;o)

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
30
Date d'inscription
samedi 13 mars 2004
Statut
Membre
Dernière intervention
2 mai 2012
16
alors en français ça risque d'être plus compliqué que d'aller voire directement sur le site mais bon.
je voudrais un menu vertical en accordéon dynamique, c'est à dire que lorsqu'on passe au dessus d'une case du menu, il s'agrandisse et que les autres rétrécissent. mais la ça me parait moins claire d'un coup ...
Merci
Messages postés
943
Date d'inscription
mardi 14 novembre 2006
Statut
Membre
Dernière intervention
7 août 2009
3
Bonjour,

Pour moi c'est très clair tout comme ma réponse : as tu chercher dans les sources?

<hr size="2" width="100%" />
Maelo ou Elo --> Mon blog

Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)
Messages postés
30
Date d'inscription
samedi 13 mars 2004
Statut
Membre
Dernière intervention
2 mai 2012
16
oui, j'ai déjà pas mal fouillé sur le net, je t'avoue ne pas avoir essayé tous les scripts mais je n'en ai pas trouvé répondant à mes attentes.
je continu mes recherches ...
Messages postés
943
Date d'inscription
mardi 14 novembre 2006
Statut
Membre
Dernière intervention
7 août 2009
3
Il faut bien te dire que
<ol><li>Tu ne trouvera pas de code pret-à-l'emploi (il faudra forcement qu'à un moment ou autre tu touche au code)</li><li>On ne te donnera pas de réponse toute faite, au pire on te renverra vers un code qui pourrait t'être utile (si on est dans un jour de bonté ;-) )
</li></ol>Mais bon code source est pleins d'exemple de menu, juste tape menu dans recherche, après faut adapté.

<hr size="2" width="100%" />
Maelo ou Elo --> Mon blog

Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
>> ça risque d'être plus compliqué que d'aller voire directement sur le site
pour toi ! tu crois savoir ce que tu veux !  mais sûrement pas pour nous

aller... soyons sympa, car ça doit exister !   comme uniquement du html/css...

ch'tiot début pour pouvoir faire

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style type="text/css">
        div             {   display:block;
                            cursor:pointer;
                        }
        div:hover > div
                        {   color:red;
                            display:block;
                        }
        div div         {    display:none;    }
        a               {    display:block;    }
    </style>
</head>

   

        menu 1
       

            [# 1.1]
            [# 1.2]
       

   

   

        menu 2
       

            [# 2.1]
            [# 2.2]
            [# 2.3]
       

</html>

à toi d'affiner, d'améliorer, de changer....
on peut remplacer les div par autre chose,
le span n'est là que pour positionner cet accordéon , on peut sucrer

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
296
Date d'inscription
mardi 22 avril 2008
Statut
Membre
Dernière intervention
18 août 2008

Grace a ta premiere reponse je viens de remarquer le fait aue le menu etait en accordéon Bultez  xD

~~
Les trois lois de Codes-Sources :
Loi 1) Tu lis et respectes le reglement
Loi 2) Tu penses à valider si une reponse apportée à ton problème t'a aidé
Loi 3) Si tu ne respectes pas les 2 premières ....TU SORS !!
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
perso je préfère nettement la clarinette ( quoique... mon foie, le pipeau... )
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
943
Date d'inscription
mardi 14 novembre 2006
Statut
Membre
Dernière intervention
7 août 2009
3
@Bul : Quel humour

@Liverion : ah quand même

<hr size="2" width="100%" />
Maelo ou Elo --> Mon blog

Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)
Messages postés
296
Date d'inscription
mardi 22 avril 2008
Statut
Membre
Dernière intervention
18 août 2008

Sinon pour le probleme posé, en fait faudrait qu'il remplace le clic sur le + dans le menu de codes sources par une sorte d'evenement sur le passage de la souris (si j'ai bien compris ce qui est desiré ^^ ). Ca existe les evenements en javascript ?  :P

~~
Les trois lois de Codes-Sources :
Loi 1) Tu lis et respectes le reglement
Loi 2) Tu penses à valider si une reponse apportée à ton problème t'a aidé
Loi 3) Si tu ne respectes pas les 2 premières ....TU SORS !!
Messages postés
943
Date d'inscription
mardi 14 novembre 2006
Statut
Membre
Dernière intervention
7 août 2009
3
Oui ça existe les événements en javascript (heureusement ^^)

<hr size="2" width="100%" />
Maelo ou Elo --> Mon blog

Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
heureusement oui.
mais ça, en général, un simple élément:hover en css et tout baigne.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]

généralement, c'est totalement ididot de généraliser.
Messages postés
296
Date d'inscription
mardi 22 avril 2008
Statut
Membre
Dernière intervention
18 août 2008

Ben alors c'est pas trop dur de faire son accordéon dynamique, si ?

~~
Les trois lois de Codes-Sources :
Loi 1) Tu lis et respectes le reglement
Loi 2) Tu penses à valider si une reponse apportée à ton problème t'a aidé
Loi 3) Si tu ne respectes pas les 2 premières ....TU SORS !!
Messages postés
943
Date d'inscription
mardi 14 novembre 2006
Statut
Membre
Dernière intervention
7 août 2009
3
>> et tout baigne.
Sauf sous IE6 et moins

<hr size="2" width="100%" />
Maelo ou Elo --> Mon blog

Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)
Messages postés
943
Date d'inscription
mardi 14 novembre 2006
Statut
Membre
Dernière intervention
7 août 2009
3
>>Ben alors c'est pas trop dur de faire son accordéon dynamique, si ?
Ben ça dépend si il veut que son menu s'affiche par "à-coup" c'est plus difficile mais autrement c'est super simple à faire.

<hr size="2" width="100%" />
Maelo ou Elo --> Mon blog

Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)
Messages postés
296
Date d'inscription
mardi 22 avril 2008
Statut
Membre
Dernière intervention
18 août 2008

>> "c'est à dire que lorsqu'on passe au dessus d'une case du menu, il s'agrandisse et que les autres rétrécissent"
Donc quand il passe la souris sur un item de son menu, ca developpe le sous menu, enfin c'est comme ca que je me le represente.

~~
Les trois lois de Codes-Sources :
Loi 1) Tu lis et respectes le reglement
Loi 2) Tu penses à valider si une reponse apportée à ton problème t'a aidé
Loi 3) Si tu ne respectes pas les 2 premières ....TU SORS !!
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
>>>> et tout baigne.
>>Sauf sous IE6 et moins
certes, probablement... et avec Lynx ou netscape 4 ça donne quoi ?    :o)
il serait temps pour les IE6 de passer à IE7, on va bientôt (?)  avoir IE8 !
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
@liverion :
>>Ben alors c'est pas trop dur de faire son accordéon dynamique, si ?
mon ch'tiot exemple fonctionne ! ( reste à amélioerer la présentation , doux euphémisme )
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]