[bjs1977]

Hallo zusammen,

ich möchte folgendes Menü änlich nachbauen, aber nicht als Flash:

1. FC Köln: Willkommen beim 1. FC Köln

Reiter-Menü
Das erstelle ich als eigenständiges Menü. ierbei besteht kein Problem.

Menü-Blocks
Das die obermenüpunkte angezeigt werden, ist auch kein Problem, aber wie bekomme ich es hin, dass unter dem Menü, ca. 125 PX breit und 60 PX hoch ein Block ensteht, wo alle Unterseiten nach und nach angezeigt werden? Noch ein Unterschied. Es sol natürlich keine Funktion vorhanden sein "alle anzeigen". Im Block sollen dann alle stehen.

Hat das schon mal jemand gemacht und kann mir einen Ansatz zeigen?

Wäre schön, wenn mir jeamdn einen Ansatz zeigen könnte.

Vielen Dank im Voraus

BJS

[matin]

soll das ganze als grafikmenü oder textmenü ausgegeben werden?

grundsätzlich kannst du mit expAll = 1
die gesamte menüstruktur einblenden

[bjs1977]

Hallo,

das ist eigentlich egal ob als Text oder grafisch. Grafisch wäre natürlich besser, da man da dann andere Schriftypen verwenden kann.

Aber wie bekomme ich die Box darunter. expAll ist einleutend

Ein Menü, wo sich das Menü nach unten ausklappt, habe ich auch schon gehabt, aber jetzt soll das ganze auf der ersten unteren Ebene einer einer Box ohne "br" dastehen.

Weil die Untermenüs, die darunter noch mal folgen sollen, soll en dann an der Seite angezeigt werden!

[matin]

gib die ebene 2 doch einfach in einen eigenen div-container und/oder gib es als liste aus (li). das ganze kannst du dann einfach über css regeln, indem du z. b. li float:left zuweist. dadurch werden die einzelnen listenelemente hintereinander aufgefädelt ... ich hab mal schnell ein menü etwas modifiziert, um das zu zeigen (kopier dir mal den html-code und gib das css in die datei layout.css und gib die css-datei in den unterordner css (wird zwar trotzdem etwas komisch aussehen, da bilder fehlen:sad:

CSS:
body {
margin: 0;
padding: 0;
background-image: url(../images/bg_body.gif);
background-color: #333333;
background-repeat: repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#menu {
width: 750px;
height: 40px;
float: left;
margin-left: 40px;
background: #000000;
}
#menu_inner {
float: left;
margin-top: 14px;
}
/* Menü Top Mitte Anfang */
#nav {
}
#nav, #nav ul {
float: left;
width: 100%;
list-style: none;
background: none;
font-weight: normal;
padding: 0;
border: solid #eda;
border-width: 0px 0;
margin: 0 0 0 0;
}

#nav a {
display: block;
width: auto;
color: #FFFFCC;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: left;
margin-top: 0;
margin-right: 15px;
margin-bottom: 0;
margin-left: 0;
padding-right: 0;
padding-bottom: 2px;
padding-left: 18px;
font-family: LithographLight;
background-image: url(../images/quadrat-1.png);
background-repeat: no-repeat;
background-position: left top;
}
#nav a:hover {
color: #FF9A00;
}
#nav a.active {
display: block;
/* width: 107px;
w\idth: 107px; */
width: auto;
color: #FF9A00;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: left;
margin-top: 0;
margin-right: 21px;
margin-bottom: 0;
margin-left: 0;
padding-right: 0;
padding-bottom: 2px;
padding-left: 18px;
font-family: LithographLight;
background-image: url(../images/quadrat.png);
background-repeat: no-repeat;
background-position: left top;

}
* html #nav a.active {
padding-bottom: 12px;
}
#nav li {
float: left;
padding: 0;
border-right-width: 0px;
border-right-style: solid;
border-right-color: #FFFFFF;
border-left-width: 0px;
border-left-style: solid;
border-left-color: #999999;
}
#nav li:hover, #menu li.hover {
position: static;
}
#nav li ul {
/* position: absolute;
left: -999em; diese zwei zeilen werden nur bei Hover-Menü benötigt */
height: auto;
width: 310px; /* hier wird die Breite des Submenü festgelegt */
font-weight: normal;
border-width: 0em;
background: none;
background-image: url(../images/bg_menu.png);
margin-top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
* html #nav li ul {
background-image: url(../images/bg_menu_ie6.png);
margin-top: 0;
}
#nav li li {
width: auto;
border: none;
background: none;
margin-left: 11px;
float: left;

}
* html #nav li li {
padding-right: 0;
margin-left: 6px;
}
#nav li ul a { /* Link Ebene 2 */
text-align: left;

padding-top: 8px;
padding-bottom: 7px;
background: none;
border-bottom-width: 0px;
border-bottom-style: dotted;
border-bottom-color: #000;
margin: 0;
padding-left: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
}
#nav li ul a.active { /* Link Ebene 2 active */
text-align: left;
padding-top: 8px;
padding-bottom: 7px;
background: none;
border-bottom-width: 0px;
border-bottom-style: dotted;
border-bottom-color: #000;
margin: 0;
padding-left: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
text-decoration: underline;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Submenu Container</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<div id="menu">
<div id="menu_inner">
<ul id="nav">
<li><a href="/">Menu 1</a></li>
<li><a href="/" class="active">Menu 2</a>
<ul>
<li><a href="/" class="active">Submenu 1</a></li>
<li><a href="/">Submenu 1</a></li>
<li><a href="/">Submenu 2</a></li>
<li><a href="/">Submenu 3</a></li>
<li><a href="/">Submenu 4</a></li>
<li><a href="/">Submenu 5</a></li>
<li><a href="/">Submenu 6</a></li>
<li><a href="/">Submenu 7</a></li>
<li><a href="/">Submenu 8</a></li>
<li><a href="/">Submenu 9</a></li>
</ul>
</li>
<li><a href="/">Menu 3</a></li>
<li><a href="/">Menu 4</a>
<ul>
<li><a href="/" class="active">Submenu 1</a></li>
<li><a href="/">Submenu 1</a></li>
<li><a href="/">Submenu 2</a></li>
<li><a href="/">Submenu 3</a></li>
<li><a href="/">Submenu 4</a></li>
<li><a href="/">Submenu 5</a></li>
<li><a href="/">Submenu 6</a></li>
<li><a href="/">Submenu 7</a></li>
<li><a href="/">Submenu 8</a></li>
<li><a href="/">Submenu 9</a></li>
</ul>
</li>
</ul>
</div><!-- End menu_inner -->
</div><!-- End menu -->

</body>
</html>


Hier noch der setup-coden für das menü (musst halt die schrift, hintergrundbild usw. anpassen. für das submenü kannst du ja dann auch ein grafikmenü machen - hier ist es ein textmenü:sad:

##Grafisches Menue 1. Ebene – Hover 2. Ebene Text – Bioart
## Menu links Ebene2 [Begin]
lib.subMenu = HMENU
lib.subMenu.entryLevel = 1
lib.subMenu.wrap = <ul id="nav_left">|</ul>
lib.subMenu.1 = TMENU
lib.subMenu.1.NO {
allWrap = <li>|</li>
}

lib.subMenu.1.ACT = 1
lib.subMenu.1.ACT {
allWrap = <li class="active_li">|</li>
ATagParams = class="active"
}
## Menu [End]

## Grafisches Menu Ebene 1 mit Submenü in Box darunter [Begin]
lib.mainMenu = HMENU
lib.mainMenu {
entryLevel = 0
1 = GMENU
1 {
noBlur = 1
expAll = 1

wrap = <ul id="nav">|</ul>

NO = 1
NO.wrap = |*| <li>|</li>|*| <li>|</li>

NO {
transparentBackground = 1
ATagTitle.field = title
XY=[10.w]+10,24

5 = IMAGE
5.file = fileadmin/templates/ordner/images/menuBG.gif

10=TEXT
10 {
text.field=title
offset=0,10
fontColor=#FFFFCC
fontFile=fileadmin/templates/ordner/LITHOGRL.TTF
fontSize=13

}
}



ACT = 1
ACT.wrap = |*| <li>| |*| <li>|

ACT {
transparentBackground = 1
ATagTitle.field = title
XY=[10.w]+10,24

5 = IMAGE
5.file = fileadmin/templates/ordner/images/menuBG.gif

10=TEXT
10 {
text.field=title
offset=0,10
fontColor=#FF9A00
fontFile=fileadmin/templates/ordner/LITHOGRL.TTF
fontSize=13

}
}

ACTRO <.RO

IFSUB = 1
IFSUB < .NO
IFSUB.wrap = |*| <li>| |*| <li>|

RO = 1
RO.wrap = |*| <li>|</li>|*| <li>|</li>

RO {
transparentBackground = 1
ATagTitle.field = title
XY=[10.w]+10,24

5 = IMAGE
5.file = fileadmin/templates/ordner/images/menuBG.gif

10=TEXT
10 {
text.field=title
offset=0,10
fontColor=#FF9A00
fontFile=fileadmin/templates/ordner/LITHOGRL.TTF
fontSize=13

}
}

IFSUBRO < .RO
IFSUBRO.6 = IMAGE


}

2 = TMENU
2 {
noBlur = 1
expAll = 1
wrap = <ul><li>|</ul></li>

NO = 1
NO {
wrap = <li>|</li>
}

ACT = 1
ACT {
Wrap = <li>|</li>
ATagParams = class="active"
}


}
}

## Menu [End]

[bjs1977]

Hi!

Wow. Dat sieht schon ganz nett aus. Ich musste zwar erstmal etwas durchsteigen. Aber ist das normal, das die Subs ohne weitere Bearbeitung ein wenig durcheinander aufgereit sind?!

Aber schon mal DANKE!

Hoffe ich bekomme das mit IFSUB etc. hin. Habe damit noch garnicht gearbeitet!