Zum Inhalt springen

Horizontalmenü..mit aufgeklappten Unterpunkten

Erstellt am 23. Januar 2009 · 3 Antworten · letzte Antwort am 23. Januar 2009

Tags: HTML & CSS, Frage

rhythmuskind ·

Hallo! Ich habe ein Problem mit der Darstellung eines Menüs. Es soll sich aus 5 Boxen zusammensetzen, die horizontal nebeneinander liegen. Darin sollen im oberen Bereich nebeneinander die Hauptnavi-Punkte stehen. Darunter sollen (ohne Auflistungszeichen) die Untermenüpunkte aufgeklappt stehen.
Ich bekomme es nicht hin, dass alle Punkte nebeneinander stehen und dann noch für jede Box ein Hintergrundbild dargestellt wird (je ein anderes).

... wenn zu kompliziert erklärt, ist hier ein Link. so soll es werden. (das ist bisher kein Typo3, soll aber darauf umgestrickt werden)
http://www.journalistech.de/joomla/Aquatic_Parasitology/

Vielen Dank!!

d.​walter ·

Hallo rythmuskind und willkommen im Forum.

Menüs für TYPO3 sind eigentlich relativ einfach.

Du musst dir erstmal das gwünschte Menü als HTML mit CSS bauen. Wenn du das hast, ist das ganze ins TS zu übernehmen nicht mehr die ganz große Schwierigkeit.

Hier mal ein Link mit den wichtigsten Menüs.

Zu deinem Menü jetzt würde ich vermutlich hergehen und dass ganze splitten.
Das MainMenü an einen Marker ausgeben und dann das SubMenü an einen anderen Marker.

Der Link sollte dir erstmal weiterhelfen. Wenn du dann irgendwo noch probleme hast, dann dein TS posten und es wird dich sicher jemand weiterhelfen können.

Daniel

rhythmuskind ·

Hej Daniel!

Vielen Dank!!
Nen Schritt weiter bin ich dadurch tatsächlich gekommen. Immerhin werden die 5 Hintergrundbilder nebeneinander angezeigt und die ersten Menüpunkte stehen am richtigen Platz. Aber Die UNtermenüpunkte werden nicht angezeigt, jetzt, wo ich sie gesplittet habe.

Zwischendurch hatte ich sie - vor dem Split - , aber leider untereinander...
hat jemand ne Idee?

hier mein Typoscript:
Seite = PAGE
Seite {
typeNum = 0
bodyTag = <body bgColor ="#DDDDD">
stylesheet = fileadmin/marine_parasitology/css/layout.css
metaAUTHOR = Yvonne Grabowski

10 = TEMPLATE
10.template = FILE
10.template.file = fileadmin/marine_parasitology/index.html
10.workOnSubpart = DOKUMENT
10.marks {

HEAD = IMAGE
HEAD.file = fileadmin/marine_parasitology/images/bannerschrift.jpg

BREADCRUMB = HMENU
BREADCRUMB {
special = rootline
special.range = 1|-1
1 = TMENU
1 {
NO.linkWrap = &nbsp;|&nbsp;&gt;
CUR = 1
CUR.linkWrap = <span class="breadAct">&nbsp;|&nbsp;</span>
CUR.doNotLinkIt = 1
}
}

MAIN_MENU = HMENU
MAIN_MENU {
1 = GMENU
1 {
NO = 1
NO {
5 = IMAGE
5.file = fileadmin/marine_parasitology/images/welle01.gif || fileadmin/marine_parasitology/images/welle02.gif || fileadmin/marine_parasitology/images/welle03.gif || fileadmin/marine_parasitology/images/welle04.gif || fileadmin/marine_parasitology/images/welle05.gif
XY = 180, 149


10 = TEXT
10 {
fontSize = 12
fontColor = #FFFFFF
text.field = title
offset = 10,15
spacing = 0
align = left
niceText = 1

}
}

RO < .NO
RO = 1
RO {
10.fontColor = #FBFC36
}

ACT < .NO
ACT = 1
ACT {
10.fontColor = #FBFC36
}
}



SUB_MENU = HMENU
SUB_MENU {
1 = GMENU
1.expAll = 1
1 {
wrap = <div id="menu_sub" | </div>
NO = 1

NO {
wrap = <ul>|</ul>
transparentBackground = 1
XY = [10.w]+1, 15

10 = TEXT
10 {
fontSize = 12
fontColor = #FFFFCC
text.field = title
offset = 10,15
align = left
niceText = 1
}
}

RO < .NO
RO = 1
RO {
10.fontColor = #FBFC36
}

ACT < .NO
ACT = 1
ACT {
10.fontColor = #FBFC36
}


CONTENT = CONTENT
CONTENT {
table = tt_content
select.orderBy = sorting
select.where = colPos = 0
}

}
}

und mein css in dem bereich:

#breadcrumb{
height: 30px;
width: 900px;
background-color: #345195;

}

#menu { /*Wellenhintergrund*/
width: 900px;
height: 149px;

}


#menu_sub {
background-image: none;
width: 900px;
position: absolute;

background-color: #FF9900;
}

und html:

<body>
<!--###DOKUMENT### begin -->
<div id="explorer">
<div id="kasten">
<div id="header">
###HEAD###
</div>

<div id="breadcrumb">
###BREADCRUMB###
</div>

<div id="menu">
###MAIN_MENU###

<div id="menu_sub">
###SUB_MENU###
</div>
</div>


<div id="content">###CONTENT###
<div id="links"></div>
<div id="rechts"></div>
</div>

<div id="unten">###CONTENT_UNTEN###
</div>

</div>
</div>

<!--###DOKUMENT### end -->
</body>
</html>

Unbekannter Benutzer ·

Du solltest mit nur einem Marker für das Menü arbeiten, sonst kriegst du ja Haupt- und Unterpunkte nur schwerlich zusammen. Orientier dich doch an dem alten Menü.