有没有办法在自举中将导航栏切换按钮添加为屏幕上的固定按钮？

我想添加图片中给出的导航栏切换按钮
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

有没有办法在自举中将导航栏切换按钮添加为屏幕上的固定按钮？

回答

相关问题