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

Frage Dropdown menu?

Luca Melop

Neues Mitglied
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); }
}
 
Werbung:
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
 
Zuletzt bearbeitet:
Werbung:
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!!!
 
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:
Werbung:
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?
 
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)
 
Werbung:
Da meine erklärungen meistens fürn ... sind gebe ich dir mal ein Link
 
Werbung:
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.
 
Zurück
Oben