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?
/
<div class="ui vertical menu sidebar teal">
<div class="menu">
<a class="item" target="_blank" href=".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.
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/ycm8ctfx/
<div class="ui vertical menu sidebar teal">
<div class="menu">
<a class="item" target="_blank" href="http://semantic-ui./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.
Share Improve this question edited Mar 5, 2018 at 16:11 Matze 5,5087 gold badges49 silver badges69 bronze badges asked Nov 27, 2014 at 14:14 Tobias BoschekTobias Boschek 2,2583 gold badges19 silver badges23 bronze badges2 Answers
Reset to default 10if sidebar is configured to use overlay transition it can be fixed by specifying
.ui.sidebar {
overflow: visible !important;
}
taken from here http://jsfiddle/59174tt1/2/
It's the bination of position:fixed and overflow on .ui.sidebar. This article might help: http://css-tricks./popping-hidden-overflow.
An alternative might be to use an accordion to keep everything within the sidebar.