Menu accordeon vertical [Résolu]

titoine2000 30 Messages postés samedi 13 mars 2004Date d'inscription 2 mai 2012 Dernière intervention - 2 juil. 2008 à 16:30 - Dernière réponse : titoine2000 30 Messages postés samedi 13 mars 2004Date d'inscription 2 mai 2012 Dernière intervention
- 26 oct. 2008 à 00:01
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
Afficher la suite 

33 réponses

Répondre au sujet
titoine2000 30 Messages postés samedi 13 mars 2004Date d'inscription 2 mai 2012 Dernière intervention - 3 juil. 2008 à 15:40
+3
Utile
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.
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de titoine2000
titoine2000 30 Messages postés samedi 13 mars 2004Date d'inscription 2 mai 2012 Dernière intervention - 26 oct. 2008 à 00:01
+3
Utile
Finalement voila exactement ce que je cherchais...
http://www.scriptocean.com/accordion.html

Merci à tous pour votre aide
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de titoine2000
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 2 juil. 2008 à 16:48
0
Utile
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]
Commenter la réponse de cs_bultez
titoine2000 30 Messages postés samedi 13 mars 2004Date d'inscription 2 mai 2012 Dernière intervention - 2 juil. 2008 à 17:00
0
Utile
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
Commenter la réponse de titoine2000
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 2 juil. 2008 à 17:05
0
Utile
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)
Commenter la réponse de maelob
titoine2000 30 Messages postés samedi 13 mars 2004Date d'inscription 2 mai 2012 Dernière intervention - 2 juil. 2008 à 17:18
0
Utile
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 ...
Commenter la réponse de titoine2000
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 2 juil. 2008 à 17:27
0
Utile
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)
Commenter la réponse de maelob
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 2 juil. 2008 à 18:41
0
Utile
>> ç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]
Commenter la réponse de cs_bultez
Liverion 296 Messages postés mardi 22 avril 2008Date d'inscription 18 août 2008 Dernière intervention - 3 juil. 2008 à 10:33
0
Utile
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 !!
Commenter la réponse de Liverion
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 3 juil. 2008 à 10:51
0
Utile
perso je préfère nettement la clarinette ( quoique... mon foie, le pipeau... )
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Commenter la réponse de cs_bultez
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 3 juil. 2008 à 10:54
0
Utile
@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)
Commenter la réponse de maelob
Liverion 296 Messages postés mardi 22 avril 2008Date d'inscription 18 août 2008 Dernière intervention - 3 juil. 2008 à 10:54
0
Utile
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 !!
Commenter la réponse de Liverion
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 3 juil. 2008 à 11:10
0
Utile
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)
Commenter la réponse de maelob
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 3 juil. 2008 à 11:19
0
Utile
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.
Commenter la réponse de cs_bultez
Liverion 296 Messages postés mardi 22 avril 2008Date d'inscription 18 août 2008 Dernière intervention - 3 juil. 2008 à 11:22
0
Utile
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 !!
Commenter la réponse de Liverion
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 3 juil. 2008 à 11:22
0
Utile
>> 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)
Commenter la réponse de maelob
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 3 juil. 2008 à 11:24
0
Utile
>>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)
Commenter la réponse de maelob
Liverion 296 Messages postés mardi 22 avril 2008Date d'inscription 18 août 2008 Dernière intervention - 3 juil. 2008 à 11:26
0
Utile
>> "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 !!
Commenter la réponse de Liverion
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 3 juil. 2008 à 11:34
0
Utile
>>>> 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]
Commenter la réponse de cs_bultez
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 3 juil. 2008 à 11:47
0
Utile
@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]
Commenter la réponse de cs_bultez

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

menu accordeon vertical - page 2