Archiv-Modus von Basti1012 Lösungspage

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.

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>

basti1012.bplaced.net

Breakpoint für mobile menu mit jQuery ? 2

Code