• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

soylenz

Neues Mitglied
Moin! :)

ich habe das Problem das ich gerne eine vertikale Menüleiste hätte, welche mir auf 'klick' die Unterpunkte der jeweiligen 'Hauptleiter' einblendet.
Da dies nicht in CSS möglich ist wurde ich auf Javascript verwiesen.
Ich bin ein Laie wenn es um Javascript geht. Weswegen ich wahrscheinlich auch nichts gefunden habe was mir weiterhilft. Also Pardon wenn die Frage schon 100x gestellt wurde :)
Ich würde das Javascript gerne direkt in die html einbinden, mehr wünsche habe ich nicht. Ich hoffe du kannst mir helfen.

Vielen lieben Dank im Voraus!



Gruß,
Lena :-)
 
Zuletzt bearbeitet:
Werbung:
Danke für den Hinweis! Checkboxhack hatte ich mir im Vorfeld angeschaut, es passt Optisch nicht zu den Wünschen aufgrund der Checkbox. Deswegen frage ich nach einen Javascript für mein Problem :)
 
Zuletzt bearbeitet:
Werbung:
Die Checkbox sieht man doch gar nicht mehr wenn man es fertig gemacht hat.
Kuck mal in den Thema. Da wollte auch einer das mit anklicken machen .
Wie du sehen kannst sieht man da keine Checkboxen.

wenn es unbedingt javascript sein soll dann zeig doch mal dein Code denn du schon hast .
Zumindest den html und css weil js hast dunoch nix gemacht oder ?
 
Zuletzt bearbeitet:
Hey Basti,
das ist genau das Prinzip was ich wollte, wenn es auch ohne Javascript geht, dann gerne!
Das ist meine bisherige Errungenschaft. Die Unterordner bei "work" und "+++" sollen dann auf Klick die untergeordneten Punkte öffnen. Könntest du mir eventuell auf die Sprünge helfen? du scheinst fit zu sein
Das ist jetzt alles natürlich noch wild durcheinander, nicht erschrecken.


html:
<html>
<head>
<title>sapadi</title>
<meta name="author" content="lena">
<link rel="stylesheet" href="css/Design.css" type="text/css">
</head>
<body>
<div id="Portfolio">
<div id="header">
<h1>
<hr>
sapadi
<hr>
</h1>
</div>
<div id="main">
<ul>
<li>work
<ul>
<li a href="#">negative painting</li>
<li a href="#">100 collages</li>
<li a href="#">early works</li>
</ul>
</li>
<li>+++
<ul>
<li a href="#">info</li>
<li a href="#">contact</li>
<li a href="#">imprint</li>
</ul>
</li>
</ul>


</div>
<div id="inhalt">
</div>
<div id="footer">

</div>
</body>
</html>



css:
body{
background-color: white;
text-align:left;
font: "Baskerville Old Face";
}
#portfolio {
width:980px;
margin:0 auto;
}
#header{
width:980px;
height:100px;
background-color:#C1ECF1;
margin-top:10px;
margin-bottom:10px;
}
#header hr,hr{
width: 13%;
height: 1px;
color: #030003;
background: #F3E1CF;
}
}
#header h1{
padding-top:45px;
font-size:25px;
color:#040307;
font-family: Baskerville Old Face;
font-weight:100;
}
#main{
width:980px;
}
#menue{
float:left;
width:130px;
height:700px;
margin-top:10px;
margin-bottom:10px;
background-color: #2EEEEF;
}
#menue h1{
font-family: Baskerville Old Face;
font-size:23px;
text-align: left;
font weight: 500;
}
#menue h2{
font-family: Baskerville Old Face;
text-align: left;
font-size:27px;
font weight: 500;
}
#inhalt {
float: right;
width:780px;
height:700px;
margin-top:10px;
margin-bottom:10px;
background-color: #F3D0EE;
}
 
Zuletzt bearbeitet:
jo moin.
Als erstest mußt du dein html richtig machen sonst wird das nix.
Code:
<li a href="#">info</li>
sollte dann so sein
Code:
<li><a href="#">info</a></li>
Das ist das was sofort auffallen tut.
Den rest kucke ich jetzt mal genauer an
 
Werbung:
Bei der CSS hast du im HTML
Portfolio großgeschrieben und in der CSS dann klein.
Wie und wann die groß und Kleinschrift nicht beachtet werden brauch weiß ich nicht genau , doch wo ich es gleich geschrieben hatte kam sofort eine Änderung zustande.
An besten darauf achten, dass es immer gleich geschrieben ist, dann kann man nicht viel falsch machen.
Deine CSS solltest du mal unbedingt ändern auf Flexbox.
Das ganze float muss dann nicht mehr sein.
Was hast du eigentlich mit den <hr> Elemente vor?
Ein body float left zugeben finde ich vollkommen umnutz, weil du dann alles, was nach rechts soll oder in der Mitte wieder zurück floaten musst.

Also guck dir bitte flexbox an
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Da ich nicht genau weiß wie du es haben willst ,habe ich mal versucht das etwas zu sortieren.
Deine Checkboxen sind da jetzt auch drinnen.



Wenn du mit deinen CSS nicht weiter kommst, dann sag Bescheid, aber mit Flexbox ist das einfacher
 
Zuletzt bearbeitet:
Zurück
Oben