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.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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>