Menüleiste mit Unterpunkten erstellen

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

soylenz

Neues Mitglied
11 Oktober 2019
3
0
1
19
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:

soylenz

Neues Mitglied
11 Oktober 2019
3
0
1
19
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:

basti1012

Senior HTML'ler
26 November 2017
1.035
110
63
38
Minden
sebastian1012.bplaced.net
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:

soylenz

Neues Mitglied
11 Oktober 2019
3
0
1
19
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:

basti1012

Senior HTML'ler
26 November 2017
1.035
110
63
38
Minden
sebastian1012.bplaced.net
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

Senior HTML'ler
26 November 2017
1.035
110
63
38
Minden
sebastian1012.bplaced.net
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 zu stande.
An besten drauf achten das 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 unnutz weil du dann alles was nach rechts soll oder in der mitte wieder zurück floaten mußt.

Also kuck 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 drinne.

https://codepen.io/basti1012/pen/eYYZGoz

Wenn du mit deinen Css nicht weiter kommst dann sag bescheid, aber mit Flexbox ist das einfacher
 
Werbung:

Latest posts