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

问题

I'd like to use SemanticUI to display a sidebar in a small section of my page as an overlay. How can I do this?

I've tried to get the example they have on their home page working, but am missing something.... Thanks!

回答1:

You can try a working example here (JSFiddle)

Here's a dump of the same example running locally:

Use bower to install semantic-ui, and 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>

来源：https://stackoverflow.com/questions/35664906/semantic-ui-how-to-use-sidebar-in-only-part-of-a-page-ie-with-context

标签

semantic-ui