Sidebar Menü mit jQuery

Könnten Sie mir helfen, diesen Code unten zu verbessern ?! Ich bin versucht, ein Sidebar-Menü mit jQuery zu arbeiten, aber ich weiß, wo ich bin do't schief läuft ... geht hier meine Codes:Sidebar Menü mit jQuery

html: 
    <!DOCTYPE html> 
    <html lang="PT-BR"> 
     <head> 
     <meta charset="utf-8"> 
     <title>Teste Menu c Javascript</title> 
     <link rel="stylesheet" href="css/style.css"> 
     <link href="/js/jquery-3.2.0.min.js"> 
     </head> 
     <body> 
     <div class="sidebar"> 
     <ul> 
      <h2>Menu</h2> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
     </div> 
     <div class="nav"> 
      <img src="images/menu-icon.jpg" width="30px;" class="menu-bar"/> 
     </div> 
     <script src="js/script.js"></script> 
    </body> 
    </html> 

css: 
    body{ 
    margin: 0; 
    } 

    .sidebar{ 
    position: absolute; 
    width: 250px; 
    height:100%; 
    background: #333; 
    color: white; 
    font-family: arial; 
     outline: 1px solid #2a2a2a; 
    } 

    .sidebar h2{ 
    text-align: center; 
    margin: 0; 
    padding: 10px; 
    background: #2a2a2a; 
    } 

    .sidebar ul{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    } 

    .sidebar li{ 
    outline: 1px solid #2a2a2a; 
    transition: all 0.3s; 
    } 

    .sidebar li:hover{ 
    background: #444; 
    border-left: 5px solid #eee; 
    } 

    .sidebar a{ 
    text-decoration: none; 
    color: white; 
    display: block; 
    padding: 10px; 

    } 
    .nav{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    background: white; 
    padding: 30px; 
    transition: all 0.3s; 

    } 

    .menu-bar{ 
    cursor: pointer; 
    } 

    .open{ 
    transform: translateX(250px); 
    } 

js: 

    $('.menu-bar').on('click', function(){ 
    $('.nav').toggleClass('open'); 
    });

Ich weiß nicht, ob das Problem der jquery ist Link oder etwas anderes ...

Quelle

2017-04-06 Jansen Mendonça

Ihr Code ist nicht ganz korrekt. Aus einer semantischen Sicht sollten das h2-Tag und nichts innerhalb des ul-Tags und außerhalb eines li-Tags bleiben.

Hier einfaches Beispiel:

dieses Beispiel wird die css translate3d Funktion, die auf GPU läuft und nicht auf CPU, das ist eine gute Sache für Performance-Probleme.

https://jsfiddle.net/c4hjhbp4/

html

<div class="nav"> 
    <button id='show-hide-menu'> 
    Menu 
    </button> 
</div> 
<div class="sidebar-container"> 
    <div class="sidebar" id='sidebar'> 
    <h2>Menu</h2> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
    </div> 
</div>

Javascript (jQuery)

$('#show-hide-menu').click(function() { 
    if ($('#sidebar').hasClass('visible')) { 
    $('#sidebar').removeClass('visible'); 
    } else { 
    $('#sidebar').addClass('visible'); 
    } 
});

Css

body, html { 
    margin: 0; 
    padding: 0; 
} 
.sidebar-container { 
    position: relative; 
    width: 0; 
    height: 0; 
} 

.sidebar { 
    position: absolute; 
    width: 230px; 
    height: 400px; 
    background: #ccc; 
    transform: translate3d(-230px,0,0); 
    transition: transform 0.5s; 
}`enter code here`

Quelle

2017-04-06 20:23:02

Sidebar Menü mit jQuery

Antwort

Verwandte Themen