Frage Dropdown menu?

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

Luca Melop

Neues Mitglied
31 Oktober 2020
13
0
1
20
Hallo,

Ich habe ein Burger Symbol in meinen Code implementiert. Der eine coole Animation macht.
Wie kann ich ihn zu einem Dropdownmenu umwandeln?

Mein Code:

HTML:​

<div id="webapp_cover">
<div id="menu_button">
<input type="checkbox" id="menu_checkbox">
<label for="menu_checkbox" id="menu_label">
<div id="menu_text_bar"></div>
</label>
</div>
</div>

CSS:​


*
{
-webkit-tap-highlight-color: transparent;
}
*:focus
{
outline: none;
}
html, body
{
height: 100%;
}
body
{
margin: 0;
background-color: #0e3577;
}
#webapp_cover
{
position: absolute;
top: 50%;
right: 0;
left: 0;
width: 39px;
margin: 0 auto;
transform: translateY(-50%) scale(2);
}
#menu_button
{
width: 39px;
overflow: hidden;
}
#menu_checkbox
{
display: none;
}
#menu_label
{
position: relative;
display: block;
height: 29px;
cursor: pointer;
}
#menu_label:before, #menu_label:after, #menu_text_bar
{
position: absolute;
left: 0;
width: 100%;
height: 5px;
background-color: #fff;
}
#menu_label:before, #menu_label:after
{
content: '';
transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) left;
}
#menu_label:before
{
top: 0;
}
#menu_label:after
{
top: 12px;
}
#menu_text_bar
{
top: 24px;
}
#menu_text_bar:before
{
content: 'MENU';
position: absolute;
top: 5px;
right: 0;
left: 0;
color: #fff;
font-size: 12px;
font-weight: bold;
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
text-align: center;
}
#menu_checkbox:checked + #menu_label:before
{
left: -39px;
}
#menu_checkbox:checked + #menu_label:after
{
left: 39px;
}
#menu_checkbox:checked + #menu_label #menu_text_bar:before
{
animation: moveUpThenDown 0.8s ease 0.2s forwards, shakeWhileMovingUp 0.8s ease 0.2s forwards, shakeWhileMovingDown 0.2s ease 0.8s forwards;
}
@keyframes moveUpThenDown
{
0%{ top:0; }
50%{ top:-27px;}
100%{ top:-14px; }
}
@keyframes shakeWhileMovingUp
{
0%{ transform: rotateZ(0); }
25%{ transform:rotateZ(-10deg); }
50%{ transform:rotateZ(0deg); }
75%{ transform:rotateZ(10deg); }
100%{ transform:rotateZ(0); }
}
@keyframes shakeWhileMovingDown
{
0%{ transform:rotateZ(0); }
80%{ transform:rotateZ(3deg); }
90%{ transform:rotateZ(-3deg); }
100%{ transform:rotateZ(0); }
}
 

basti1012

Senior HTML'ler
26 November 2017
1.475
157
63
39
Minden
sebastian1012.bplaced.net
Möchtest du nur CSS benutzen oder auch Javascript?
Die meisten Programmierer versuchen es so weit es geht immer ohne Javascript zu coden.
Es gibt immer noch User, die kein Javascript aktiviert haben.
In dein Fall brauchst du ja nur ein fertiges Menü wo du deine Animation mit einbaust.
Sowas kannst du bei Codepen suchen
In deinen fall, könntest du es ja mal versuchen hier
Dein Burger einzubauen.
Das sollte für Anfänger kein Problem sein.
In beiden Scripten wird der Checkbox Hack benutzt, was das Einbauen erleichtert.
Falls du bei Codepen was anderes findest und es nicht hinbekommst, dann sag Bescheid
 
  • Like
Reaktionen: Luca Melop

Luca Melop

Neues Mitglied
31 Oktober 2020
13
0
1
20
Möchtest du nur CSS benutzen oder auch Javascript?
Die meisten Programmierer versuchen es so weit es geht immer ohne Javascript zu coden.
Es gibt immer noch User, die kein Javascript aktiviert haben.
In dein Fall brauchst du ja nur ein fertiges Menü wo du deine Animation mit einbaust.
Sowas kannst du bei Codepen suchen
In deinen fall, könntest du es ja mal versuchen hier
Dein Burger einzubauen.
Das sollte für Anfänger kein Problem sein.
In beiden Scripten wird der Checkbox Hack benutzt, was das Einbauen erleichtert.
Falls du bei Codepen was anderes findest und es nicht hinbekommst, dann sag Bescheid
Vielen Dank Basti!!!
 

