modification menu accordéon

vlotho Membre non connecté

Booster Bazooka

Le 30/09/2010 à 19h00

Code CSS :

/* ##### Menu accordéon ##### */
div#test-accordion {
    margin:-8px; /* <== A débloquer si vous passez par l'administration/Contenu/Menu/Ajout menu de contenu */ 
    width:220px; /* A modifier celon la largeur de vos menus dans les colonnes droite ou gauche */
}
 
div.accordion {
    position: relative; 
    width:200px; /* A modifier celon la largeur de vos menus dans les colonnes droite ou gauche */
}
 
div.accordion-toggle {
/*    background:#CCCCCC url(images/accordeon_off.jpg) repeat-x scroll center bottom;
    border-top:1px solid #CCCCCC;*/
    text-align:left;
    color:#000000;
    cursor:pointer;
    margin-bottom:1px;
    padding:9px 14px 6px;
    position:relative;
    z-index:10;
}
 
div.accordion-toggle:hover {
/*    background-image:url(images/accordeon_over.jpg);
    background-color:#CCCCCC;
    border-top:1px solid #CCCCCC;
    border-bottom:1px solid #CCCCCC;*/
}
 
div.accordion-toggle-active {
    background-image:url("images/images_active.png");
    color:#FFFFFF;
    height:18px;
    width:192px;
    margin-left:8px;
    margin-top:10px;
}
 
div.accordion-content {
    background:#2D6800 url("images/bgsoucat.png") repeat-x;
    padding:5px 3px 6px;
    overflow:hidden;
    width:96%;
    margin-left:8px;
    margin-top:3px;
    border:1px solid #CCCCCC;
}
 
div#cat {
    margin-top:0px;
}
 
ul.menu_vertical_0 li a,ul.menu_vertical_0 li span {
    color: #8fe716;
}

Le code html est un menu de contenu dans l'interface admin

Code HTML :

