如何在點擊時更改漢堡菜單圖標？

-1

好吧，讓我有一個漢堡包風格的菜單，使用正常的3線圖標，但我喜歡它，所以當你點擊它時，圖標變爲十字。我將如何實現這一目標？我將如何構建JavaScript？如何在點擊時更改漢堡菜單圖標？

HTML：

<ul class="navigation"> 
    <li class="nav-item"><a href="#">Home</a></li> 
    <li class="nav-item"><a href="#">Meet the team</a></li> 
    <li class="nav-item"><a href="#">Blog</a></li> 
</ul> 

<input type="checkbox" id="nav-trigger" class="nav-trigger" onclick="menuChange()" /> 
<label for="nav-trigger"></label>

CSS：

.navigation { 
    /* critical sizing and position styles */ 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 0; 

    /* non-critical appearance styles */ 
    list-style: none; 
    background: #000; 
} 

/* Navigation Menu - List items */ 
.nav-item { 
    /* non-critical appearance styles */ 
    width: 200px; 

} 

.nav-item a { 
    /* non-critical appearance styles */ 
    display: block; 
    padding: 1em; 
    background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); 
    color: #999999; 
    font-size: 1.2em; 
    text-decoration: none; 
    transition: color 0.2s, background 0.5s; 
} 

.nav-item a:hover { 
    color: #ffffff; 
} 

/* Nav Trigger */ 
.nav-trigger { 
    /* critical styles - hide the checkbox input */ 
    position: absolute; 
    clip: rect(0, 0, 0, 0); 
} 

label[for="nav-trigger"] { 
    /* critical positioning styles */ 
    position: fixed; 
    left: 15px; top: 15px; 
    z-index: 2; 

    /* non-critical apperance styles */ 
    height: 30px; 
    width: 30px; 
    cursor: pointer; 
    background-image: url(../images/Menu.png); 
    background-size: contain; 
} 

/* Make the Magic Happen */ 
.nav-trigger + label, .site-wrap { 
    transition: left 0.2s; 
} 

.nav-trigger:checked + label { 
    left: 215px; 
} 

.nav-trigger:checked ~ .site-wrap { 
    left: 200px; 
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.5); 
}

Check it out.

來源

2016-03-27 Jack Sewell

也許[這]（http://codepen.io/collection/cyAnw/）可以幫助您。如果沒有，你可以創建一個**工作** [代碼片段]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）或bin這個？ –

您是否在尋找Javascript或jQuery的介紹，或者您是否嘗試過一些代碼？如果你有，發佈你迄今爲止的嘗試。 –

我認爲更好的解決方案是使用一個事件中倒塌的菜單，而不是onclick造成的。

show.bs.collapse - 在show方法被調用後觸發。

shown.bs.collapse - 將等待CSS過渡完成

hide.bs.collapse - 時觸發隱藏實例方法被調用。

hidden.bs.collapse - 將等待CSS過渡完成

代碼看起來像這樣：

$('.navigation').on('show.bs.collapse', function() { 
    // set cross as content of menu button 
}); 

$('.navigation').on('hide.bs.collapse', function() { 
    // set tree lines as content of menu button 
});

來源

2016-03-27 13:25:19 h0nzan

如何在點擊時更改漢堡菜單圖標？

回答

相關問題