将移动导航从左到右移动

-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。 –

将移动导航从左到右移动

回答

相关问题