Zum Inhalt springen

Slide Down Box Menu

Erstellt am 10. Dezember 2013 · 3 Antworten · letzte Antwort am 14. Dezember 2013

Tags: TYPO3 6.x, Frage

Arukard ·

Hey Leute!
Ich hätte gerne ein Slide Down Box Menu im Header einer Jugendseite die ich gesalte. Ich werde es recht simpel aufbauen und möchte nur die nötigen Informationen darstellen.
Dieses Slide Down Box Menuhttp://docs.typo3.org/typo3cms/extensions/t3s_slidedownboxmenu/0.0.1/ ist ganz nett und gefällt mir, leider finde ich nicht die Einstellungsmöglichkeiten für Breite und co.
Normalerweise hätte ich mir die Inhalte der Extensions angeschaut aber das geht bei Typo3 6.1.6 ja nicht mehr wie bei der Version wo ich das schon öfter gemacht habe (dann würde ich versuchen in den extension files nachzuschauen und zu gucken was ich wo einfüge blaaa
Also wer Erfahrungen hat (oder eine Ahnung wie er daran kommt) immer gerne her damit 😉

lg Daniel

EDIT:
Ich glaube ich habe her etwas gefunden: http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/

Wenn alles klappt melde ich mich noch mal^^

Also es klappt nicht, ich bin gerade zu dämlich um die CSS-Vorgaben zu überschreiben.
Hier ein kleiner Auszug aus meinem Setup bislang:

# Default PAGE object:
page = PAGE

page.includeCSS {
  file10 = fileadmin/Designs/Ameland/css/styles.css
  file10.media = screen
}

# Konfiguration Template Auto-parser
plugin.tx_automaketemplate_pi1 {
  content = FILE
  content.file = fileadmin/Designs/Ameland/index.html
  relPathPrefix = fileadmin/Designs/Ameland/
  elements {
    BODY.all = 1
    BODY.all.subpartMarker = DOCUMENT_BODY
    DIV.all = 1
    SPAN.all = 1
  }
}

page.10 = TEMPLATE
page.10 {
  template =< plugin.tx_automaketemplate_pi1
  workOnSubpart = DOCUMENT_BODY
  
  subparts.inhalt < styles.content.get
  
  subparts.header < lib.slideDownBoxMenu
  
 
  subparts.globals = HMENU
  subparts.globals {
    special = list
    special.value = 4, 15, 14
    
    1 = TMENU
    1.NO.linkWrap = |&nbsp;&#x7c;&nbsp; |*| | &nbsp;&#x7c;&nbsp; |*| |
  }
 
  subparts.rootline = HMENU
  subparts.rootline {
    special = rootline
    
    special.range = 1 | -1
    wrap = <b>Sie sind hier:</b>&nbsp; |
    1 = TMENU
    1.NO.allWrap = |&nbsp;/&nbsp; |*| | &nbsp; / &nbsp; |*| |
    1.CUR = 1
    1.CUR < .1.NO
    1.CUR.doNotLinkIt = 1
  }

Und bislang hat leider noch kein Versuch geklappt die CSS zu überschreiben.

Falls ihr da n schnellen Rat habt, wäre es toll wenn ihr den Raushauen könntet, bin gerade ein wenig überlastet (Studium und bla)

Arukard ·

Habe bei mir jetzt einfach unter Typoscript was geworfen und es klappt, wenn es nicht sauber ist gerne korrigieren 😉

lg, Daniel

  page.headerData.1501 = TEXT
  page.headerData.1501.value (
    <style type="text/css">
    ul.sdt_menu li{
    float:left;
    width:270px;
    height:220px;
    position:relative;
    cursor:pointer;
}
      
   ul.sdt_menu li > a{
    position:absolute;
    top:0px;
    left:0px;
    width:270px;
    height:220px;
    z-index:12;
    background:transparent url(../images/overlay.png) no-repeat bottom right;
    -moz-box-shadow:0px 0px 2px #000;
    -webkit-box-shadow:0px 0px 2px #000;
    box-shadow:0px 0px 2px #000;
}  
      
  
    </style>
  )

-- Also bis zu dem Zeitpunkt hat es geklpatt sachen zu verändern, nachdem ich alle Elemente eingefügt hatte, ging es nicht mehr. Findet einer von euch den Fehler? Sobald er gefunden ist, ist dieser Thread gelöst 😉

Danke euch für eure Hilfe!

page.headerData.1501 = TEXT
page.headerData.1501.value (
    <style type="text/css">
    #unsortierte Liste
    ul.sdt_menu{
    margin:0;
    padding:0;
    list-style: none;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    font-size:14px;
    width:1020px;
}
#Menu unabhängig von anderen Textkonfigurationen machen
    ul.sdt_menu{
    margin:0;
    padding:0;
    list-style: none;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    font-size:14px;
    width:1020px;
}
#Liste items
ul.sdt_menu li{
    float:left;
    width:170px;
    height:85px;
    position:relative;
    cursor:pointer;
}
#Main Link Element
ul.sdt_menu li > a{
    position:absolute;
    top:0px;
    left:0px;
    width:170px;
    height:85px;
    z-index:12;
    background:transparent url(../images/overlay.png) no-repeat bottom right;
    -moz-box-shadow:0px 0px 2px #000 ;
    -webkit-box-shadow:0px 0px 2px #000;
    box-shadow:0px 0px 2px #000;
                    }
#Image Style
ul.sdt_menu li a img{
    border:none;
    position:absolute;
    width:0px;
    height:0px;
    bottom:0px;
    left:85px;
    z-index:100;
    -moz-box-shadow:0px 0px 4px #000;
    -webkit-box-shadow:0px 0px 4px #000;
    box-shadow:0px 0px 4px #000;
}
#Title and description wrapper
ul.sdt_menu li span.sdt_wrap{
    position:absolute;
    top:25px;
    left:0px;
    width:170px;
    height:60px;
    z-index:15;
}
#erste Menübox die Runterslidet
ul.sdt_menu li span.sdt_active{
    position:absolute;
    background:#111;
    top:85px;
    width:170px;
    height:0px;
    left:0px;
    z-index:14;
    -moz-box-shadow:0px 0px 4px #000 inset;
    -webkit-box-shadow:0px 0px 4px #000 inset;
    box-shadow:0px 0px 4px #000 inset;
}
#Links in der Box
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
    margin-left:15px;
    text-transform:uppercase;
    text-shadow:1px 1px 1px #000;
}

#Titel und beschreibung
ul.sdt_menu li span span.sdt_link{
    color:#fff;
    font-size:24px;
    float:left;
    clear:both;
}
ul.sdt_menu li span span.sdt_descr{
    color:#0B75AF;
    float:left;
    clear:both;
    width:155px;
    font-size:10px;
    letter-spacing:1px;
}
#Submenu
ul.sdt_menu li div.sdt_box{
    display:block;
    position:absolute;
    width:170px;
    overflow:hidden;
    height:170px;
    top:85px;
    left:0px;
    display:none;
    background:#fff;
}
ul.sdt_menu li div.sdt_box a{
    float:left;
    clear:both;
    line-height:30px;
    color:#0B75AF;
}
#erster Link im Submenü
ul.sdt_menu li div.sdt_box a:first-child{
    margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
    color:#fff;
}

    </style>
  )
etux · · Beste Antwort

#unsortierte Liste
…
#Menu unabhängig von …
…

Das sind keine CSS-Kommentare. 😉
Eher unvollständige CSS-Regel – die Klammer fehlen:
#unsortierte Liste { }
😃

P.S.:
Ich hatte mich vor etwa einem Jahr kurz mit dem Menü beschäftigt. Es hat mich gestört, dass das Menü mit der Tastatur nicht bedienbar war.
So entstanden die zwei Menü-Varianten hier:
Ohne JavaScript: http://tests.emil-webdesign.net/SlideDownBoxMenu-CSS3/
Mit JavaScript: http://tests.emil-webdesign.net/SlideDownBoxMenu-jQuery/