ComputerBase Menü
Aktuelles

Basic [Typo 3] Dropdown Menue (Homepage erstellen)

J

jojo-kahlua

Lt. Junior Grade
Registriert
Nov. 2012
Beiträge
274
hallo leute,

vorab: hatte bisher noch keine Erfahrung mit typo3..
ich habe aktuell eine horizontale Navigationsleiste und möchte bei einem Menüpunkt, dass bei mouse-hover ein Menü mit weiteren Unterseiten nach unten aufklappt. Leider weis ich nicht, wie ich dabei vorgehen kann/soll/muss.
Code bisher:
Code: 
 marks {
          SLIDERRANGE < styles.content.getBorder
          TOPCONTENT < styles.content.get
          NAVIGATIONBUTTON < styles.content.getLeft
          NAVIGATION = HMENU
          NAVIGATION {
              special = directory
              special.value = 14
              1 = TMENU
              wrap=<ul>|</ul>
           /* try 1:
              1.NO = 1
              1.NO.linkWrap = <li>|</li>
              1.ACT = 1
              1.ACT < .NO
              1.ACT.allWrap = <li id="topnavi-aktiv">|</li> 
              CUR = 1
              CUR < .NO
              CUR.allWrap = <li class="cur">|</li>*/
           /* try 2:
              NO = 1
              NO{
                wrapItemAndSub = <li>|</li>
              }
              ACT = 1
              ACT{
                wrapItemAndSub = <li class="aktiv">|</li>
              }

und an dieser stelle denke ich, dass die zweite Ebene des Menüs eingebunden werden muss.
Habe es bisher über JavaScript mit:
Code: 
                  2 = TMENU
    2 {
      wrap = <ul onmouseover="show(this)" onmouseout="hide(this)">|</ul>
      NO.allWrap = <li>|</li>
    }
wobei die JavaScript Methoden lediglich die klasse hover übergeben, um es per css anzusteuern.
leider hat diese Methode aber nicht funktioniert.
Bei Mouse-Hover wurde nichts angezeigt.
 
Huhu,

hier einmal ein snippet für nen Menü ;)

HTML: 
yourPage.nav.main = COA
yourPage.nav.main {
	10 = HMENU
	10.entryLevel = 0

	10.1 = TMENU
	10.1.expAll = 1
	10.1.wrap = <ul class="husel">|</ul>
	10.1.NO.wrapItemAndSub = <li class="huselFirst">|</li>|*|<li>|</li>|*|<li class="huselLast">|</li>

    10.1.IFSUB = 1
    10.1.IFSUB < .10.1.NO
	10.1.IFSUB.ATagParams = class="huselDropDown"

	10.1.ACT = 1
	10.1.ACT < .10.1.NO
	10.1.ACT.wrapItemAndSub = <li class="ihuselFirst huselAct">|</li>|*|<li class="huselAct">|</li>|*|<li class="huselLast huselAct">|</li>
	10.1.ACT.ATagParams = class="huselActLink"

	10.1.ACTIFSUB < .10.1.IFSUB
	10.1.ACTIFSUB = class="huselActLink huselDropDown"


	10.2 = TMENU
	10.2 < .10.1
	10.2.wrap = <ul class="huselSubNav">|</ul>
}

marks.NAVIGATION < yourPage.nav.main

(wobei yourPage ein beliebiger String ist. Ich habe das jetzt etwas abgeändert von einer Navigation, so wie ich sie benutze)

Die Sichtbarkeit erzeugst du einfach in CSS mit:

HTML: 
.husel ul ul {
   display: none;
}

.husel li:hover ul {
   display:block;
}
 
erst ein mal danke -
ich werds mal probieren, aber geht es nicht eigtl nur um die zweite Ebene?
Code: 
10.2 = TMENU
25.	10.2 < .10.1
26.	10.2.wrap = <ul class="huselSubNav">|</ul>

da hätte ich ja schon fast das gleiche probiert, oder? (außer dass ich die Kopie 10.2<10.1 was bei mir ja 2<1 wäre, noch nicht dabei hatte)
Code: 
              2 = TMENU
2.    2 {
3.      wrap = <ul onmouseover="show(this)" onmouseout="hide(this)">|</ul>
4.      NO.allWrap = <li>|</li>
5.    }
Ergänzung ()

habe es wohl falsch eingebunden?!
hier mal das aktuelle typoscript:

Code: 
page = PAGE
page {
  bodyTag = <body>
  includeCSS {  
    file1 = fileadmin/css/style.css
    file2=fileadmin/css/nivo-slider.css
    file3=fileadmin/css/default.css
  }
  includeJS {
  file1 = fileadmin/scripts/jquery-1.7.1.min.js
  file2 = fileadmin/scripts/slider.js
  }
page.nav.main = COA
page.nav.main {
20 = HMENU
20.entryLevel = 0
20.1 = TMENU
20.1.expAll = 1
20.1.wrap = <ul class="husel">|</ul>
20.1.NO.wrapItemAndSub = <li class="huselFirst">|</li>|*|<li>|</li>|*|<li class="huselLast">|</li>
20.1.IFSUB = 1
20.1.IFSUB < .10.1.NO
20.1.IFSUB.ATagParams = class="huselDropDown"
20.1.ACT = 1
20.1.ACT < .10.1.NO
20.1.ACT.wrapItemAndSub = <li class="ihuselFirst huselAct">|</li>|*|<li class="huselAct">|</li>|*|<li class="huselLast huselAct">|</li>
20.1.ACT.ATagParams = class="huselActLink"
20.1.ACTIFSUB < .10.1.IFSUB
20.1.ACTIFSUB = class="huselActLink huselDropDown"
20.2 = TMENU
20.2 < .20.1
20.2.wrap = <ul class="huselSubNav">|</ul>
}
  
  10 = TEMPLATE
  10 {
      template = FILE
      template.file = fileadmin/templates/Template.html
      workOnSubpart = DOKUMENT
      marks {
          SLIDERRANGE < styles.content.getBorder
          TOPCONTENT < styles.content.get
          NAVIGATIONBUTTON < styles.content.getLeft
          NAVIGATION < page.nav.main          
    }//marks ende
  }
}
jetzt wird nämlich gar kein menü-punkt mehr angezeigt..
 
Naja, wenn ich das richtig sehe, dann hast du

HTML: 
page = PAGE
page {
   page.nav.main = COA
   ...
}

das wäre falsch eingebunden ;)
Schreib mein TypoScript außerhalb von Page, dann sollte es klappen.

Du kannst ja im T3-BE auf Template (unterhalb von web) klicken, dort dann oben im Dropdown den Object-Browser auswählen und dir dann genau anschauen, wie der Pfad zum einbinden ist.
 
danke noch mal!

oh mann.. natürlich musste es außerhalb sein :rolleyes:
jetzt werden die navigationspunkte wieder angezeigt ;)
allerdings gibt es noch nicht diesen mouse-hover effect, dass da die zweite ebene aufklappen würde..

das sollte ja eigtl auch dein css-code machen, oder?
Code: 
.husel ul ul {
   display: none;
}
 
.husel li:hover ul {
   display:block;
}

und danke für den tipp mit dem object browser
 
ach dumm^^
Mein Fehler:

HTML: 
ul.husel ul {
   display: none;
}

Der klasse husel steht ja in der ul^^

Der zweite Part müsste soweit aber stimmen. Hast du den Pages in der zweiten ebene angelegt, sodas überhaupt subsites existieren? (Ich hab das schon öfters erlebt, bei kollegen von mir^^)
 
funktioniert i-wie trotzdem nicht richtig..

habe als bsp. die seiten Default angelegt..
mouse-hover zeigt kein aufklappbares menü - wenn ich auf den Default-link gehe, dann erscheint das Untermenü(in meinem fall nur noch ein anderer Default-link) anstelle der anderen menüpunkte.

sdf.PNG
 
Wenn du krampfhaft bei dieser Monstrosität namens TYPO3 bleiben willst oder musst, dann wirst du wohl am besten kommen, wenn du dein TypoScript für die Navigation einmal komplett in die Tonne trittst (um mitgeschleifte Fehler zu vermeiden) und dir von einer externen Quelle ein zuverlässiges Menüscript besorgst, das einfach nur eine schöne, langweilige <ul><ul>-Struktur aufbaut.

Ich weiß schon, warum ich von TYPO3 nur abrate. Man hat mit TypoScript mehr Ärger als die Sache am Ende wert hat.
 
unabhängig davon, ob typo3 jetzt notwendig wäre oder nicht - habe das menü jetzt hinbekommen.

allerdings noch ein Problem:
wenn ich auf einen Link klicke, dann verschwindet die Navigation und anstelle derer werden die Unterseiten der Navigation angezeigt (also die 2. Ebene).
Eine Idee warum das so ist, bzw. gibt es eine Einstellung, dass die Navigation immer fest angezeigt wird? (bzw. bestimmte Seiten in der Navigation immer angezeigt werden)

Danke im Voraus
 
sers,
2 dinge

1. programmier dein menü erstmal normal ohne typo 3
wenn das klappt, musst du in typoscript nur noch die html struktur genauso hinbekommen <- funktioniert einwandfrei
2. du kannst in typoscript sagen ab welcher ebene sich das menü darstellt, also im backend hast du ja deine website struktur als baum ansicht in der mitte... die seiten die genau untereinander sind, stellen jeweils eine ebene dar... sehe grad hast du ja schon... (entrylevel)

ach ja weiß nicht ob das nur hier so dargestellt wird, aber typoscript ist normalerweiße soweit ich weiß zeilen orientiert... also ein befehl eine zeile...

und warum machst du als erst ein hmenü um es dann doch wieder in ein tmenü zu wandeln?
hab auch schon mitbekommen das es typoscript garnicht mag wenn in einer befehls zeile noch ein komment steht, also mach den komment einfach ne zeile darunter bzw. darüber...

wenn du im firefox oder chrome den firebug anschmeist, siehst du eigentlich eh gleich was wo fehlt oder schief läuft...

verwendest du javascript (jquery) fürs menü?

grüße
auch typoscript noob... ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 170 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz