Semantic UI Sidebar & Dropdown menu

javascript jquery semantic-ui
Tobias Boschek picture Tobias Boschek · Nov 27, 2014 · Viewed 7.9k times · Source

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.

Answer

mike123 picture mike123 · Jan 13, 2016

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/

Related questions

How to import jquery using ES6 syntax?

I'm writing a new app using (JavaScript) ES6 syntax through babel transpiler and the preset-es2015 plugins, as well as semantic-ui for the style. index.js import * as stylesheet from '../assets/styles/app.scss'; import * as jquery2 from '../dist/…

Read More
How to use custom callback in semantic-ui modal

I want to use more than 2 button in semantic-ui modal for feedback purpose as easy,normal and hard. And I also need to perform action according to button clicked. I know how to use approve and deny button (I can …

Read More
Semantic-UI loader inside <table>

I'm using ajax to update a table's contents, I would like to use the semantic-ui's built-in class "Loader" to show some loading animation at the center of the table while getting the contents but that does not seem to work …

Read More