Luca Melop

Neues Mitglied
31 Oktober 2020
13
0
1
20
Guten Tag

Ich habe alle Burger Buttons von Codepen ausprobiert, keiner geht. Ich habe übrigens Visual Studio Code
 

basti1012

Senior HTML'ler
26 November 2017
1.475
157
63
39
Minden
sebastian1012.bplaced.net
Was geht den daran nicht ?
Zeig doch mal ein Beispiel wie du es versucht hast ?

Ich konnte dein Script da einbauen was ich in #2 verlinkt hatte.

Du kannst ja auch erstmal leicht anfangen.
Du nimmst dein Code und erstellst dazu ein Mini Menü
Code:
  <ul id="menue">
    <li>LINK 1</li>
    <li> link 2 </li>
</ul>
etwas Css dazu
CSS:
#menu_checkbox:checked ~ ul{
  top:0;
  transitiom:all 100ms;
}
#menue{
  height:100px;
  position:absolute;
  z-index:1;
  top:-100px;
  width:100vw;
  background:red;
  display:block;
  transition: all 1000ms;
}

#menue li{
  width:100%;
  height:50px;
  font-size:40px;
  background:green;
}

und schon hast ein mini Dropdown
Ab da kannst du das ewig verlängern und so weiter
 
Zuletzt bearbeitet:
  • Like
Reaktionen: Luca Melop

Luca Melop

Neues Mitglied
31 Oktober 2020
13
0
1
20
Also ich habe den Code in ein neues Projekt importiert und dort ist es gegangen. Ich habe evtl. eine "ID" o. "Class" 2x verwendet.
Aber noch eine Andere Frage: Bei CodePen steht zB. neben HTML manchmal noch "(pug)" oder so etwas. Auch neben CSS steht etwas.(im CodePen Editor).
Was ist das?
 

basti1012

Senior HTML'ler
26 November 2017
1.475
157
63
39
Minden
sebastian1012.bplaced.net
Ich versuche es mal
Das sind bei HTML ,HTML-Präprozessoren wie PUG,SLIM, und HAML.
Unter einem Präprozessor versteht man ein Computerprogramm, das eingegebene Daten vorbereitet und zur Weiterverarbeitung an ein anderes Programm übergibt. Es existieren unter anderem Präprozessoren für CSS, HTML und JavaScript. Ein Ziel von Präprozessoren ist es, den Funktionsumfang, die Schreibweise und die Lesbarkeit des eingegebenen Codes zu verbessern.
Bei CSS gibt es z. B. LESS, SCSS und sass.
Bei Javascript ist Babel wohl das bekannteste.
Bei all den Beispielen wird im groben einfach eine andere Syntax benutzt.
Kuck dir hier mal die CSS an

Da ist es SCSS.
Klick mal auf das kleinen Pfeil nach unten.
Dann kannst du auf Format CSS klicken und ViewUncompliled SCSS.

Dann sollte der Code wieder als Standard CSS gezeigt werden.
Das geht mit Html und Javascript genau so.

Einige benutzen sowas, weil es bestimmte Syntax gibt, die das Programmieren vereinfachen.(wie Schleifen in der CSS oder Schleifen in HTML)
Man brauch dafür aber bestimmte Scripte die man einbinden muss damit der Browser die Syntax versteht ( zurück wandelt)
 
  • Love
Reaktionen: Luca Melop

basti1012

Senior HTML'ler
26 November 2017
1.475
157
63
39
Minden
sebastian1012.bplaced.net
Da meine erklärungen meistens fürn ... sind gebe ich dir mal ein Link
 
  • Like
Reaktionen: Luca Melop

basti1012

Senior HTML'ler
26 November 2017
1.475
157
63
39
Minden
sebastian1012.bplaced.net
Das sollte jeder selbst entscheiden.
Ich kenne nicht alle Vorteile , doch bei bestimmten sachen kann man Schleifen nutzen was 1000te von Zeilen Code sparen könnte.
Für Standart Webseiten , brauch man das meiner Meinung nach nicht.
Ich benutze das auch nicht , nur wenn mal einer hilfe brauchte habe ich da mal mit gearbeitet.
 
  • Like
Reaktionen: Luca Melop