Rollover Hauptmenü mit Grafiken

Archive Shopware 3.5
#1

Hallo zusammmen, wollte mir gerne ein Hauptmenü mit Rollover Effekt einrichten. Die passenden Grafiken mit entsprechender Größe hab ich schon im passenden Ordner abgelegt.In meiner css hab ich folgendes eingebaut(Auszug). #mainNavigation ul li a#Schuhe { background:url("../images/buttons/nav09.png") no-repeat scroll 0 0 transparent; height:44px; padding:0; text-indent:-999em; width:78px; } #mainNavigation ul li a#Schuhe.active { background:url("../images/buttons/nav09.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:78px; } #mainNavigation ul li a#Schuhe:hover { background:url("../images/buttons/nav09.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:78px; } Leider tut sich noch gar nichts.Ich glaub es liegt an der categories_top.tpl. Die sieht ja folgendermaßen aus: [code]

  • [{se name=‚IndexLinkHome‘}Home{/se}]({url controller=‚index‘} „{s name=‚IndexLinkHome‘}{/s}“)
    {foreach from=$sMainCategories item=sCategory} {if !$sCategory.hidetop} - [{$sCategory.description}]({if $sCategory.external}{$sCategory.external}{else}{$sCategory.link|rewrite:$sCategory.description}{/if} „{$sCategory.description}“)
    {/if} {/foreach}
    [/code] Was hab ich nicht beachtet.Kann mir jemand helfen???
#2

Du hast doch im Template-Code gar keine class mit der Bezeichnung „schuhe“ definiert? Somit kann der Browser doch garnicht wissen, welches Element du formatieren willst? Oder übersehe ich irgendetwas?

#3

Genau da hört mein Wissen auf.Ich hab im Backend meine Hauptkategorien angelegt und die dazugehörigen Grafiken sind wie oben beschrieben auch mit den gleichen Namen wie die Kategorie angelegt,z.B. Schuhe Wie genau muss ich das denn in der categories_top definieren? Außerdem sollte der Home Button auf active sein wenn ich die Startseite aufrufe. Lieber Stefan,kannst du mir das mit nem Beispiel erläutern???

#4

Du kannst dafür eines der Kategorie-Freitext-Felder nehmen. z.b. text1 Da gibst du dann den Klassennamen ein, z.B. “schuhe” im Template würdest du dann bei [class=“active {$sCategory.ac_attr1}” schreiben Also statt {if $sCategory.flag} class=“active”{/if} {if $sCategory.flag} class=“active {$sCategory.ac_attr1}” {else} class="{$sCategory.ac_attr1}"{/if} Dann musst du mal mit Firebug kontrollieren, ob er die Styles korrekt übernimmt - diese müssen dann ggf. noch angepasst werden!]({if $sCategory.external}{$sCategory.external}{else}{$sCategory.link|rewrite:$sCategory.description}{/if} “{$sCategory.description}”)

#5

