Semantic Sidebar and Dropdown Menu
I am trying to create a simple web ui with semantic ui.
I want the sidebar with the menu in it to have sub-items in some elements ... Shouldn't there be this hard hu?
<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 sidebar "flyout" sub-items above the normal page content? If you click Messages in this example, a menu appears (see the scroll bar at the bottom to display), but since they are children of the sidebar, they appear in the sidebar. But I want them to float above normal content! I was unable to get it to work via a script with z-index.
source to share
If the sidebar is set to use a transition overlay
, you can lock it by specifying
.ui.sidebar {
overflow: visible !important;
}
taken from here http://jsfiddle.net/59174tt1/2/
source to share
It is a combination of position: fixed and overflow on .ui.sidebar. This article might help: http://css-tricks.com/popping-hidden-overflow .
An alternative would be to use an accordion to keep everything in the sidebar.
source to share