Semantic-ui

Question

我想使用 SemanticUI 在我的页面的一小部分显示侧边栏作为覆盖。我怎样才能做到这一点？

我已经尝试获取 the example they have on their home page working，但缺少一些东西....谢谢！

Answer 1

你可以try a working example here (JSFiddle)

这里是同一示例运行在本地的转储：

使用 bower 安装 semantic-ui 和 jquery.

test.html

<html>
  <head>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/semantic/dist/semantic.min.js"></script>
    <link rel="stylesheet" type="text/css" href="bower_components/semantic/dist/semantic.min.css">
  </head>
  <body>
    <div style="background:red; height:200px; width:100%;">
    Top content - should appear above the sidebar, like an app toolbar
    </div>
    <div id="app">
      <div class="ui left vertical inverted labeled icon 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>
        <a class="item">
            <i class="calendar icon"></i>
            History
        </a>
        <a class="item">
            <i class="mail icon"></i>
            Messages
        </a>
        <a class="item">
            <i class="chat icon"></i>
            Discussions
        </a>
        <a class="item">
            <i class="trophy icon"></i>
            Achievements
        </a>
        <a class="item">
            <i class="shop icon"></i>
            Store
        </a>
        <a class="item">
            <i class="settings icon"></i>
            Settings
        </a>
      </div>
      <div class="pusher">
        Your site's actual content
      </div>
    </div>

    <script>
    function toggleSidebar()
    {
      $('#app .ui.sidebar')
        .sidebar({context:$('#app')})
        .sidebar('setting', 'transition', 'overlay')
        .sidebar('toggle');
    }

    document.addEventListener("DOMContentLoaded", function() {
      toggleSidebar();
    });
</script>

  </body>
</html>

Semantic-ui - 如何只在页面的一部分使用侧边栏？ （即有上下文）

Semantic-ui - how to use sidebar in only part of a page? (ie with context)

test.html

Semantic-ui - 如何只在页面的一部分使用侧边栏？（即有上下文）