Menu - Submenu mit eigener ID und class

**Climber** · 02.04.2011, 15:51

Hallo Zusammen,
ich steht im Moment ein wenig auf dem Schlauch...wie kann ich folgendes Menu in Typo3 realisieren:

HTML-Code:

<ul class="menu" id="menu">
                    <li class="bg1" style="background-position:0 0;">
                        <a id="bg1" href="#">Our Passion</a>
                        <ul class="sub1" style="background-position:0 0;">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                        </ul>
                    </li>
                    <li class="bg1" style="background-position:-266px 0px;">
                        <a id="bg2" href="#">Our Brands</a>
                        <ul class="sub2" style="background-position:-266px 0;">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                        </ul>
                    </li>
                    <li class="last bg1" style="background-position:-532px 0px;">
                        <a id="bg3" href="#">Contact</a>
                        <ul class="sub3" style="background-position:-266px 0;">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                        </ul>
                    </li>
                </ul>

Mein Ansatz geht in diese Richtung:
temp.navigation.main = HMENU
temp.navigation.main{
special = directory
special.value = 2
wrap = <div id="menuWrapper" class="menuWrapper bg1"><ul class="menu" id="menu">|</ul></div>
1 = TMENU
1{
noBlur = 1
expAll = 1
NO = 1
NO {
wrapItemAndSub = <li class="bg1" style="background-position:0 0;">|</li>|*|<li class="bg1" style="background-position:-266px 0px;">|</li>|*|<li class="last bg1" style="background-position:-532px 0px;">|</li>
ATagTitle.field = description // subtitle // title
ATagParams = id="{field:subtitle}"
ATagParams.insertData = 1
}
}
2 < .1
2{
expAll = 0
NO = 2
NO {
allWrap = <ul class="sub1" style="background-position:0 0;">|</ul>|*|<ul class="sub2" style="background-position:-266px 0;">|</ul>|*|<ul class="sub3" style="background-position:-266px 0;">|</ul>

#allWrap = <li>|</li>
ATagTitle.field = description // subtitle // title
ATagParams = id="sub"
ATagParams.insertData = 1
}
}

}

Kann mir vielleicht jemand kurz weiterhelfen?

Vielen Dank

**donkalle** · 04.04.2011, 10:40

Hallo Climber,
beiliegendes Typoscript solltest Du schnell auf Deine Bedürfnisse anpassen können - wenn keine zwingenden Gründe dagegen sprechen, sind die style-Angaben m.E. besser in der CSS-Datei aufgehoben.
Grüße aus Potsdam.
DonKalle

1 = TMENU
1 {
noBlur = 1
expAll = 1
wrap = <ul class="toplevel">|</ul>
NO = 1
NO {
ATagTitle.field = description // title
wrapItemAndSub = <li>|</li>
ATagParams = tabindex="1" class="toplevel"
}
CUR = 1
CUR {
wrapItemAndSub = <li class="current">|</li>
doNotLinkIt = 1
ATagBeforeWrap = 1
linkWrap = <span>|</span>
}
ACT = 1
ACT {
ATagTitle.field = description // title
wrapItemAndSub = <li class="pfad">|</li>
ATagParams = tabindex="1" class="toplevel pfad"
}
}

2 = TMENU
2 {
noBlur = 1
wrap = <ul class="sublevel1">|</ul>
NO = 1
NO {
ATagTitle.field = description // title
wrapItemAndSub = <li>|</li>
ATagParams = tabindex="1" class="sublevel1"
}
CUR = 1
CUR {
wrapItemAndSub = <li class="current">|</li>
doNotLinkIt = 1
ATagBeforeWrap = 1
linkWrap = <span>|</span>
}
ACT = 1
ACT {
ATagTitle.field = description // title
wrapItemAndSub = <li class="pfad">|</li>
ATagParams = tabindex="1" class="sublevel1 pfad"
}
}

