jQueryを使ったサイドバーメニュー

このコードを以下のように改善できますか？ jQueryを使ってサイドバーのメニューを仕事にしよう - 私が、私は間違っている... は、ここに私のコード行く - 私は行く場所がわからdo't：私は問題はjqueryのであれば知っているドント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'); 
    });

をリンクなど何か...

出典

2017-04-06 Jansen Mendonça

あなたのコードは完全ではありません。意味論的観点から見ると、h2タグは、ulタグ内とliタグの外側にとどまるべきではありません。

ここでは簡単な例では：

この例では、GPU上で動作していないCPU上で、これがパフォーマンスの問題のために良いことですCSS translate3d機能を、使用しています。

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`

出典

2017-04-06 20:23:02

jQueryを使ったサイドバーメニュー

答えて

関連する問題