✔ Sub-Nav Show/Hide

A

Andrin Spitzer

Mitglied
Guten Abend.

Erstmals ich bin ein JS Anfänger und hoffe durch eure Hilfe zulernen.

Zur zeit versuche ich eine Navigation zu erstellen mit 3 Buttons (Home, Produkte, Unternehmen) wen ich einer dieser Buttons drücke soll die dazugehörige sub-nav mit weiteren Buttons angezeigt werden.

zb. Ich drücke "Produkte" es erscheint die sub-nav "Produkte" drücke ich nun "Unternehmen" verschwindet die sub-nav "Produkte" und die sub-nav "Unternehmen" wird am selben Ort eingeblendet und wen ich auf "Home" drücke sollen beide divs verschwinden.
standardmäßig sollten die div's verborgen sein


HTML: 
<div id="nav">
<a class="home">home</a>
<a class="nav-button">produkte</a>
<a class="nav-button">unternehmen</a>
</div>
<div id="subnav-produkte" class="sub-nav">
asdaasdasfhdgfh
</div>
<div id="subnav-unternehmen" class="sub-nav">
asdaasdasfhdgfh
</div>

CSS: 
div{
  position: absolute;
  top: 0px;
  height: 2.2em;
  left: 0px;
  right: 0px;
  background-color: white;
  border-bottom: 1px solid lavender;
}

.nav-button {
  padding: 20px;
}

.nav-button:hover {
  border-left: 1px solid lavender;
  border-right: 1px solid lavender;
}

.sub-nav {
  position: absolute;
  top: 2.25em;
  height: 2.2em;
  left: 0px;
  right: 0px;
  background-color: red;
  border-bottom: 1px solid lavender;
}



Ich hoffe ihr versteht was ich meine und freue mich schon auf eure baldige Antwort.
 
Andrin Spitzer hat gesagt.:
ja das ust schon sehr nah an meinem gedanken aber kanst du mir vlt mit dem code helfen den so anzupassen das es meinen vorstellungen entspricht
Zum Vergrößern anklicken....
Damit die Submenüs an ein und derselben Stelle erscheinen, hat nichts mehr mit JavaScript zu tun, sondern ist eine Frage der CSS-Formatierung, um sie aus ihrem normalen Textfluß (unterhalb des Menüpunktes) zu nehmen.

Stichwörter position:absolute , top:.. , left:.. (oder alternativ right:.. , bottom:..)

[edit]Tipp-Ex[/edit]​
 
Zuletzt bearbeitet:
Andrin Spitzer hat gesagt.:
meinst du kannst du mir die nötige Funktion also das nötige Script raus schreiben :D ? das wäre total nett von dir.
Zum Vergrößern anklicken....
Lieber markieren, kopieren und einfügen, statt rausschreiben :p Und darf ich Dir in der Zwischenzeit ein Getränk kredenzen? :D

Suchst Du nach dem Code, weil kein (direkter) Download-Link existiert? Der steckt bei Stu's Demos immer (direkt) im Seitenquelltext :cool:

CSS u. JS in <head>...</head>, der relevante HTML-Code in <div id="content-demo">...</div>.

Im Beispiel von http://www.stunicholls.com/menu/pro_concertinaslide_3.html sind CSS u. JS ausgelagert:

Alles, was Du jetzt noch für Deine letzte Wunschvorstellung benötigst, die Submenüs am selben Platz ein- u. auszublenden, habe ich im letzten Post genannt.

Gern geschehen :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück