[CSS] Navigation auf bundestag.de

[Tankred]

Hallo zusammen,

die Navigation auf bundestag.de finde ich recht gelungen, nur frage ich mich, wie man sowas am besten konzeptionell umsetzt.

Grundsätzlich sind ja sowohl die Haupt- als auch die Untermenüpunkte einfache Listeneinträge, die per CSS formatiert wurden. Ich frage mich nun, wie das "Aufklappen" realisiert wurde. Natürlich kann man für jede Unterseite eine eigene Liste anlegen, so würde das aber sicher keinen Spaß machen.

Also wie denkt ihr wurde die Navigation mit den Untermenüpunkten und dem Aufklappen realisiert?

Grüße,

 

[krazy-krizi]

CSS-Ausschnitt

#navigationMenu {
    border: none;
    margin: 0;
    padding: 0.3em 0 6.5em 0;
    background-color: #50638b;
    color: #f6f7fb;   
    width: 100%;
}

#navigationMenu a {
    color: #f6f7fb;
}

#navigationMenu ul {
    margin: 0;
    padding: 0 0 0.3em 1.8em;
}

#navigationService a {
    color: #1F3250;
}

/* Listenformatierung Navigation Anfang */

.subMenu ul {
    padding-right: 0;
}

.subMenu {
    margin: 0.2em 0 0 -0.7em;
    padding: 0;
    color: #ffffff;
}

li.menuX {
    list-style: none;
    border-top: 0.07em solid #D3D9E7;
}

li.menuB {
    list-style: url(../bilder/menu1z.gif);
    letter-spacing: normal;
    font-weight: normal;
    line-height: 1.5em;
}

li.menuBSub {
    list-style: url(../bilder/menu1a.gif);
    letter-spacing: normal;
    font-weight: bold;
    line-height: 1.5em;
}

li.menuBNoSub {
    list-style: url(../bilder/menu1n.gif);
    letter-spacing: normal;
    font-weight: normal;
    line-height: 1.5em;
}

li.menuA {
    list-style: url(../bilder/menu1z.gif);
    font-weight: bold;
}

li.menuASub {
    list-style: url(../bilder/menu1a.gif);
    font-weight: bold;
}

li.menuASelect {
    list-style: url(../bilder/menu1s.gif);
    font-weight: bold;
}

li.menuANoSub {
    list-style: url(../bilder/menu1n.gif);
    font-weight: bold;
}

li.menuB {
    list-style: url(../bilder/menu1z.gif);
    letter-spacing: normal;
    font-weight: normal;
}

li.menuBSub {
    list-style: url(../bilder/menu1a.gif);
    letter-spacing: normal;
    font-weight: bold;
}

li.menuBSelect {
    list-style: url(../bilder/menu1s.gif);
    letter-spacing: normal;
    font-weight: bold;
    line-height: 1.5em;
}

li.menuBNoSub {
    list-style: url(../bilder/menu1n.gif);
    letter-spacing: normal;
    font-weight: normal;
}

das zum aufklappen ist das li.menuA... ich und ein normaler link, welcher auf verschiedene index verweitst?! ^^
weiss jetz nicht ob ich das richtig verstanden habe... aber anscheinend, verweist der immer auf andere ordner, in welchen index. html vorhanden sind.
bsp: "href = ../wehrbeauftragter/index.html", "href = ../ausschuesse/index.html", "href = ../interakt/index.html"...
wenns nur mit php gelöst sein muss gehts, soviel ich weiss, nur so... es ist mir kein attribut bekannt welches bei klick was macht so wie :hover oder :focus vieleicht :click?!

izi, greez krizi...

 

[1668mib]

Hinter der ganzen Seite steht ja bestimmt ein aufwändiges CMS...

Das auf- und zuklappen ist in den HTML-Dateien, die System-generiert werden, fest eincodiert...

Wird was an der Menüstruktur geändert werden halt die betroffenen HTML-Dateien neu generiert...

So stelle ich mir das vor.

 

[Simple Man]

Eigentlich ganz interessant gemacht. Der Sourcecode wäre aber auch nicht uninteressant ^^

Vergleichbare Menüführungen habe ich aber auch schon öfter gesehen, doch wo genau, kann ich mich nicht mehr erinnern.

 

[dummix]

Solche Menüs lassen sich recht einfach mit verschachtelten ul/ol Elementen realisieren. Wenn du wirklich aufwendige Navigationen kreieren willst, schau dir mal CSSplay von Stu Nicholls an; das ist das Mekkar aller CSS-Sympathisianten.

 

[Mr. Snoot]

Hio,

schau dich mal hier um: http://css.maxdesign.com.au/listamatic2/index.htm (Vertical nested lists). Da sollte doch was passendes dabei sein.

Ich habe bisher fast alle Menüs unter Zuhilfenahme/Anregung dieser Seite realisiert.

Natürlich kann man für jede Unterseite eine eigene Liste anlegen, so würde das aber sicher keinen Spaß machen.

Das könnte man ja mit PHP dann etwas eleganter lösen.

 

[krazy-krizi]

...Wenn du wirklich aufwendige Navigationen kreieren willst, schau dir mal CSSplay von Stu Nicholls an; das ist das Mekkar aller CSS-Sympathisianten.

hehe... diesen link hab ich kurz nach meinem beitrag in diesem thread in einem weiterem hier gepostet...
manchmal denk ich mir einfach, dass der typ von cssplay zu viel zeit hat ^^

izi, greez krizi... :-D

 

[funland]

der source-code währe dafür auch nicht so kompliziert. es gibts in meisten web-sprachen "Arrays" und Schleifen. hier ein beispiel in PHP:

<?php
$menu = array(
	// 1
	"Startseite" => array(
		"News" => array(
			"Aktuelles" => 1,
			"Technologie" => 2,
			"Wirtschaft" => 3
		),
		"Tutorials" => array(
			"HTML" => 1,
			"PHP" => 2,
			"Java" => 3
		),
		"Sonstiges" => array(
			"Impressum" => 1,
			"Sitemap" => 2
		)
	),
	// 2
	"Webdesign" => array(
		"Service" => array(
			"Programmierung" => 1,
			"Layoutdesign" => 2
		),
		"Portfolio" => array(
			"www.firma1.de" => 1,
			"www.sonstwas.com" => 2,
			"www.raper.com" => 3,
			"www.rocker.de" => 4
		)
	)
);
/*
a = action
s = section
id = id
*/
foreach($menu as $a => $untercat1) {
	if($_GET['a'] == $a) {
		echo '<a href="?a='.$a.'">&raquo; '.$a.'</a><br />';
		foreach($untercat1 as $s => $inhalt) {
			if($_GET['s'] == $s) {
				echo '<a href="?a='.$a.'&s='.$s.'">&nbsp; &raquo; '.$s.'</a><br />';
				foreach($inhalt as $title => $id) {
					if($_GET['id'] == $id) echo '<a href="?a='.$a.'&s='.$s.'&id='.$id.'">&nbsp; &nbsp; &raquo; '.$title.'</a><br />';
					else echo '<a href="?a='.$a.'&s='.$s.'&id='.$id.'">&nbsp; &nbsp; '.$title.'</a><br />';
				}
			} else {
				echo '<a href="?a='.$a.'&s='.$s.'">&nbsp; '.$s.'</a><br />';
			}
		}
	}
	else echo '<a href="?a='.$a.'">'.$a.'</a><br />';
}
?>

einwenig unübersichtlich, hoffentlich helfe ich damit weiter