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!