3 = TMENU
3 {
noBlur = 1
wrap = <ul class="sublevel2">|</ul>
NO = 1
NO {
wrapItemAndSub = <li>|</li>
ATagParams = tabindex="1" class="sublevel2"
}
CUR = 1
CUR {
wrapItemAndSub = <li class="current">|</li>
doNotLinkIt = 1
ATagBeforeWrap = 1
linkWrap = <span>|</span>
}
ACT = 1
ACT {
ATagTitle.field = description // title
wrapItemAndSub = <li class="pfad">|</li>
ATagParams = tabindex="1" class="sublevel2 pfad"
}
}

4 = TMENU
4 {
noBlur = 1
wrap = <ul class="sublevel3">|</ul>
NO = 1
NO {
wrapItemAndSub = <li>|</li>
ATagParams = tabindex="1" class="sublevel3"
}
CUR = 1
CUR {
wrapItemAndSub = <li class="current">|</li>
doNotLinkIt = 1
ATagBeforeWrap = 1
linkWrap = <span>|</span>
}
ACT = 1
ACT {
ATagTitle.field = description // title
wrapItemAndSub = <li class="pfad">|</li>
ATagParams = tabindex="1" class="sublevel3 pfad"
}
}

**Patrizius76** · 08.02.2012, 12:05

Hi,

steh vor dem gleichen Problem: Das entscheidende ist ja die <ul class> Konstruktion im Submenu; Deinen Ansatz habe ich auch in ähnlicher Variante auch probiert, klapp nicht

Meinen Ansatz und Lösungsvorschläge - die leider alle nicht so recht passen - findet Ihr auch hier:

http://www.typo3forum.net/forum/gmen...ifikation.html (Sliding Background Image Menu - Modifikation)

Jemand eine Idee?

Gruß

Patrizius

**Havenot** · 09.02.2012, 21:41

Hey ihr beiden,

es sollte mit Optionsplit funktionieren. Müsst ihr mal danach googlen ;)

Andere Variante wäre über "{field:uid}" könnte man immer die entsprechende Seiten uid auslesen.

lg
Felix

**Patrizius76** · 10.02.2012, 06:32

Hi Felix,

optionsplit funktioniert nicht, auf der 2 Menüebene hab ich ja nur eine <ul> (Musste ich mir auch erstmal klarmachen). Sprich:

stdWrap.wrap = <ul class="sub1">|</ul>||<ul class="sub2">|</ul>||<ul class="sub3">|</ul>

oder ähnlich haut nicht hin

Deine zweite Veriante klingt erfolgsversprechnder, aber mir fehlt der Ansatz - kannst du mir ein bisschen auf die Sprünge helfen?

Danke, Gruß

Patrizius

**Havenot** · 10.02.2012, 18:43

Hi Patrizius76,

Mit {field:uid} kommst du doch nicht weit, da habe ich dir falsche Hoffnungen gemacht, die uids bekommst du nicht ins ul, sondern nur zu den li. Ich habe unten im Footer den Link zu meinem Blog, da hab ich das gebastelt.

Aber wie das mit dem Ul klappen könnte, fällt mir auf anhieb auch nicht ein. Ich glaube das Problem ist, das er an der stelle alle Inhalte nur einmal wrappt.

lg Felix

**Havenot** · 10.02.2012, 19:02

Hi,

ich habe ne Idee, es sollte eigentlich gehen, wenn du dein Javascript etwas anpasst, wenn das überhaupt nötig ist, der Aufbau von der Demoseite ist doch komplett ohne Klasen...

lg Felix

**Patrizius76** · 13.02.2012, 06:25

Servus Felix,

Das JS anzupassen wäre sicher eine Idee, wobei ich nicht weiss wie man das anstellen sollte. Wenn Du eine Idee hast bin ich echt gespannt.

Dies ist ja die HTML Struktur:

HTML-Code:

<div id="menuWrapper" class="menuWrapper bg1">
    <ul class="menu" id="menu">
        <li class="bg1" style="background-position:0 0;">
            <a id="bg1" href="#">Our Passion</a>
            <ul class="sub1" style="background-position:0 0;">
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
            </ul>
        </li>
        <li class="bg1" style="background-position:-266px 0px;">
            <a id="bg2" href="#">Our Brands</a>
            <ul class="sub2" style="background-position:-266px 0;">
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
            </ul>
        </li>
        <li class="last bg1" style="background-position:-532px 0px;">
            <a id="bg3" href="#">Contact</a>
            <ul class="sub3" style="background-position:-266px 0;">
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
            </ul>
        </li>
    </ul>
