Menüleiste mit Unterpunkten erstellen

soylenz · 11 Oktober 2019

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 :-)

basti1012 · 11 Oktober 2019

soylenz schrieb:
Da dies nicht in CSS möglich ist wurde ich auf Java verwiesen.

doch das geht auch mit Javascript , kuck mal nach Stichwort Checkboxhack.
Außerdem heißt das Javascript und nicht Java. Da gibt es große unterschiede

soylenz · 11 Oktober 2019

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 :)

basti1012 · 11 Oktober 2019

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.

Problem bei der Erstellung eines responsive Menüs mit html/css ohne Javascript

Kannst du mal deinen Code bei Codepen posten ?. Das ist einfacher wenn man das sieht wie du es bis hetzt gemacht hast . zu frage 3. Ja zur andere Seite einblenden. Wo kommt der Pfeil her ohne Sonderzeichen ?. Ja , das habe ich zwar so auch noch nicht gesehen , aber ist nee coole Idee. Der...

www.html.de

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 ?

soylenz · 14 Oktober 2019

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;
}

basti1012 · 15 Oktober 2019

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

basti1012 · 15 Oktober 2019

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.