引导 - 切换以图标

我想，当一个人点击橙色按钮，侧边栏缩小，只保留了图标可见。而对于移动应该完全收缩，当一个点击按钮只有图标应该是可见的。行为应该像this，但我不明白如何使其工作。

现在我有我的头：

<div class="navbar-header"> 
    <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#menu-toggle" onclick="toggle()"><i class="fa fa-bars"></i></a> 
    <a class="navbar-brand" href="#">...</a> 
</div>

但我不知道该怎么做，当一个单击它崩溃..谢谢

来源

2016-03-21 ayasha

能否请您发布的所有代码在你的导航栏。 – Wowsk

一定要调用触发jQuery或JavaScript中的切换功能的按钮类的确切名称。另外检查你的jQuery链接是否使用了确切的链接。否则它将无法工作。 – claudios

看看这个插件：http://www.jasny.net/bootstrap/components/#navmenu-offcanvas – Stephan

你可以分配2班粗略的方式（一个对于图标，一个用于相关文本），例如类“图标”和类“文本”，并且在按钮单击时，切换（隐藏并显示）具有类“文本”的元素。然后在回调中，您可以动画调整侧边栏的大小。

EDIT2：改进的例子

$('#togglebutton').click(function() { 
 
    if ($(window).width() > 500) { //your chosen mobile res 
 
     $('.text').toggle(300); 
 
    } else { 
 
     $('.menu').animate({ 
 
     width: 'toggle' 
 
     }, 350); 
 
    } 
 
});

.wrapper { width: 100% } 
 
.menu { 
 
     background: #222; 
 
     float: left; 
 
     display: block; 
 
} 
 

 
.icon { max-width: 1em } 
 

 
.menu ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0.2em 0.5em; 
 
} 
 

 
.menu li { margin: 0 } 
 

 
.menu a, .menu a:visited { 
 
     color: white; 
 
     text-decoration: none; 
 
} 
 

 
.text { 
 
     display: inline; 
 
     margin: 0; 
 
} 
 

 
.content { display: block; } 
 

 
button { margin: 1em; } 
 

 
@media only screen and (max-width: 500px) { 
 
    .text { 
 
     display: none; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li> 
 
     <a href="#"> 
 
      <img class="icon" src="http://bit.do/iconUrl"> 
 
      <p class="text">Text 1</p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <img class="icon" src="http://bit.do/iconUrl"> 
 
      <p class="text">Text 2</p> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="content"> 
 
    <button id="togglebutton">&#9776;</button> 
 
    </div> 
 
</div>

希望它是有我的建议的总体思路是有用的。

来源

2016-03-21 10:43:09 CalCon

现在更清楚了......但是如何重现OP在链接文章中描述的行为？ – Stephan

你的意思是“__...移动应该完全缩小... _”，用CSS媒体查询，.text类应该隐藏在一定的分辨率宽度下 – CalCon

我的意思是：从你的代码片段，如何创建一个像这样的例子：http://webapplayers.com/inspinia_admin-v2.5/widgets.html# – Stephan

您可以创建一个“off canvas”边栏，然后使用Bootstrap的响应式实用程序类来切换图标的显示。

<div class="wrapper"> 
     <div class="row row-offcanvas row-offcanvas-left"> 
      <!-- sidebar --> 
      <div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar"> 
       <ul class="nav" id="menu"> 
        <li><a href="#"><i class="glyphicon glyphicon-list-alt"></i> <span class="collapse in hidden-xs">Link 1</span></a></li> 
        <li><a href="#"><i class="glyphicon glyphicon-list"></i> <span class="collapse in hidden-xs">Stories</span></a></li> 
        <li><a href="#"><i class="glyphicon glyphicon-paperclip"></i> <span class="collapse in hidden-xs">Saved</span></a></li> 
        <li><a href="#"><i class="glyphicon glyphicon-refresh"></i> <span class="collapse in hidden-xs">Refresh</span></a></li> 
       </ul> 
      </div> 

      <!-- main right col --> 
      <div class="column col-sm-9 col-xs-11" id="main"> 
       <a href="#" data-toggle="offcanvas" class="btn btn-default"><i class="fa fa-navicon"></i></a> 
       <p> 
        content... 
       </p> 
      </div> 
     </div> 
</div>

http://www.codeply.com/go/ecE6qHNBOC

来源

2016-03-21 13:50:30 ZimSystem

引导 - 切换以图标

回答

相关问题