<div class=cat>
        <div id="test-accordion" class="accordion">
        <div class="accordion-toggle">> Services pour professionnels</div>
        <div class="accordion-content">
            <p>
                <ul class="menu_vertical_0 menu_vertical"> 
                    <li> <a title="Assemblage" href="/admin/articles/articles.php"><img alt="" class="valign_middle" src="/admin/articles/articles_mini.png"/></a> 
                    <a title="Assemblage" href="/admin/articles/articles.php">- Assemblage</a> </li> 
                    <li> <a title="Réseau" href="/admin/calendar/calendar.php"><img alt="" class="valign_middle" src="/admin/calendar/calendar_mini.png"/></a> 
                    <a title="Réseau" href="/admin/calendar/calendar.php">- Réseau</a> </li> 
                    <li> <a title="Serveur" href="/admin/contact/contact.php"><img alt="" class="valign_middle" src="/admin/contact/contact_mini.png"/></a> 
                    <a title="Serveur" href="/admin/contact/contact.php">- Serveur</a> </li> 
                    <li> <a title="Sauvegarde" href="/admin/faq/faq.php"><img alt="" class="valign_middle" src="/admin/faq/faq_mini.png"/></a> 
                    <a title="Sauvegarde" href="/admin/faq/faq.php">- Sauvegarde</a> </li> 
                    <li> <a title="Logiciel" href="/admin/forum/index.php"><img alt="" class="valign_middle" src="/admin/forum/forum_mini.png"/></a> 
                    <a title="Logiciel" href="/admin/forum/index.php">- Logiciel</a> </li> 
                </ul>
            </p>
        </div>
 
        <div class="accordion-toggle">> Maintenance Informatique</div>
        <div class="accordion-content">
            <p>
                <ul class="menu_vertical_0 menu_vertical"> 
                    <li> <a title="Réseau" href="/admin/articles/articles.php"><img alt="" class="valign_middle" src="/admin/articles/articles_mini.png"/></a> 
                    <a title="Réseau" href="/admin/articles/articles.php">- Réseau</a> </li> 
                    <li> <a title="Serveur" href="/admin/calendar/calendar.php"><img alt="" class="valign_middle" src="/admin/calendar/calendar_mini.png"/></a> 
                    <a title="Serveur" href="/admin/calendar/calendar.php">- Serveur</a> </li> 
                    <li> <a title="Sauvegarde" href="/admin/contact/contact.php"><img alt="" class="valign_middle" src="/admin/contact/contact_mini.png"/></a> 
                    <a title="Sauvegarde" href="/admin/contact/contact.php">- Sauvegarde</a> </li> 
                </ul> 
            </p>
        </div>
 
        <div class="accordion-toggle">> Services pour particuliers</div>
        <div class="accordion-content">
            <p>
                <ul class="menu_vertical_0 menu_vertical"> 
                    <li> <a title="Installation de logiciels" href="/admin/articles/articles.php"><img alt="" class="valign_middle" src="/admin/articles/articles_mini.png"/></a> 
                    <a title="Installation de logiciels" href="/admin/articles/articles.php">- Installation de logiciels</a> </li> 
                    <li> <a title="Montage / Assemblage" href="/admin/calendar/calendar.php"><img alt="" class="valign_middle" src="/admin/calendar/calendar_mini.png"/></a> 
                    <a title="Montage / Assemblage" href="/admin/calendar/calendar.php">- Montage / Assemblage</a> </li> 
                    <li> <a title="Installation de materiel" href="/admin/contact/contact.php"><img alt="" class="valign_middle" src="/admin/contact/contact_mini.png"/></a> 
                    <a title="Installation de materiel" href="/admin/contact/contact.php">- Installation de materiel</a> </li> 
                    <li> <a title="Nos prèstations" href="/admin/faq/faq.php"><img alt="" class="valign_middle" src="/admin/faq/faq_mini.png"/></a> 
                    <a title="Nos prèstations" href="/admin/faq/faq.php">- Nos prèstations</a> </li> 
                </ul>
            </p>
        </div>
 
        <div class="accordion-toggle">> Dépannage informatique</div>
        <div class="accordion-toggle">> Nos configurations</div>
        <div class="accordion-content">
            <p>
                <ul class="menu_vertical_0 menu_vertical"> 
                    <li> <a title="Configuration bureautique" href="/admin/articles/articles.php"><img alt="" class="valign_middle" src="/admin/articles/articles_mini.png"/></a> 
                    <a title="Configuration bureautique" href="/admin/articles/articles.php">- Configuration bureautique</a> </li> 
                    <li> <a title="Configuration jeux" href="/admin/calendar/calendar.php"><img alt="" class="valign_middle" src="/admin/calendar/calendar_mini.png"/></a> 
                    <a title="Configuration jeux" href="/admin/calendar/calendar.php">- Configuration jeux</a> </li> 
                    <li> <a title="Configuration téléchargement" href="/admin/contact/contact.php"><img alt="" class="valign_middle" src="/admin/contact/contact_mini.png"/></a> 
                    <a title="Configuration téléchargement" href="/admin/contact/contact.php">- Configuration téléchargement</a> </li> 
                </ul>
            </p>
        </div>
        <div class="accordion-toggle">> Lexique</div>
        <div class="accordion-toggle">> Nos partenaires</div>
        <div class="accordion-toggle">> Livre d'or</div> 
        </div></div>
                <div id="news">
                <div class="text_news"> Ici ton texte de plus tard </div>
                <div class="more_news">En savoir plus</div>
                </div>

vlotho Membre non connecté

Booster Bazooka

Le 30/09/2010 à 19h22

#93802

Code JAVASCRIPT :

/* Simple Accordion Script 
 * Requires Prototype and Script.aculo.us Libraries
 * By: Brian Crescimanno <brian.crescimanno@gmail.com>
 * http://briancrescimanno.com
 * This work is licensed under the Creative Commons Attribution-Share Alike 3.0
 * http://creativecommons.org/licenses/by-sa/3.0/us/
 */
 
