有沒有辦法在自舉中將導航欄切換按鈕添加爲屏幕上的固定按鈕？

我想添加圖片中給出的導航欄切換按鈕
Desired Button
在我的html頁面中。有沒有辦法在自舉中將導航欄切換按鈕添加爲屏幕上的固定按鈕？

然而，自舉讓我們創建按鈕選項，如本
Current Button

我不希望任何正常的按鈕，並特別希望第一個圖像。有沒有辦法做到這一點？

來源

2015-11-30 Meghna Natraj

梅格納這樣的事情？ http://i.imgur.com/k3ndWus.jpg – roxid

是的！像那種永久存在的東西。用於「開關代碼」的JavaScript已經制作完畢，所以我只需要CSS或使用現有引導代碼的方法。我現在可以使用現有的菜單圖標（），但是如果我可以有圖標，我會相應地修改代碼。 –

@MeghnaNatraj你還有這個問題還是解決了？ –

最終答案已分解爲2個部分：最初的代碼是在工作。並使用了最終結果。兩者都可以用來創建一個看起來像「導航欄切換」按鈕的菜單圖標。但總是固定在屏幕上！

初步試驗CODE

利用了<span>如在自舉。
定位在右上角。
CSS針對（可以改變顏色）和響應。

.ham-menu, .ham-menu span { 
 
    -webkit-transition: all 500ms ease-out; 
 
    -moz-transition: all 500ms ease-out; 
 
    -o-transition: all 500ms ease-out; 
 
    transition: all 500ms ease-out; 
 
    cursor: pointer; 
 
} 
 

 
.ham-menu {border: 2px solid #666; width: 32px; padding: 1px; border-radius: 3px; position: absolute; right: 5px; top: 5px; } 
 
.ham-menu .line {border: 3px solid #666; line-height: 0; font-size: 0; display: block; margin: 2px;} 
 
.ham-menu .line.small {border-width: 2px;} 
 

 
.ham-menu:hover {border-color: #99f;} 
 
.ham-menu:hover span {border-color: #ccf;}

<div class="ham-menu"> 
 
    <span class="line"></span> 
 
    <span class="line small"></span> 
 
    <span class="line"></span> 
 
</div> 
 
<p>Hover and See</p>

當屏幕尺寸小（這兩個切換按鈕可見

當屏幕尺寸是大的（左切換圖標仍然）

來源

2015-11-30 22:34:35

有沒有辦法在自舉中將導航欄切換按鈕添加爲屏幕上的固定按鈕？

回答

相關問題