Contao Konferenz 2019 in Duisburg - Call for Papers
Ergebnis 1 bis 2 von 2

Thema: Imagemenu mit Artikel innen drin

  1. #1
    Contao-Nutzer
    Registriert seit
    06.01.2012.
    Beiträge
    19

    Standard Imagemenu mit Artikel innen drin

    Hallo Community,

    ich möchte in meinem neuen Projekt die Imagemenu-Erweiterung als Hauptelement nutzen. Allerdings stellen die Menubild-Segmente im geschlossenen Zustand ein ganzes Bild dar.
    Mein Vorhaben ist, wenn man ein Menupunkt gewählt hat, öffnet dieser den Platz für die Inhaltelemente. Also Inhalte sollen nicht unter- oder oberhalb des Menus, sondern inmitten der Menugrafiken.

    Artikel habe ich schon mit position:absolut; an der richtigen stelle. Blos liegt das Menu dann oberhalb und lässt die Inhalte nicht interaktiv bedienen. Mit z-index liegen jetzt die Artikel zwar oberhalb, aber dann slidet das menu hinter den Artikel, was nicht Sinn der Sache war.

    Ich glaube man müsste irgendwo in ImageMenu.js.php den platz zwischen den einzelnen Bildern für die Artikel schaffen, bloss bin ich ein blutiger anfänger in dem Bereich. Vielleicht könnte mir mal jeman helfen.

    Hier ist die "Problemseite"

    hier der Code ImageMenu.js.php
    PHP-Code:
    <?php

    /**
     * Contao Open Source CMS
     * Copyright (C) 2005-2011 Leo Feyer
     *
     * Formerly known as TYPOlight Open Source CMS.
     *
     * This program is free software: you can redistribute it and/or
     * modify it under the terms of the GNU Lesser General Public
     * License as published by the Free Software Foundation, either
     * version 3 of the License, or (at your option) any later version.
     * 
     * This program is distributed in the hope that it will be useful,
     * but WITHOUT ANY WARRANTY; without even the implied warranty of
     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
     * Lesser General Public License for more details.
     * 
     * You should have received a copy of the GNU Lesser General Public
     * License along with this program. If not, please visit the Free
     * Software Foundation website at <http://www.gnu.org/licenses/>.
     *
     * PHP version 5
     * @copyright  Richard Henkenjohann 2011
     * @author     Richard Henkenjohann
     * @package    ImageMenu
     * @license    GNU/LGPL
     * @filesource
     */

      
    header('Content-type: text/javascript');

      
    define('TL_MODE''FE');
      require(
    '../../../initialize.php');

    ?>
    /**************************************************************

        Script    : Image Menu
        Version    : 2.3
        Authors    : Samuel Birch
        Desc    : 
        Licence    : Open Source MIT Licence

    **************************************************************/

    var ImageMenu = new Class({
        
        getOptions: function(){
            return {
                OnOpen: $lambda(false),
                OnClose: $lambda(false),
                openWidth: 200,
                transition: Fx.Transitions.Quad.easeOut,
                duration: 400,
                open: <?php echo intval($_GET['open']); ?>,
                border: 0
            };
        },

        initialize: function(elements, options){
            this.setOptions(this.getOptions(), options);
            
            this.elements = $$(elements);
            
            this.widths = {};
            this.widths.closed = this.elements[0].getStyle('width').toInt();
            this.widths.openSelected = this.options.openWidth;
            this.widths.openOthers = Math.round(((this.widths.closed*this.elements.length) - (this.widths.openSelected+this.options.border)) / (this.elements.length-1))
            
            
            this.fx = new Fx.Elements(this.elements, {wait: false, duration: this.options.duration, transition: this.options.transition});
            
            this.elements.each(function(el,i){
                el.addEvent('click', function(e){
                    new Event(e).stop();
                    this.reset(i);
                    if(this.options.OnOpen){
                        this.options.OnOpen(el, i);
                    }
                    el.addClass('selected');
                }.bind(this));
                
                el.addEvent('click', function(e){
                    new Event(e).stop();
                    this.reset(this.options.open);
                    if(this.options.OnClose){
                        this.options.OnClose(el, i);
                    }
                    el.removeClass('selected');
                }.bind(this));
                
                var obj = this;
                
                el.addEvent('click', function(e){
                
                    if(obj.options.OnClickOpen){
                        new Event(e).stop();
                        if(obj.options.open == i){
                            obj.options.open = null;
                            obj.options.OnClickClose(this.href, i);
                        }else{
                            obj.options.open = i;
                            obj.options.OnClickOpen(this.href, i);
                        }
                        
                    }
                    
                })
                
            }.bind(this));
            
            if(this.options.open != null){
                if($type(this.options.open) == 'number'){
                    this.reset(this.options.open);
                    
                }else{
                    this.elements.each(function(el,i){
                        if(el.id == this.options.open){
                            this.reset(i);
                        }
                    },this);
                }
            }
            
        },
        
        reset: function(num){
        
            if($type(num) == 'number'){
                var width = this.widths.openOthers;
                if(num+1 == this.elements.length){
                    width += this.options.border;
                }
            }else{
                var width = this.widths.closed;
            }
            
            var obj = {};
            this.elements.each(function(el,i){
                var w = width;
                if(i == this.elements.length-1){
                    w = width+5
                }
                obj[i] = {'width': w};
            }.bind(this));
            
            if($type(num) == 'number'){
                obj[num] = {'width': this.widths.openSelected};
            }
                    
            this.fx.start(obj);
        }
        
    });

    ImageMenu.implement(new Options);
    ImageMenu.implement(new Events);


    /*************************************************************/
    Und noch weiss ich nicht, wie ich beim eintritt der Seite alle Menugrafiken geschlossen halten kann? ( damit zuerst die vollständige Grafik zu sehen ist)
    Bedanke mich im Voraus für die Hilfe!

  2. #2
    Contao-Nutzer
    Registriert seit
    13.03.2012.
    Beiträge
    8

    Standard

    Hallo

    Ich bin auch auf der Suche nach der Lösung.

    Hast du es hinbekommen?
    wenn ja , kannst du bitte sagen, wie du das Problem gelöst hast?

    Grüße

    Emre

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •