Hallo Zusammen,
hier mal ein Ansatz zum Thema GMenu das dem von Appel ähnelt, das ding Fuktioniert auch und da man ja auch geben soll hinterlasse ich hier mal wie es geht.
Das Ganze basiert auf der Kombination von von Typoscript und der jquery Lib.
Um Das Menu zu erzeugen wird jeder Seite ein Bildhinterlegt (edit page Properties / Resources) das zur Navigation dient, ggf. weiter für den Mouseover.
Zuerst ladet euch bitte die zwei .js Datein in den Fileadmin Ordner bzw. das Unterverzeichnis in diesem Fall fileadmin/slider_demo_source/.
die originale gibt es hier http://jquery.com/ bzw. hier von jquery tutorial http://jqueryfordesigners.com/slider-gallery/
Auch auf meinem Testserver gibt die daten aber ladet Sie bitte noch den oben angegebenen Quellen.
folgende js werden benötigt http://www.fashionized.com/cm2/fileadmin/slider_demo_source/jquery-1.js
und
http://www.fashionized.com/cm2/fileadmin/slider_demo_source/jquery-ui-full-1.js
Fügt eurem Template folgendes hinzu
###################### SLIDER MENU #########################
# Unteres Menu erstellen:
MENU_SLIDE = HMENU
MENU_SLIDE {
#dein entry Level
entryLevel = 3
1 = GMENU
1.noBlur = 1
#der wraper der dann via CSS den richtigen Look erzeugt
1.wrap = <ul>|</ul>
1.NO = 1
1.NO {
wrap = <li> | </li>
imgParams = border="0" class="slider_bilder"
altImgResource.import = uploads/media/
altImgResource.import.field = media
# 0 steht für das 1. Bild in den Seiteneigenschaften
altImgResource.import.listNum = 0
}
1.ACT < .1.NO
1.ACT {
# 1 steht für das 2. Bild in den Seiteneigenschaften (für den RO-Effekt)
altImgResource.import.listNum = 0
}
1.RO < .1.ACT
}
###################### SLIDER MENU ENDE #########################
Folgendes CSS solltet müsst ihr hinzufügen
<style type="text/css" media="screen">
<!--
#container {
background-color: #fff;
width: 580px;
margin: 0px ;
padding: 0px;
}
/* slider specific CSS */
.sliderGallery {
/*background: url(images/productbrowser_background_20070622.jpg) no-repeat;*/
overflow: hidden;
position: relative;
padding-left: 7px;
height: 145px;
width: 1004px;
}
.sliderGallery UL {
position: absolute;
list-style: none;
overflow: none;
white-space: nowrap;
padding: 0;
margin: 0;
}
.sliderGallery UL LI {
display: inline;
}
.slider {
width: 542px;
height: 17px;
margin-top: 125px;
margin-left: 231px;
padding: 1px;
position: relative;
background: url(fileadmin/slider_demo_source/images/productbrowser_scrollbar_20070622.png) no-repeat;
}
.handle {
position: absolute;
cursor: move;
height: 17px;
width: 181px;
top: 0;
background: url(fileadmin/slider_demo_source/images/productbrowser_scroller_20080115.png) no-repeat;
z-index: 100;
}
.slider span {
color: #bbb;
font-size: 80%;
cursor: pointer;
position: absolute;
z-index: 110;
top: 3px;
}
.slider .slider-lbl1 {
left: 50px;
}
.slider .slider-lbl2 {
left: 107px;
}
.slider .slider-lbl3 {
left: 156px;
}
.slider .slider-lbl4 {
left: 280px;
}
.slider .slider-lbl5 {
left: 455px;
}
li a img { border:0px; }
-->
</style>
so wie js im Template
<script src="fileadmin/slider_demo_source/jquery-1.js" type="text/javascript" charset="utf-8"></script>
<script src="fileadmin/slider_demo_source/jquery-ui-full-1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var container = $('div.sliderGallery');
var ul = $('ul', container);
var itemsWidth = ul.innerWidth() - container.outerWidth();
$('.slider', container).slider({
min: 0,
max: itemsWidth,
handle: '.handle',
stop: function (event, ui) {
ul.animate({'left' : ui.value * -1}, 500);
},
slide: function (event, ui) {
ul.css('left', ui.value * -1);
}
});
};
</script>
so wie
zur ausgabe im Template
<div id="container">
<div class="sliderGallery">###MENU_SLIDE###
<div class="slider">
<div class="handle">
</div>
</div>
</div>
</div>
thats it
lg bl
hier noch ein link zur laufenden navigation