Da tut sich noch gar nichts.Also bei den Freitext Feld hab ich Schuhe eingetragen und die Kategorie Bezeichnung lautet auch Schuhe(erster Buchstabe groß). meine categories_tpl sieht jetzt so aus. [code]

  • [{se name=‘IndexLinkHome’}Home{/se}]({url controller=‘index’} “{s name=‘IndexLinkHome’}{/s}”)
    {foreach from=$sMainCategories item=sCategory} {if !$sCategory.hidetop} - [{$sCategory.description}]({if $sCategory.external}{$sCategory.external}{else}{$sCategory.link|rewrite:$sCategory.description}{/if} “{$sCategory.description}”)
    {/if} {/foreach}
    [/code] in meiner css sieht es so aus /\* MAINCATEGORIES ------------------------ \*/ #navigation { background:none repeat scroll 0 0 transparent; border: 0 none; height:44px; position:static; width:960px; } #navigation ul { margin-left:0; } #navigation ul li { background-color:transparent; border: 0 none; display:block; float:left; height:44px; padding:0 0 0 0; } #navigation ul li.active { background-color:transparent; } #navigation ul li a { background:none repeat scroll 0 0 transparent; color:#000000; display:block; font-size:11px; font-weight:bold; height:44px; padding:0 0 0 0; text-decoration:none; text-transform:uppercase; } #navigation ul li a:hover { color:#000000; } #navigation ul li a.active { background:none repeat scroll 0 0 transparent; color:#000000; } #navigation ul li a#Home { background:url("../images/buttons/nav02.png") no-repeat scroll 0 0 transparent; height:44px; padding:0; text-indent:-999em; width:67px;} #navigation ul li a#Home.active { background:url("../images/buttons/nav02.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:67px; } #navigation ul li a#Home:hover { background:url("../images/buttons/nav02.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:67px; } #navigation ul li a#Neu { background:url("../images/buttons/nav03.png") no-repeat scroll 0 0 transparent; height:44px; padding:0; text-indent:-999em; width:57px; } #navigation ul li a#Neu.active { background:url("../images/buttons/nav03.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:57px; } #navigation ul li a#Neu:hover { background:url("../images/buttons/nav03.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:57px; } #navigation ul li a#Girls { background:url("../images/buttons/nav04.png") no-repeat scroll 0 0 transparent; height:44px; padding:0; text-indent:-999em; width:67px; } #navigation ul li a#Girls.active { background:url("../images/buttons/nav04.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:67px; } #navigation ul li a#Girls:hover { background:url("../images/buttons/nav04.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:67px; } #navigation ul li a#Boys { background:url("../images/buttons/nav05.png") no-repeat scroll 0 0 transparent; height:44px; padding:0; text-indent:-999em; width:64px; } #navigation ul li a#Boys.active { background:url("../images/buttons/nav05.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:64px; } #navigation ul li a#Boys:hover { background:url("../images/buttons/nav05.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:64px; } #navigation ul li a#Merchandise { background:url("../images/buttons/nav06.png") no-repeat scroll 0 0 transparent; height:44px; padding:0; text-indent:-999em; width:111px; } #navigation ul li a#Merchandise.active { background:url("../images/buttons/nav06.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:111px; } #navigation ul li a#Merchandise:hover { background:url("../images/buttons/nav06.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:111px; } #navigation ul li a#Marken { background:url("../images/buttons/nav07.png") no-repeat scroll 0 0 transparent; height:44px; padding:0; text-indent:-999em; width:80px; } #navigation ul li a#Marken.active { background:url("../images/buttons/nav07.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:80px; } #navigation ul li a#Marken:hover { background:url("../images/buttons/nav07.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:80px; } #navigation ul li a#Basics { background:url("../images/buttons/nav08.png") no-repeat scroll 0 0 transparent; height:44px; padding:0; text-indent:-999em; width:75px; } #navigation ul li a#Basics.active { background:url("../images/buttons/nav08.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:75px; } #navigation ul li a#Basics:hover { background:url("../images/buttons/nav08.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:75px; } #navigation ul li a#Schuhe { background:url("../images/buttons/nav09.png") no-repeat scroll 0 0 transparent; height:44px; padding:0; text-indent:-999em; width:78px; } #navigation ul li a#Schuhe.active { background:url("../images/buttons/nav09.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:78px; } #navigation ul li a#Schuhe:hover { background:url("../images/buttons/nav09.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:78px; } #navigation ul li a#Accessoires { background:url("../images/buttons/nav10.png") no-repeat scroll 0 0 transparent; height:44px; padding:0; text-indent:-999em; width:109px; } #navigation ul li a#Accessoires.active { background:url("../images/buttons/nav10.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:109px; } #navigation ul li a#Accessoires:hover { background:url("../images/buttons/nav10.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:109px; }
#6

