✔ Aktive Menübuttons und Submenübuttons

D

dAx123

Grünschnabel
hallo zusammen,

bin eigentlich ganz neu (privat) in dieser branche tätig und interessiere mich total dafür.

zu meinen problem:
ich wollte mir eine navigation basteln die mit mouseover ein anderes bild lädt. soweit so gut, dass kann ich schon, nur hab ich ein problem dass dieser button nie aktiv bleibt. kann mir jemand sagen wie ich solche mousover buttons bei klick auch aktiv lasse, damit man sieht auf welcher seite man grad ist. die restlichen buttons sollten aber den mouseover effekt haben und beim nächsten klick auf einen menüpunkt sollte dieser aktiv sein.

desweiteren wollte ich noch fragen wie ich so eine subnavigation mit mouseover (ein und ausblenden) kann, ich seh es immer auf diversen seiten versteh aber nicht wie das gemacht wird ;)

ist das noch html oder geht das schon in andere programmiersprachen hinein?

ich bitte um hilfe, will mir sowas gern aneignen, verstehe es so aber nicht so ganz :)
hoffe mir kann da einer weiterhelfen wäre super nett.

danke und mfg dAx123
 
Also für das SubMenu brauchste auf jedenfall Javascript ungefähr wie hier!?

Und dass die zur Zeit sichtbare Seite "markiert" ist, kannste zum Beispiel machen mit PHP, Javascript und HTML. Wobei wenn du jede Seite in ner eigenen HTML Datei hast, könnteste jedesmal manuell ein anderen Look diesem Menü Punkt verpassen. Am besten wärs hier zu wissen, wie du zur Zeit halt deine Seite aufgebaut hast.
 
Zuletzt bearbeitet:
hi, danke für die rasche antwort.

da ich php und javasrcipt eig. nicht kann ist die seite einfach in html gebaut worden.
könnte man wie ich hier schon gesehen habe mir so einen code zeigen wie das eingebaut aussieht?

danke und mfg
 
Also jetzt als Beispiel haste zB 3 Dateien:
dat1.html dat2.html und dat3.html

Und die Menüs der einzelnen Seiten sehen aus:
dat1.html
HTML: 
<html>
<head>
<style type="text/css">
.menuItem{
border:1px red solid;
}
.menuItem_selected{
border:1px red solid;
backgroundColor:blue;
}
</style>
</head>
<body>
<div id="menu">
<a href="dat1.html" class="menuItem_selected">PUNKT1</a>
<a href="dat2.html" class="menuItem">PUNKT2</a>
<a href="dat3.html" class="menuItem">PUNKT3</a>
</div>
</body>
</html>

dat2.html
HTML: 
<html>
<head>
<style type="text/css">
.menuItem{
border:1px red solid;
}
.menuItem_selected{
border:1px red solid;
backgroundColor:blue;
}
</style>
</head>
<body>
<div id="menu">
<a href="dat1.html" class="menuItem">PUNKT1</a>
<a href="dat2.html" class="menuItem_selected">PUNKT2</a>
<a href="dat3.html" class="menuItem">PUNKT3</a>
</div>
</body>
</html>

dat3.html
HTML: 
<html>
<head>
<style type="text/css">
.menuItem{
border:1px red solid;
}
.menuItem_selected{
border:1px red solid;
backgroundColor:blue;
}
</style>
</head>
<body>
<div id="menu">
 <a href="dat1.html" class="menuItem">PUNKT1</a>
 <a href="dat2.html" class="menuItem">PUNKT2</a>
 <a href="dat3.html" class="menuItem_selected">PUNKT3</a>
 </div>
</body>
</html>
 
danke für die hilfe

die bilder verändern sich aber mit mouseover auch schon oder jetzt nur wenn sie angeklickt worden sind?

ps: wie würde das denn aussehen wenn ich das mit bildern und nicht mit css mache? verändert sich am code großartig was?
 
So reagieren die gar nicht weiter auf Maus Interaktionen sondern zeigen nur halt welche Datei grad geöffnet sind.
Ich würd dir aber empfehlen für Mauseffekte, dass du dir doch mal Javascript angucken solltest. Weil Javascript ist in Sachen Effekten doch sehr praktisch.

Bei Bildern würde das dann so aussehen:
Menü von dat1.html
<div id="menu">
<a href="dat1.html"><img src="selected.jpg"/></a>
<a href="dat2.html"><img src="unselected.jpg"/></a>
<a href="dat3.html"><img src="unselected.jpg"/></a>
</div>
 
Hi!
dAx123 hat gesagt.:
desweiteren wollte ich noch fragen wie ich so eine subnavigation mit mouseover (ein und ausblenden) kann
Zum Vergrößern anklicken....
SCIPIO-AEMILIANUS hat gesagt.:
Also für das SubMenu brauchste auf jedenfall Javascript
Zum Vergrößern anklicken....
Seit wann denn das?

SCIPIO-AEMILIANUS hat gesagt.:
Also jetzt als Beispiel haste zB 3 Dateien:
dat1.html dat2.html und dat3.html

Und die Menüs der einzelnen Seiten sehen aus:
dat1.html
HTML: 
<html>
<head>
<style type="text/css">
.menuItem{
border:1px red solid;
}
.menuItem_selected{
border:1px red solid;
backgroundColor:blue;
}
</style>
</head>
<body>
<div id="menu">
<a href="dat1.html" class="menuItem_selected">PUNKT1</a>
<a href="dat2.html" class="menuItem">PUNKT2</a>
<a href="dat3.html" class="menuItem">PUNKT3</a>
</div>
</body>
</html>

dat2.html
HTML: 
<html>
<head>
<style type="text/css">
.menuItem{
border:1px red solid;
}
.menuItem_selected{
border:1px red solid;
backgroundColor:blue;
}
</style>
</head>
<body>
<div id="menu">
<a href="dat1.html" class="menuItem">PUNKT1</a>
<a href="dat2.html" class="menuItem_selected">PUNKT2</a>
<a href="dat3.html" class="menuItem">PUNKT3</a>
</div>
</body>
</html>

dat3.html
HTML: 
<html>
<head>
<style type="text/css">
.menuItem{
border:1px red solid;
}
.menuItem_selected{
border:1px red solid;
backgroundColor:blue;
}
</style>
</head>
<body>
<div id="menu">
 <a href="dat1.html" class="menuItem">PUNKT1</a>
 <a href="dat2.html" class="menuItem">PUNKT2</a>
 <a href="dat3.html" class="menuItem_selected">PUNKT3</a>
 </div>
</body>
</html>
Zum Vergrößern anklicken....

Das geht auch viel bequemer mit Highlighting current page with CSS.

@dAx123: Und an dich hab ich als neues Mitglied unserer Community die Bitte, die Netiquette zu lesen, und zukünftig in deinen Forenbeiträgen auf die erwünschte Groß- und Kleinschreibung zu achten (siehe Punkt 15). Vielen Dank! :)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück