语义UI将普通侧边栏最小化为图标侧边栏

Semantic UI Minimize normal sidebar to icon sidebar

本文关键字：侧边栏 最小化 图标 UI 语义      更新时间：2023-09-26

我正在尝试自定义语义ui边栏。我打算创建时，我点击切换按钮，它将最小化到标签(图标)之一。但它似乎没有动画，内容(推送内容)似乎没有被拉，当我最小化它的标签图标侧边栏。

HTML 

<div class="ui left demo vertical inverted visible sidebar menu">
    <a class="item">
        <i class="home icon"></i>
        Home
    </a>
    <a class="item">
        <i class="block layout icon"></i>
        Topics
    </a>
    <a class="item">
        <i class="smile icon"></i>
        Friends
    </a>
</div>
<div class="pusher">
  <a href="#" id="toggle-btn">Toggle</a>
</div>

JS 

$("#toggle-btn").click(function() {
  $(".ui.sidebar")
    .toggleClass("labeled icon");
});

这是依存关系:

http://codepen.io/andhikaribrahim/pen/rWNEzr

任何帮助将是伟大的!

结帐此 Codepen 。在.pusher上添加一个类，并使用jQuery相应地动画它。此外，使用CSS过渡插入动画。

参考

CSS: 

.ui.left {
  transition: width .2s linear;
}
.labeled.icon {
  width: 84px !important;
}
.pusher.push {
  transform: translate3d(84px,0,0) !important;
}

JS: 

$("#toggle-btn").click(function() {
  $(".ui.sidebar").toggleClass("labeled icon");
  $(this).parent().toggleClass('push');
});

希望这对你有帮助!

相关文章：