Da fehlt auf jeden Fall das {else} aus meinem Post! Ansonsten stell auch mal die HTML-Ausgabe der Seite ein (Auszug passende Stelle reicht!)

#7

OK,jetzt sieht meine categories_top so aus [code]

  • [{se name=‘IndexLinkHome’}Home{/se}]({url controller=‘index’} “{s name=‘IndexLinkHome’}{/s}”)
    {foreach from=$sMainCategories item=sCategory} {if !$sCategory.hidetop} - [{$sCategory.description}]({if $sCategory.external}{$sCategory.external}{else}{$sCategory.link|rewrite:$sCategory.description}{/if} “{$sCategory.description}”)
    {/if} {/foreach}
    [/code] html wird so ausgegeben [code]

  • Home

  • Neu

  • Girls

  • Boys
    [/code]

#8

[quote=„Haijo“]Was hab ich nicht beachtet.Kann mir jemand helfen???[/quote] Selektoren wie „#mainNavigation ul li [color=#FF0000]a#Schuhe[/color]“ gibt es nicht… Damit selektiert man einen Link mit ‚id=„Schuhe“‘…

#9

Wie könnte das dann richtig aussehen??? Hab das bei www.mabito.com abgeschaut.Die haben so ein Menü,bloß das ich das Ausklappen nicht brauch.Die haben das in Ihrer css auch so??? Hilfe

#10

Bin jetzt etwas weiter gekommen.Hab mein categories_top folgendermaßen erweitert

  • [{se name=‘IndexLinkHome’}Home{/se}]({url controller=‘index’} “{s name=‘IndexLinkHome’}{/s}”)
    {foreach from=$sMainCategories item=sCategory} {if !$sCategory.hidetop} - [{$sCategory.description}]({if $sCategory.external}{$sCategory.external}{else}{$sCategory.link|rewrite:$sCategory.description}{/if} “{$sCategory.description}”)
    {/if} {/foreach}
    Jetzt werden mir die Grafiken der Hauptkategorien angezeigt und beim Drüberfahren kommt mein Rolloverbild wie gewünscht, aber: -die Grafik der activen Kategorie wird nicht angezeigt -der Home Button wird garnicht angezeigt ???
#11

Geht das bei CSS, dass man mehrere ID für ein Element vergibt? id="active {$sCategory.ac\_attr1}" Also bei class geht es, aber bei der ID bin ich mir nicht sicher. Evtl. ist da der Fehler.

#12

keine Ahnung,weiß denn niemand wie die categories_top aussehen muss,das mir da die Grafiken aus meiner css korrekt angezeigt werden,auch bei active und rollover und first(home)??? :frowning: :wtf: :cry:

#13

[quote=“ottscho”]Geht das bei CSS, dass man mehrere ID für ein Element vergibt? id="active {$sCategory.ac\_attr1}" Also bei class geht es, aber bei der ID bin ich mir nicht sicher. Evtl. ist da der Fehler.[/quote] Nein, die IDs müssen eindeutig sein

#14

Das ID Attribut erwartet einen einmaligen wert. Das heisst das was bei id="" steht darf im gesamten HTML nur einmal vorkommen. Bei class="" darf es öfter vorkommen. die Notation im CSS ist für id="": a#foo { } und für class="": a.foo { } Wenn deine Kategorienamen nicht aus mehreren Wörtern bestehen kansnt Du es so lösen: [code]

  • [{se name=‘IndexLinkHome’}Home{/se}]({url controller=‘index’} “{s name=‘IndexLinkHome’}{/s}”)
    {foreach from=$sMainCategories item=sCategory} {if !$sCategory.hidetop} - [{$sCategory.description}]({if $sCategory.external}{$sCategory.external}{else}{$sCategory.link|rewrite:$sCategory.description}{/if} “{$sCategory.description}”)
    {/if} {/foreach}[/code] Das entscheidende ist das hier im class="" vom link: {$sCategory.description} Wenn Du es mit dem Kategorieattribut machst dann so: [code]
  • [{se name=‘IndexLinkHome’}Home{/se}]({url controller=‘index’} “{s name=‘IndexLinkHome’}{/s}”)
    {foreach from=$sMainCategories item=sCategory} {if !$sCategory.hidetop} - [{$sCategory.description}]({if $sCategory.external}{$sCategory.external}{else}{$sCategory.link|rewrite:$sCategory.description}{/if} “{$sCategory.description}”)
    {/if} {/foreach}[/code] Die CSS könnte dann so aussehen: a.Schuhe{ background-image: url("../images/icons/warenkorb\_voll.png"); background-repeat: no-repeat; } Gruß, der Snooops
#15

Das geht so nicht,es passiert gar nichts.Hab ich was vergessen???

#16

Kann nicht sein, dann hast Du etwas falsch gemacht. Überprüf mal im FireBug (firefox addon) Ob die CSS für das element geladen wird, oder im Quelltext was im Link (also im a tag) in class="" steht. Wir brauchen mehr Informationen von Dir, denn so wird das nichts. Und falls das ganze Homepage Thema für dich neu ist, ist Shopware definitiv nicht der Anfang, sondern SelfHTML. Gruß der Snooops

#17

OK,hier mal eine Übersicht [color=blue]Mein categories_top sieht so aus[/color]

  • [{se name=‚IndexLinkHome‘}Home{/se}]({url controller=‚index‘} „{s name=‚IndexLinkHome‘}{/s}“)
    {foreach from=$sMainCategories item=sCategory} {if !$sCategory.hidetop} - [{$sCategory.description}]({if $sCategory.external}{$sCategory.external}{else}{$sCategory.link|rewrite:$sCategory.description}{/if} „{$sCategory.description}“)
    {/if} {/foreach}
    [color=blue]Der css Teil sieht so aus[/color] #navigation ul li a.neu { background:url("…/images/buttons/nav03.png") no-repeat scroll 0 0 transparent; height:44px; padding:0; text-indent:-999em; width:57px; } #navigation ul li a.neu.active { background:url("…/images/buttons/nav03.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:57px; } #navigation ul li a.neu:hover { background:url("…/images/buttons/nav03.png") no-repeat scroll 0 -44px transparent; height:44px; padding:0; text-indent:-999em; width:57px; } [color=blue]Ausgegeben wird folgender Code[/color]

  • Home

  • neu

  • girls

  • boys

  • merchandise

  • marken

  • basics

  • schuhe

  • accessoires

So funktioniert es fast Alle Kategoriegrafiken werden angezeigt,auch rollover und die aktive. Nur der Home Button bleibt leer,keine Reaktion. Hängt das mit der class="first zusammen?Kommt da noch seperat was in die css? Bei mir ist HOME auch komplett groß geschrieben.Vielleicht muss ich das ändern.

#18

Guck mal das fettgedruckte, das muss noch da rein :wink: Und dann in der CSS wieder #navigation ul li a.home { foo:bar; }

  • [{se name=‘IndexLinkHome’}Home{/se}]({url controller=‘index’} “{s name=‘IndexLinkHome’}{/s}”)
    {foreach from=$sMainCategories item=sCategory} {if !$sCategory.hidetop}- [{$sCategory.description}]({if $sCategory.external}{$sCategory.external}{else}{$sCategory.link|rewrite:$sCategory.description}{/if} “{$sCategory.description}”)
    {/if} {/foreach}
1 Like
#19

Hey Snooops,jetzt klappts wunderbar.aber wie meinst du das mit #navigation ul li a.home { foo:bar; } Gruß

#20

Super :wink: foo bar sind einfach sinnlose Worte um klar zu machen dass das man anstelle dieser Worte dort machen kann was man auch immer möchte :wink: Wenn ich dir gut geholfen habe,kannste ja den Danken Knopf drücken :wink: Gruß der Snooops