在html和css中右鍵菜單欄的樣式

我在嘗試使用右側欄有一個菜單的樣式。我正在使用div標籤。我得到的東西看起來很接近，但我不清楚如何在右欄中創建菜單div，該菜單div應該包含旋轉的菜單項div。這張圖解釋了我的意思。右側欄是透明的，以便下面的主頁面內容可見。我想用Javascript動畫欄div，但已經完成了。在html和css中右鍵菜單欄的樣式

目前，我在我的CSS

#menu_list { 
    top: 0; 
    left: 0; 
    padding: 0 0; 
    text-align: center; 
    transform-origin: center top; 
    transform: translateX(-50%) translateY(300%) rotate(-90deg); 
} 
#menu_list p { 
    color: #fff; 
    line-height: 20px; 
    display: inline-block; 
} 

#right_bar { 
     position: fixed; 
     top: 0; 
     bottom: 0; 
     right: 0; 
     width: 30%; 
     overflow: auto; 
     padding: 0; 
}

和HTML

<div id="bar_wrapper" onclick="toggleMenu()"> 
<div> 
<div id="menu_list"> 
    <p>Info</p> 
    <p>About</p> 
</div> 
<div style="width:30%; height:100%; position:fixed; top:0; right:0; bottom:0;"> 
<h4> 
    Info 
</h4> 

</div> 
</div> 
</div>

但是，像我已經嘗試過其他的東西，並不完全做到這一點。

來源

2016-09-18 highsciguy

要創建一個正確的酒吧來的div，你可能只需要'position：absolute'同時指定'left'。然而，很難說，因爲你沒有提供任何代碼或任何你已經嘗試過的例子。請參閱[如何創建示例]（http://stackoverflow.com/help/mcve）。爲了旋轉文本，你需要'transform'屬性，不幸的是在每個瀏覽器中都有不同的屬性。見[這裏]（https://css-tricks.com/snippets/css/text-rotation/）。 –

我遇到的一些麻煩似乎與文字的旋轉有關。如果這太尷尬，一個有效的選擇可能是將菜單項包含爲svg圖像。 – highsciguy

在默認導航欄上使用css transform屬性。

#div_name { 
-ms-transform: rotate(-90deg); 
-webkit-transform: rotate(-90deg); 
transform: rotate(-90deg);

}

但我認爲這不會看responsive.but看起來完全一樣像你想

enter image description here

來源

2016-09-18 11:46:10

不完全確定你的意思。哪個是'div_name'？ – highsciguy

我已經添加了一個Image .hope它會幫助你div_name意味着navbar div的名稱對不起被清除。 –

試試這個：

jsfiddle.net/TiG3R/bLksqtpw

爲旋轉導航欄你應該旋轉導航欄div不旋轉製表符，看看例子

來源

2016-09-18 13:03:08

謝謝。當我將旋轉菜單嵌套在正確的div div中時，會出現問題。不知何故，我無法在這些條件下獲得正確的位置。 – highsciguy

如果我粘貼你的代碼，替換引用的'menu_list' div，navbar是不可見的（在屏幕之外）。 – highsciguy

你應該改變你的班級，如果你需要這個ID再次添加它，試試這個：http://jsfiddle.net/TiG3R/bLksqtpw/1/ |它爲我工作，我只是給你主要的代碼，並學習如何旋轉你的導航欄，我可以創建你的網站！ |如果它適合你，請接受答案 –

在html和css中右鍵菜單欄的樣式

回答

相關問題