將移動導航從左到右移動

-1

我正在嘗試從左上角移動移動導航，並從左側滑入右側。我試圖從左到右更改位置設置，但它不起作用。我會很感激任何幫助！將移動導航從左到右移動

下面的代碼，謝謝！

#wrapper { 
 
    position: absolute; 
 
    width: auto; 
 
    min-width: 60px; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 

 
label { 
 
    cursor: pointer; 
 
} 
 

 
&:focus { 
 
    outline: none; 
 
} 
 

 
.menu { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: #fff; 
 
    width: 240px; 
 
    height: 100%; 
 
    transform: translate3d(-240px, 0, 0); 
 
    transition: transform 0.35s; 
 
} 
 

 
label.menu-toggle { 
 
    position: absolute; 
 
    right: -60px; 
 
    width: 60px; 
 
    height: 60px; 
 
    line-height: 0px; 
 
    display: block; 
 
    padding: 0; 
 
    text-indent: -9999px; 
 
    background: transparent url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) 50% 50%/25px 25px no-repeat; 
 
} 
 

 
label.active { 
 
    background: transparent url(menu-cross.png) 50% 50%/25px 25px no-repeat; 
 
} 
 

 
ul li>label { 
 
    background: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png) 95% 50%/16px 16px no-repeat; 
 
} 
 

 
a, 
 
label { 
 
    display: block; 
 
    text-align: left; 
 
    padding: 0 30px; 
 
    line-height: 60px; 
 
    text-decoration: none; 
 
    margin: 0 auto; 
 
    color: #000; 
 
} 
 

 
&:hover { 
 
    color: #666; 
 
} 
 
    
 
.menu-checkbox{ 
 
    display: none; 
 
} 
 

 
    
 
.menu .menu label.menu-toggle { 
 
    background: none; 
 
}  
 

 
.menu-checkbox:checked + .menu { 
 
    transform: translate3d(0, 0, 0); 
 
}

<div id="wrapper"> 
 
    <input type="checkbox" id="menub" name="menu" class="menu-checkbox"> 
 
    <div class="menu"> 
 
    <label class="menu-toggle" for="menub"><span>Toggle</span></label> 
 
    <ul> 
 

 
     <li> 
 
     <a href="">link</a> 
 
     </li> 
 
     <li> 
 
     <a href="">link</a> 
 
     </li> 
 
     <li> 
 
     <a href="">link</a> 
 
     </li> 
 

 
    </ul> 
 
    </div> 
 
</div> 
 
<!-- #wrapper -->

來源

2017-03-16 hstur

也發佈你的html，所以我們有一個[mcve] –

@MichaelCoker在那裏，HTML添加 – hstur

謝謝。也請張貼您編譯的CSS。我們不應該爲你編譯它。 –

-1

相信你已經過於複雜你的任務。你可以簡單地在Visual Studio上打開新項目並從那裏開始。這將是最好的選擇，因爲你想達到的結果很可能是相同的。

現在，如果您確實想要堅持這一點，您必須仔細檢查您的樣式代碼，以及可能會阻止物品在右側對齊的原因。

來源

2017-03-16 19:26:17 hut

什麼？ Visual Studio如何與這個問題相關？ -1。 –

將移動導航從左到右移動

回答

相關問題