Navigation

[benbas39]

Hallo, ich habe eine Sidebar-Navigation.

Wie kann ich es machen, dass wenn man auf die Überschrift klickt also z.B

HAUPTTEST
test1
test2
test3

Wenn man auf HAUPTTEST klickt, soll sich test1,2,3 ausfahren?

LG

 

[Nitamud]

Mit einem Java-Script onClick- Eventhandler :-)

Bzw auch mit reinem CSS 3 ist soetwas schon möglich- http://designyourweb.info/so-erstellst-du-ein-vertikales-css3-accordion-menu/914

 

[benbas39]

Is das Javascript umständlicher, oder geht das mit ein paar Zeilen ?

 

[threadi]

Schau dir mal jQuery Accordion an. Da gibts sicher auch Beispiel zum Einbauen. Gestalten per CSS musst Du dann selber.

 

[benbas39]

Schau dir mal jQuery Accordion an. Da gibts sicher auch Beispiel zum Einbauen. Gestalten per CSS musst Du dann selber.

Möchte nicht so gerne JQ sowie das Accordion. Kann mir jemand ein Beispiel zu einer JS Function schreiben, die sich auf mein Problem bezieht ?

 

[threadi]

Siehe:
http://www.askingbox.de/tutorial/javascript-bereich-durch-link-aufklappen-und-zuklappen
http://alice-grafixx.de/JavaScript-Tutorial/Auf/Zu-klappen-159

 

[benbas39]

DANKE!!!!!!! FUNKTIONIERT DDDD

 

[benbas39]

Siehe:
http://www.askingbox.de/tutorial/javascript-bereich-durch-link-aufklappen-und-zuklappen
http://alice-grafixx.de/JavaScript-Tutorial/Auf/Zu-klappen-159

Hallo, nochmals kurz. Es klappt alles, ausser dass die Listen von Anfang an ausgeklappt sind. Wie kann ich das ändern ?

<script type="text/javascript">function toggle(control){
var elem = document.getElementById(control);if(elem.style.display == "none"){
elem.style.display = "block";}else{
elem.style.display = "none";}
}</script>

 

[threadi]

Indem Du die display-Eigenschaft im Element bereits auf none setzt.

 

[benbas39]

Indem Du die display-Eigenschaft im Element bereits auf none setzt.

Hi, klappt auch, nur dass es sich jetzt erst öffnet, wenn man das zweite mal drauf klickt. Kann mir jemand helfen LG

CSS

.staff_sidebar ul ul {
display: none;}

html:

<div class="staff_sidebar" ">
<ul>
<li><a href="javascript:toggle('1')">Überschrift</a>
<ul id="1">
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li> </ul>
</li> </ul></div>

JS

<script type="text/javascript">function toggle(control){
var elem = document.getElementById(control);if(elem.style.display == "none"){
elem.style.display = "block";}else{
elem.style.display = "none";}
}</script>

@threadi

 

[benbas39]

Hi, klappt auch, nur dass es sich jetzt erst öffnet, wenn man das zweite mal drauf klickt. Kann mir jemand helfen LG

CSS

.staff_sidebar ul ul {
display: none;}

html:

<div class="staff_sidebar" ">
<ul>
<li><a href="javascript:toggle('1')">Überschrift</a>
<ul id="1">
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li> </ul>
</li> </ul></div>

JS

<script type="text/javascript">function toggle(control){
var elem = document.getElementById(control);if(elem.style.display == "none"){
elem.style.display = "block";}else{
elem.style.display = "none";}
}</script>

@threadi

Wie gesagt, klappt man muss aber 2mal am Anfang draufklicken, ab dann funktioniert es. Wenn man die Seite reloaded, muss man wieder 2mal draufklicken, bis sich dadrann was tut.

 

[nookie]

Wie wäre es mit einem Link zu deiner Seite wenn vorhanden? So lässt sich dein Quellcode besser analysieren.

 

[benbas39]

Leider keinen. Ist aber genau der code, den ich geschrieben habe

 

[threadi]

Wenn Du es so schreiben würdest wie ich geschrieben habe, dann klappt das auch. Ich meinte:

<ul id="1" style="display: none;">

Wenn Du es auf deine Art machst, müsstest Du den ComputedStyle ermitteln, denn nur dann werden auch per externe CSS-Datei definierte Style-Eigenschaften ausgelesen werden können. Schau dich nach dem Stichwort um, dann sollte es dir klar werden.

 

[benbas39]

Wenn Du es so schreiben würdest wie ich geschrieben habe, dann klappt das auch. Ich meinte:

Wenn Du es auf deine Art machst, müsstest Du den ComputedStyle ermitteln, denn nur dann werden auch per externe CSS-Datei definierte Style-Eigenschaften ausgelesen werden können. Schau dich nach dem Stichwort um, dann sollte es dir klar werden.

Das war die Lösung :
<script type="text/javascript">function toggle(control){
var elem = document.getElementById(control);if(elem.style.display == "block"){
elem.style.display = "none";}else{
elem.style.display = "block";}
}</script>

vorher war es so :

<script type="text/javascript">function toggle(control){
var elem = document.getElementById(control);if(elem.style.display == "none"){
elem.style.display = "block";}else{
elem.style.display = "none";}
}</script>


Aber danke, für die Antworten!

 

[threadi]

Das wäre die Alternative, ja :)