+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Css (https://javascript-forum.de/forumdisplay.php?fid=7)
+--- Thema: Responsives Hamburgermenü (/showthread.php?tid=484)
Responsives Hamburgermenü - admin - 18.04.2022
Ich habe mal dein Code genommen und ein fast neuen rausgemacht, mit dem Ziel deine Vorlage einzuhalten.
Hier ist das Ergebnis,und sag mal Bescheid ob du noch was geändert haben willst
Dazu der komplette Code
PHP-Code:
<?php
<!DOCTYPE html>
<html lang="de">
<head>
<title>Hamburger</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
background-color: black;
margin: 0;
padding: 0;
font-family: "Maven Pro" !important;
width: 100%;
max-width:1920px;
}
*{
margin:0;
padding:0;
}
.Logos >*{
padding: 10px;
}
#AKA {
width: 23%;
margin-left: 10px;
}
#AI {
width: 23%;
margin-right: 10px;
float: right;
}
#Bild ,#Hauptbild{
width:100%;
display: block;
height:200px;
}
h1 {
color: #242424;
position: relative;
bottom: 80px;
font-size: 2.4em;
margin-right:22px;
text-align:right;
}
nav ,.auf{
display:block;
}
nav,ul{
display:flex;
width:100%;
}
nav ul li {
flex:1;
margin-left: 0px;
border:1px solid red;
opacity: 0.5;
}
nav ul li:hover {
opacity: 1;
}
li {
list-style: none;
}
a {
display: block;
width:100%;
padding-top:9px;
text-decoration:none;
color: white;
font-size:1em;
height: 30px;
}
.gruen {
border-left: #C1DE1D 45px solid;
}
.hellblau {
border-left: #00FFC6 45px solid;
}
.tuerkis {
border-left: #00C3FF 45px solid;
}
.blau {
border-left: #0000FF 45px solid;
}
.lila {
border-left: #8903FF 45px solid;
}
.pink {
border-left: #FF007E 45px solid;
}
.rot {
border-left: #FF0000 45px solid;
}
.orange {
border-left: #F79300 45px solid;
}
.gelb {
border-left: #FFFF00 45px solid;
}
section {
display: block;
width: 50%;
text-align:center;
margin: 200px auto;
color: white;
height:640px;
}
p {
border-left: #C1DE1D 4px solid;
border-right: white 1px solid;
padding-left: 1em;
font-size:1.4em;
height:100%;
}
#hamicon{
display:none;
}
@media only screen and (max-width:980px) {
h1 {
color:#242424;
text-align: center;
font-size: 1.8em;
width:100%;
}
#hamicon{
display:block;
width:80px;
height:80px;
display:block;
opacity:0.5;
cursor:pointer;
transition:opacity 1500ms;
}
#hamicon>.eins,.zwei,.drei{
width:100%;
height:15px;
border-radius:5px;
display:block;
margin-bottom:10px;
background:red;
}
.einsauf{
transform-origin:0% 100%;
transform:rotate(-20deg);
transition:all 1000ms;
}
.einszu{
transform-origin:0% 100%;
transform:rotate(0deg);
transition:all 1000ms;
}
.eins{
background:red;
}
.zwei{
background:blue;
}
.drei{
background:yellow;
}
#hamicon:hover {
opacity: 1;
transition:opacity 1500ms;
}
.weg{
display:none;
}
.da{
display:block;
}
nav{
display:none;
}
nav,ul{
width:70%;
margin:0 auto;
height: 650px;
display:flex;
flex-direction:column;
}
nav li{
margin-bottom:30px;
text-align:center;
}
nav a {
text-align: center;
font-size: 1.2em;
height: 35px;
padding: 0.5em;
}
.gruen {
border: #C1DE1D 3px solid;
}
.hellblau {
border: #00FFC6 3px solid;
}
.tuerkis {
border: #00C3FF 3px solid;
}
.blau {
border: #0000FF 3px solid;
}
.lila {
border: #8903FF 3px solid;
}
.pink {
border: #FF007E 3px solid;
}
.rot {
border: #FF0000 3px solid;
}
.orange {
border:orange 3px solid;
}
.gelb {
border: #FFFF00 3px solid;
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header>
<div class="Logos">
<img id="AKA" src="https://www.html-seminar.de/forum/ws/attachment/1627-logo1-png/">
<img id="AI" src="https://www.html-seminar.de/forum/ws/attachment/1626-logo2-png/">
</div>
<div class="Hauptbild">
<img id="Bild" src="https://www.html-seminar.de/forum/ws/attachment/1624-001-png/">
<h1>Headline</h1>
</div>
<div id="nav-menue">
<div id="hamicon">
<div class="ham1 eins"></div>
<div class="ham1 zwei"></div>
<div class="ham1 drei"></div>
</div>
<nav class="zu weg">
<ul>
<li class="gruen"><a href="01.html">01</a></li>
<li class="hellblau"><a href="02.html">02</a></li>
<li class="tuerkis"><a href="03.html">03</a></li>
<li class="blau"><a href="04.html">04</a></li>
<li class="lila"><a href="05.html">05</a></li>
<li class="pink"><a href="06.html">06</a></li>
<li class="rot"><a href="07.html">07</a></li>
<li class="orange"><a href="08.html">08</a></li>
<li class="gelb"><a href="09.html">09</a></li>
</ul>
</nav>
</div>
</header>
<section>
<div>
<h2>Test</h2>
<p>
fff<br>
fff<br>
zzz<br>
zzzz<br>
eeeee<br>
fffff
</p>
</div>
</section>
<script>
$('#hamicon').click(function(){
ff=$('.eins').hasClass('einszu');
if(ff==true){
$('.eins').removeClass('einszu');
$('.eins').addClass('einsauf');
$('nav').removeClass('weg');
$('nav').addClass('da');
}else{
$('.eins').removeClass('einsauf');
$('.eins').addClass('einszu');
$('nav').removeClass('da');
$('nav').addClass('weg');
}
})
</script>
</body>
</html>
RE: Responsives Hamburgermenü - admin - 18.04.2022
Hallo Basti, super, danke!!!!
Ich hab ewig herum gedoktort dass diese Menüleiste sich mitskaliert und wahrscheinlich hab ich mir selbst Fallstricke reingeschrieben.
Dabei sind es ja nur diese Flex-Einträge :-) *Erleuchtung*
Kann man das mit der Schrift auch machen - also dass die sich mitskaliert via flex oder "macht" man das nicht so, sondern dann "Schrittweise" über mediaQueries?
mit jquery hab ich mich noch nicht auseinandergesetzt, aber werde das jetzt als Startpunkt nehmen.
Eine Frage noch zu einem Eintrag:
nav ,.auf {
display: block;
}
dieses ".auf" bezieht sich doch auf eine Klasse im HTML Dokument, aber im HTML finde ich nichts was so definiert ist. Oder ist das ein Befehl was durch ein Komma vor dem Punkt definiert wird?
Nochmal viiiiieeeelen Dank! Du hast mir sehr geholfen!!!!
Liebe Grüße
Andrea
RE: Responsives Hamburgermenü - admin - 18.04.2022
PHP-Code:
<?php
nav ,.auf {
display: block;
}
Was meinst du den mit der Schrift skalieren.
Je kleiner das Fenster und so kleiner soll die Schrift sein ?
Das kann man mit @media queries machen ,was bzw welche Schrift soll den wachsen und schrumpfen ? Nur aus der Navigation oder was hast du dir gedacht.
RE: Responsives Hamburgermenü - admin - 18.04.2022
>Je kleiner das Fenster und so kleiner soll die Schrift sein ?
ja
>Das kann man mit @media queries machen ,was bzw welche Schrift soll den wachsen und schrumpfen ? Nur aus der Navigation oder was hast du dir gedacht.
Ja die NavLeiste und auch noch Texteinträge unter Section.
Dachte dass man das so wie die Bilder "stufenlos" skalieren kann - hatte es auch schon mit "vw" probiert aber die Schriftgröße hat dann nicht in Relation zum Bild (was sich aber auch an die Broswergröße anpaßt) mitskaliert.
Aber vielleicht ist dann die Lösung mit media queries am sinnvollsten bzw oder eine Schriftgröße die vielseitig nutzbar ist.
RE: Responsives Hamburgermenü - admin - 18.04.2022
Das mit er Schrift ist auch nicht immer so einfach ,ich htte da auch schon öfters probleme mit. Ich werde aber später mal mich dran setzen und dieses Script mal anpassen ,zumindest versuchen. Kuck mal morgen wieder rein vieleicht habe ich es bis dahin fertig.
Nur jetzt ist es mir zu warm hier in westdeutschland