CODEWITHSUNDEEP
javascriptjquerysemantic-ui
Tobias Boschek
Tobias Boschek

Reputation: 2258

Semantic UI Sidebar & Dropdown menu

I am trying to create a simple web ui with semantic ui.

I want a sidebar with a menu in it in some items will have subitems... Shouldn't be that hard hu?

http://jsfiddle.net/ycm8ctfx/

<div class="ui vertical menu sidebar teal">
   <div class="menu">
   <a class="item" target="_blank" href="http://semantic-ui.com/modules/dropdown.html">
     Example
   </a>
   <div class="ui left pointing dropdown link item">
      <i class="dropdown icon"></i>
      Messages
     <div class="menu">

How do I get the sub-items to "fly-out" of the sidebar over the normal page content? If you click "Messages" within the example, the menu will appear (watch the scrollbar at the bottom to appear) but since those are children of the sidebar, they are being shown within the sidebar. But I want them to float over the normal content! I didn't get it to work via fiddle with the z-index.

Upvotes: 11

Views: 9116

Answers (2)

mike123
mike123

Reputation: 1559

if sidebar is configured to use overlay transition it can be fixed by specifying 

.ui.sidebar {
    overflow: visible !important;
}

taken from here http://jsfiddle.net/59174tt1/2/

Upvotes: 10

user4304937
user4304937

Reputation:

It's the combination of position:fixed and overflow on .ui.sidebar. This article might help: http://css-tricks.com/popping-hidden-overflow.

An alternative might be to use an accordion to keep everything within the sidebar.

Upvotes: 1

Related Questions