Semantic-ui: How the sidebar works

Created on 10 Jul 2014 · 11Comments · Source: Semantic-Org/Semantic-UI

Hi everyone,

I have read the documentation for sidebar but I did not understand how that is working.
I need an right fixed sidebar. please anyone an example.

Moved to ProjectTalk Should Post to Forum - See Readme

Source

Hujjat

Most helpful comment

Kristian I thank you much! Translated to Pug your solution made my day.

bretonio on 2 Dec 2016

🎉2

All 11 comments

do not understand it either, bootstrap documentation is better understandable

ghost on 12 Jul 2014

👍2

I'm not sure it's answering correctly, but you have to:

Put the correct html somewere:

<div class="ui sidebar">
<div class="ui vertical menu">
  <div class="item">
    <div class="ui input"><input placeholder="Search..." type="text"></div>
  </div>
  <div class="item">
    <i class="home icon"></i> Home
    <div class="menu">
      <a class="active item">Search</a>
      <a class="item">Add</a>
      <a class="item">Remove</a>
    </div>
  </div>
  <a class="item">
    <i class="grid layout icon"></i> Browse
  </a>
  <a class="item">
    <i class="mail icon"></i> Messages
  </a>
  <div class="ui dropdown item">
    More <i class="dropdown icon"></i>
    <div class="menu">
      <a class="item"><i class="edit icon"></i> Edit Profile</a>
      <a class="item"><i class="globe icon"></i> Choose Language</a>
      <a class="item"><i class="settings icon"></i> Account Settings</a>
    </div>
  </div>
</div>
</div>

And then to open it you have to call:

$('.sidebar')
  .sidebar('toggle')

vinz243 on 12 Jul 2014

Any content can be used as a sidebar, just add class ui sidebar and activate it as described above.

http://semantic-ui.com/modules/sidebar.html#/usage

jlukic on 12 Jul 2014

Awesome answer vinz243 that worked for me

the boostrap sidebar is not as cool as semantic it is really cool. I am new to semantic-ui that's why I don't understand well. going to get familiar with..

thank's again for your answer.

Hujjat on 12 Jul 2014

You're welcome :)

Sur 12 juil. 2014 à 20:17, à 20:17, Hujjat [email protected] a écrit:

Awesome answer vinz243 that worked for me

the boostrap sidebar is not as cool as semantic it is really cool. I am
new to semantic-ui that's why I don't understand well. going to get
familiar with..

thank's again for your answer.

Reply to this email directly or view it on GitHub:
https://github.com/Semantic-Org/Semantic-UI/issues/945#issuecomment-48819766

vinz243 on 12 Jul 2014

Does anyone have a working example of this setup, either as a jsfiddle, repo or whatever?
I haven't been able to make this work either...

Trying something like this. In this example the sidebar itself acts as the toggle. How do I make that nice fixed menu button act as the toggle? How do I initially push the sidebar Off canvas (or essentially hide it)? This part of the docs could really use some more guidance and examples for these common scenarios...

<head>
  <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
  <script src="../dist/components/visibility.js"></script>
  <script src="../dist/components/sidebar.js"></script>
  <script src="../dist/components/transition.js"></script>

  <script type="text/javascript">
  $(function() {
    $('.sidebar')
      .sidebar('toggle');
  });
  </script>
</head>
<body>
   <!-- SIDE bar -->
  <div class="ui left inverted sidebar">
    <div class="ui vertical menu">
  ...
   </div>
   <!-- MAIN menu -->
   <div class="ui inverted menu">
    <div class="ui container">
      <div href="#" class="header item">
        <img class="logo" src="assets/images/logo.png">
        Project Name
      </div>
      <a href="#" class="item">Home</a>
  </div>
   <!-- MAIN content : pushed -->
  <div class="pusher">
    <div class="container content>
      ...
    </div>
  </div>
</body>

What if I want the top menu fixed? Now trying by adding button to toggle

  <script type="text/javascript">
  $(function() {
    $('.toggler').click(function() {
      $('.sidebar').sidebar('toggle');
    });
  });
  </script>

<div class="ui inverted menu">
    <div class="ui container">
      <div href="#" class="header item">
        Project Name
      </div>
      <div class="item">
        <div class="button toggler">Sidebar</div>
      </div>
     ...
  <div class="pusher">
    <div class="ui main text container">

Instead, when I click the Sidebar "button", it toggles like this:
The sidebar container gets the class visible and the pusher gets dimmed.
My inner pusher content is toggled visible/invisible while my sidebar is always visible and fixed in the top left corner! WTF!?

kristianmandrup on 7 Sep 2015

Finally managed a minimal example:

<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <!-- Site Properities -->
  <title>Semantic: Simple sidebar</title>
  <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="../dist/semantic.min.css"/>
  <script src="../dist/semantic.min.js"></script>
  <style media="screen">
    .toggler {
      cursor: pointer;
    }
  </style>
  <script type="text/javascript">
  $(function() {
    $('#show-sidebar').click(function() {
      $('#show-sidebar').hide();
      $('.menu.sidebar').sidebar('toggle');
    });

    $('#hide-sidebar').click(function() {
      $('#show-sidebar').show();
      $('.menu.sidebar').sidebar('toggle');
    });
  });
  </script>
</head>
  <body>
    <div class="ui left inverted vertical menu sidebar">
      <div class="item">
        <div id="hide-sidebar" class="button">
          <i class="sidebar icon"></i>
        </div>
      </div>
      <a class="item">
        Item 1
      </a>
      <a class="item">
        Item 2
      </a>
      <a class="item">
        Item 3
      </a>
    </div>
    <div class="pusher">
      <div id="show-sidebar" class="button toggler">
        <i class="sidebar icon"></i>
        Sidebar
      </div>      
      <!-- Site content !-->
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>
  </body>
</html>

Now just need to work on the fixed top menu.

kristianmandrup on 7 Sep 2015

Hi, thanks for posting your question.

Unfortunately, GitHub issues is specifically for bug reports and feature requests.

Since this post does not fit into that category, it has been moved to ProjectTalk boards, a special board for usage questions.

Please check out our contributing guide to learn how to modify your post so that it can be used effectively within a bug tracker.

If you want to be notified about an answer, please go to your ProjectTalk thread and set your email preferences.

projecttalk-issuebot on 10 Sep 2015

codepens have somewhat elaborate usages, although a comprehensive repo that implements over the top demonstration would be spectacular since for example using margin instead of padding will break the pusher which is required for fixed navbar with padding being iffy in component frameworks such as vue.js.