</div>

Im JS findet sich ja z.B. diese Anweisung, die die Klasse wohl bestimmt:

Code:

$('#menu .sub'+parseInt(current+1))

Code:

$(function() {
    /* position of the <li> that is currently shown */
    var current = 0;
 
    $('#bg1,#bg2,#bg3').mouseover(function(e){
 
        var $this = $(this);
        /* if we hover the current one, then don't do anything */
        if($this.parent().index() == current)
            return;
 
        /* item is bg1 or bg2 or bg3, depending where we are hovering */
        var item = e.target.id;
 
        /*
        this is the sub menu overlay. Let's hide the current one
        if we hover the first <li> or if we come from the last one,
        then the overlay should move left -> right,
        otherwise right->left
         */
        if(item == 'bg1' || current == 2)
            $('#menu .sub'+parseInt(current+1))
                .stop()
                .animate({backgroundPosition:"(-266px 0)"},300,function(){
                    $(this).find('li').hide();
                });
        else
            $('#menu .sub'+parseInt(current+1))
                .stop()
                .animate({backgroundPosition:"(266px 0)"},300,function(){
                    $(this).find('li').hide();
                });
 
        if(item == 'bg1' || current == 2){
            /*
            if we hover the first <li> or if we come from
            the last one, then the images should move left -> right
            */
            $('#menu > li')
                .animate({backgroundPosition:"(-800px 0)"},0)
                .removeClass('bg1 bg2 bg3')
                .addClass(item);
            move(1,item);
        }
        else{
            /*
            if we hover the first <li> or if we come
            from the last one, then the images should move
            right -> left
            */
            $('#menu > li')
                .animate({backgroundPosition:"(800px 0)"},0)
                .removeClass('bg1 bg2 bg3')
                .addClass(item);
            move(0,item);
        }
 
        /*
        We want that if we go from the first one to the last one
        (without hovering the middle one), or from the last one
        to the first one, the middle menu's overlay should also
        slide, either from left to right or right to left.
         */
        if(current == 2 && item == 'bg1'){
            $('#menu .sub'+parseInt(current))
            .stop()
            .animate({backgroundPosition:"(-266px 0)"},300);
        }
        if(current == 0 && item == 'bg3'){
            $('#menu .sub'+parseInt(current+2))
            .stop()
            .animate({backgroundPosition:"(266px 0)"},300);
        }
 
        /* change the current element */
        current = $this.parent().index();
 
        /* let's make the overlay of the current one appear */
 
        $('#menu .sub'+parseInt(current+1))
            .stop().animate({backgroundPosition:"(0 0)"},300,function(){
                $(this).find('li').fadeIn();
            });
    });
    /*
    dir:1 - move left->right
    dir:0 - move right->left
     */
    function move(dir,item){
        if(dir){
            $('#bg1').parent()
                     .stop()
                     .animate({backgroundPosition:"(0 0)"},200);
            $('#bg2').parent()
                     .stop()
                     .animate({backgroundPosition:"(-266px 0)"},300);
            $('#bg3').parent()
                     .stop()
                     .animate({backgroundPosition:"(-532px 0)"},400,function(){
                        $('#menuWrapper').removeClass('bg1 bg2 bg3')
                                         .addClass(item);
                     });
        }
        else{
            $('#bg1').parent()
                     .stop()
                     .animate({backgroundPosition:"(0 0)"},400,function(){
                        $('#menuWrapper').removeClass('bg1 bg2 bg3')
                                         .addClass(item);
                     });
            $('#bg2').parent()
                     .stop()
                     .animate({backgroundPosition:"(-266px 0)"},300);
            $('#bg3').parent()
                     .stop()
                     .animate({backgroundPosition:"(-532px 0)"},200);
        }
    }
});

Ich weiss nicht ob man das anpassen kann, schließlich verlangt das JS ja nach einer Klasse...Hier nochmal die Seite mit Demo Der Link zuvor in einem Post führt zu einem ähnlichen menü, Aber ich möchte explizit dies in TYPO3 umnsetzen...

Greetz
Patrizius