Question

我是HTML / CSS / JS的新手，我已经开始实现语义UI。我正在努力学习文档，因为它似乎更适合更有经验的用户。

我正在尝试创建一个包含两个侧边栏菜单的单页面应用程序，一个位于左侧，另一个位于右侧。我希望默认情况下隐藏正确的一个，并在单击按钮时可见。我希望它显示在内容的顶部而不是向左推。我希望默认情况下右手菜单出来，但可以通过按下按钮进行折叠。以下是我已经得到的，这是关闭但右侧菜单仍然将右侧菜单中的内容推出。还有一个叠加层，称为暗淡。我猜测我必须拼命地编写JS并使用onClick调用它，然后允许我进一步定义菜单的设置，但我不确定如何最好地执行此操作。任何帮助都会非常感激，因为我已经为此做过很多现在几个小时。

这是我尝试实现的一个很好的例子：http://egemem.com/theme/kode/v1.1/blank.html

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="semantic/out/semantic.min.js"></script>

<!-- RIGHT MENU -->
<div class="ui left sidebar menu inverted vertical">
    <a class="item">1</a>
    <a class="item">2</a>
    <a class="item">3</a>
</div>

<!-- RIGHT MENU -->
<div class="ui right sidebar menu inverted vertical dimm">
    <a class="item">1</a>
    <a class="item">2</a>
    <a class="item">3</a>
</div>

<div class="pusher">

<!-- BODY -->
<button id="sidebar_left_toggle" onclick="$('.ui.left.sidebar').sidebar('toggle');">
  show sidebar
</button>

<button id="sidebar_right_toggle" onclick="$('.ui.right.sidebar').sidebar('setting', 'transition', 'overlay').sidebar('toggle');">
  show sidebar
</button>

</div>

Answer 1

我终于在找到另一个问题的答案后自己解决了这个问题。这是我决定的，以防它帮助一个初学者。

<!-- LEFT MENU -->
<div class="ui left vertical inverted sidebar menu visible">
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
</div>

<!-- RIGHT MENU -->
<div class="ui right vertical inverted sidebar menu">
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
</div>

<div class="pusher">

<div class="ui container">
  <!-- BODY -->
     <button id="left-sidebar-toggle">
        show sidebar
     </button>

     <button id="right-sidebar-toggle">
        show sidebar
     </button>
 </div>

 </div>

 <script>

 $('.ui.left.sidebar').sidebar({
 dimPage: false,
 transition: 'push',
 exclusive: false,
 closable: false
 });

 $('.ui.left.sidebar')
 .sidebar('attach events', '#left-sidebar-toggle');

 $('.ui.right.sidebar').sidebar({
 dimPage: false,
 transition: 'overlay',
 exclusive: false,
 closable: false
 });

 $('.ui.right.sidebar')
.sidebar('attach events', '#right-sidebar-toggle');

</script>

在语义UI侧边栏中苦苦挣扎

1 个答案: