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 = | | |*| | | |*| |
}
subparts.rootline = HMENU
subparts.rootline {
special = rootline
special.range = 1 | -1
wrap = <b>Sie sind hier:</b> |
1 = TMENU
1.NO.allWrap = | / |*| | / |*| |
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)
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>
)
#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/
Ich könnte mir ja gerade echt in Ar*** beißen...
Ich danke dir 😉