Breakpoint für mobile menu mit jQuery ? 2

Guten Tag, auf meiner Seite wird das Menü mit einer jQuery(function($) aufgerufen. Ich möchte vorher abfragen, ob: @media only screen and ( max-width: 768px ) dann soll eine andere funktion aufgerufen werden.

Der hier verwendete Code

<html> <head> <style> *{ margin:0; padding:0; } .slide-in-open{ cursor: pointer; position:fixed; top:0; height:30px; width:30px; border:1px solid black; left:0; } .line{ display: block; position: absolute; height: 3px; width: 30px; background: #ad9262; border-radius: 9px; opacity: 1; transition: .1s ease-in-out; } .line-2 { top: 10px; } .line-3 { top: 20px; } #aufzu{ position:absolute; left:-20000px; } #aufzu:checked ~ .slide-in-open .line-1 { top: 10px; transform: rotate(135deg); } #aufzu:checked ~ .slide-in-open .line-2 { display: none; } #aufzu:checked ~ .slide-in-open .line-3 { top: 10px; transform: rotate(-135deg); } #aufzu:checked ~ .slide-in-menu-container{ left: 0 !important; opacity: 1 !important; } .slide-in-menu-container { position:absolute; top:30px; background:#123456; height:200px; border:2px solid black; width:200px; left:-204px; transition: all 0.5s ease !important; } .slide-in-menu-container ul li{ heigtht:30px; width:100%; border-bottom:1px solid grey; list-style:none; } .slide-in-menu-container ul li a{ font-size:25px; text-align:center; text-decoration:none; color:white; border-bottom:1px solid grey; list-style:none; } @media only screen and (min-width: 768px) { .slide-in-menu-container{ left:0; } label{ display:none; } } </style> </head> <body> <input type="checkbox" id="aufzu"> <label for="aufzu" class="slide-in-open"> <div class="line line-1"></div> <div class="line line-2"></div> <div class="line line-3"></div> </label> <div class="slide-in-menu-container"> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!