if (typeof Effect == 'undefined')
  throw("You must have the script.aculo.us library to use this accordion");
 
var Accordion = Class.create({
 
    initialize: function(id, defaultExpandedCount) {
        if(!$(id)) throw("Attempted to initalize accordion with id: "+ id + " which was not found.");
        this.accordion = $(id);
        this.options = {
            toggleClass: "accordion-toggle",
            toggleActive: "accordion-toggle-active",
            contentClass: "accordion-content"
        }
        this.contents = this.accordion.select('div.'+this.options.contentClass);
        this.isAnimating = false;
        this.maxHeight = 0;
        this.current = defaultExpandedCount ? this.contents[defaultExpandedCount-1] : this.contents[0];
        this.toExpand = null;
 
        this.checkMaxHeight();
        this.initialHide();
        this.attachInitialMaxHeight();
 
        var clickHandler =  this.clickHandler.bindAsEventListener(this);
        this.accordion.observe('click', clickHandler);
    },
 
    expand: function(el) {
        this.toExpand = el.next('div.'+this.options.contentClass);
        if(this.current != this.toExpand){
this.toExpand.show();
            this.animate();
        }
    },
 
    checkMaxHeight: function() {
        for(var i=0; i<this.contents.length; i++) {
            if(this.contents[i].getHeight() > this.maxHeight) {
                this.maxHeight = this.contents[i].getHeight();
            }
        }
    },
 
    attachInitialMaxHeight: function() {
this.current.previous('div.'+this.options.toggleClass).addClassName(this.options.toggleActive);
        if(this.current.getHeight() != this.maxHeight) this.current.setStyle({height: this.maxHeight+"px"});
    },
 
    clickHandler: function(e) {
        var el = e.element();
        if(el.hasClassName(this.options.toggleClass) && !this.isAnimating) {
            this.expand(el);
        }
    },
 
    initialHide: function(){
        for(var i=0; i<this.contents.length; i++){
            if(this.contents[i] != this.current) {
                this.contents[i].hide();
                this.contents[i].setStyle({height: 0});
            }
        }
    },
 
    animate: function() {
        var effects = new Array();
        var options = {
            sync: true,
            scaleFrom: 0,
            scaleContent: false,
            transition: Effect.Transitions.sinoidal,
            scaleMode: {
                originalHeight: this.maxHeight,
                originalWidth: this.accordion.getWidth()
            },
            scaleX: false,
            scaleY: true
        };
 
        effects.push(new Effect.Scale(this.toExpand, 100, options));
 
        options = {
            sync: true,
            scaleContent: false,
            transition: Effect.Transitions.sinoidal,
            scaleX: false,
            scaleY: true
        };
 
        effects.push(new Effect.Scale(this.current, 0, options));
 
        var myDuration = 0.75;
 
        new Effect.Parallel(effects, {
            duration: myDuration,
            fps: 35,
            queue: {
                position: 'end',
                scope: 'accordion'
            },
            beforeStart: function() {
                this.isAnimating = true;
                this.current.previous('div.'+this.options.toggleClass).removeClassName(this.options.toggleActive);
                this.toExpand.previous('div.'+this.options.toggleClass).addClassName(this.options.toggleActive);
            }.bind(this),
            afterFinish: function() {
                this.current.hide();
                this.toExpand.setStyle({ height: this.maxHeight+"px" });
                this.current = this.toExpand;
                this.isAnimating = false;
            }.bind(this)
        });
    }
 
});
 
document.observe("dom:loaded", function(){
    accordion = new Accordion("test-accordion", 1);
})

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie

vlotho Membre non connecté

Visiteur

vlotho Membre non connecté

Visiteur

vlotho Membre non connecté

vlotho Membre non connecté

Visiteur

ReidLos Membre non connecté

vlotho Membre non connecté

Visiteur

ReidLos Membre non connecté

vlotho Membre non connecté

ReidLos Membre non connecté

vlotho Membre non connecté

Shadow Membre non connecté