Sie sind hier:

Website Baker CMS Forum

Website Baker CMS Forum » Websitebaker 2.x » Templates

Menupunkt aktiv anzeigen

(5 posts) (3 voices)

Vor 2 years von amesus gestartet
Letzte Antwort von amesus

Tags:

Keine Tags bisher.

amesus

offline

Mitglied
Login to Send PM

Ich probiere das Leron-Template ein bisschen anzupassen. Und zwar möchte ich, dass der Menupunkt der aktuell angezeigten Seite eingefärbt angezeigt wird. Momentan wird nur bei hover die Hintergrundfarbe gewechselt. Was muss ich ändern?

	
div#menup {
	text-align:center;
}
ul#menu {
	height: 47px;
	line-height:47px;
	padding-left: 29px;
	padding-right: 39px;
	list-style: none;
	background: url(images/menu.gif) no-repeat 0 0;
	color: White;
	font-size: 12px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	letter-spacing: 0.2em;
}
ul#menu li {
	float: left;
	height: 47px;
	color: White;
	font-size: 12px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;	
}
ul#menu li a {
	height: 47px;
	color: White;
	font-size: 12px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;	
}
li.premuto a {
	color: White;
	font-size: 12px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	width:auto;
	height: 47px;
}
div.premuto li#premuto a,
li.premuto a:active,
li.premuto a:hover {
	background: url(images/menupremuto.gif);
	color: White;
	font-size: 12px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	padding-left: 15px;
	padding-right: 15px;	
}
.menuHead {
	color: White;
	font-size: 12px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	padding-left: 15px;
	padding-right: 15px;	
}
a.menuHead {
	color: White;
	font-size: 12px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;	
	padding-bottom: 12px;
	padding-top: 16px;
}
li.divisoremenu {
	width: 2px;
	height: 47px;
	padding-left: 0px;
	padding-right: 0px;
	background: url(images/separatore.gif) no-repeat 0 0;
}

Wenn ich "li.premuto a:active" einen anderen Hintergrund angebe wird der nicht angezeigt.

vor 2 years veröffentlicht #

azoo

offline
Moderator
Login to Send PM

Hallo amesus,
du wirst du mit css nicht weiter kommen.

a:active ist nur im Moment des Mausklicks dem zugeordneten Farbwert entsprechend. Mit JS könntest du da was machen.

Gruß
azoo
copTa.de | Normag-Zorge | Debian-sid

vor 2 years veröffentlicht #
amesus

offline
Mitglied
Login to Send PM

Danke für die promte Antwort. Na dann versuche ich mich mal schlau zu machen.

vor 2 years veröffentlicht #
daniel

offline
Hausmeister
Login to Send PM
Hallo amesus,

ich habe evtl. eine Lösung für Dich.
In der Schleife, in der das Menü ausgegeben wird, musst Du nur prüfen ob der aktuell zu schreibende Menüpunkt mit dem Menüpunkt der aktuellen Seite identisch ist. Wenn ja, packst Du einfach eine eindeutige CSS-ID oder Kalsse in das A-Tag dieses Menüpunktes und den kannst Du dann formatieren.

Als z.B. so:

ändere in der index.php das hier (ca. Zeile 74):
```
<a class="menuHead" href="<?php echo page_link($page['link']); ?>"><?php echo stripslashes($page['menu_title']); ?></a>
```
in das hier:
```
<a class="menuHead" <?php if ($page['menu_title'] == MENU_TITLE) { print "id=\"active\""; } ?> href="<?php echo page_link($page['link']); ?>"><?php echo stripslashes($page['menu_title']); ?></a>
```
in der topmenu.css suchst Du die Formatierung für hover-Menüpunkte und ergänzt diese, damit sich auch aktive Menüpunkte so verhalten, z.B. so:

suche (ca. ab Zeile 55) das hier:
```
div.premuto li#premuto a,
li.premuto a:active,
li.premuto a:hover {
```
und ergänze es etwa so:
```
div.premuto li#premuto a,
li.premuto a:active,
li.premuto a:hover,
li.premuto a#active {
```
Zusammenfassend noch eine kurze Ausführung:
Die Konstande MENU_TITLE enthält den Inhalt des aktuellen Menüpunktes.
In der Menüausgabeschleife wird auch der Menüpunkt ausgegeben, hier $page['menu_title']
Es ist so, dass nur ein einziges mal der aktuelle Menüpunkt ausgegeben wird und wenn das der Fall ist, dann bekommt das betraffende A-Tag eine id="active".
die ID active kann jetzt per CSS formatiert werden.

Wenn Du im Hauptmenü zufällig zwei gleiche Namen haben solltest, würden beide eine id="active" bekommen. Das kann aber nicht passieren, so etwas wird schon von Website Baker verhindert.

Hoffe das hilft etwas.

Viele Grüße,

Daniel
vor 2 years veröffentlicht #
amesus

offline
Mitglied
Login to Send PM

Tönt schon mal gut. Ich werde es probieren und mich wieder melden.
Vorerst vielen Dank!

Habe es so eingebaut und klappt wunderbar. Again: Besten Dank!

vor 2 years veröffentlicht #

RSS feed for this topic

Antwort

Du musst angemeldet sein, um einen Beitrag zu schreiben.

Seitenanfang