Like this one http://vadikom.github.io/smartmenus/src/demo/ but vertical and Bootstrap-style? I am not so good in css to remake it to Bootstrap style (too much css code).
Thanks
Just add data-hover="dropdown" where you'd put data-toggle="collapse".
Update: Sorry I did not understand when you said vertical but now I think I do. So the below will give you a horizontal collapse but you can use that as part of your vertical menu.
You would need to create two tables. One table holds all your buttons/links and the other collapses and un-collapses the panel. For example if you have 10 buttons on the left hand table (10 rows , 1 col). You would have 10 collapsible panels in the right hand-side table which would give the impression of a vertical menu. At least that's how I would attempt it :)
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Related
I am new to semantic UI (and web development in general) and am looking to implement a design like this:
So to be clear: The bar with icons is always there, the labels for the icons appear only when the mouse is over the menu bar somewhere; label rectangle hoovers over the site content and it does not stretch from top to bottom.
Can anyone give me a tip on how to accomplish this?
Menu/icon bar can be a sidebar that is always visible I guess:
<div class="ui visible left thin sidebar borderless vertical icon menu">
<a class="item">
<i class="search icon"></i>
// Would like label text here
</a>
..etc
</div>
But I don't see anything that can help me with the labels/popup and preferably have the definition of that text in the same item.
Any help greatly appreciated!
As nice as Semantic UI is, we now decided that it not the right framework for us. We are building an technical application, not a regular website, which is all custom design and we would run into issues like this all the time. #Michael: thanks for answering!
I have a list of items in my footer. For desktop I'd like it to just be a simple list group. For mobile, I want just the titles to show but the actual list items should be collapsed in an accordion. Is there a way to do that or do I need to create two separate versions, one for mobile and one for desktop?
It seems that you must use two codes
Because you are using bootstrap accordion and it have many selector such as id="accordion" role="tablist" , data-toggle="collapse" data-parent="#accordion" and etc
You must separate you codes
http://getbootstrap.com/javascript/#collapse-example-accordion
I got this to work by doing using a collapsible list-group and a script to show it collapsed for mobile but expanded for desktop.
http://www.bootply.com/cTsrC18csm
The Semantic UI Dropdown documentation gives examples of dropdowns that open to the left and right. However, all of the examples given show a parent dropdown that opens downwards, with the items of that dropdown being themselves dropdown which open to the left or the right. I am trying to create a vertical menu, each element of which is a dropdown that opens to the right. The vertical menu itself should not be a dropdown. I have tried many combinations of arranging the menu, right, dropdown classes and I simply cannot get it to work. Is it possible?
OK, I've discovered that Semantic will do this automatically if you place your dropdowns in a vertical menu:
<div class="ui vertical menu">
<div class = "ui dropdown item">
<span class="text">Prompt</span>
<div class="item">...</div>
...
I've got a form tool with two lists and a set of tools between them that is laid out in three columns on larger screens like so...
<div class="row">
<div class="col-md-5">
AVAILABLE LIST (1)
</div>
<div class="col-md-2">
MOVEMENT BUTTONS (2)
</div>
<div class="col-md-5">
SELECTED LIST (3)
</div>
</div>
... as you can see, for the xs and sm viewports, the layout should switch to a full width stacked list. What I would like to do is to swap the positions of the MOVEMENT BUTTONS and SELECTED LIST columns on those smaller view ports so that the tools are the last row (1-2-3 => 1-3-2).
The problem I'm having is that when I add classes like col-xs-pull-* col-sm-pull-* to the SELECTED LIST, and col-xs-push-* col-sm-push-* to the MOVEMENT BUTTONS columns, the buttons column dissapears and the selected list is out of alignment. I've tried corresponding col-*-push/pull values of 1 (because anything should swap them when they're full width, shouldn't they?) and 12 (just in case), both have the same unintended result.
How can I apply push/pull modifier classes to the two columns in question to achieve reordered stacking on xs and sm viewports?
One important thing to realize about Twitter Bootstrap is that they take a mobile-first design mindset. This means that classes that apply to extra-small screens will apply all the way up to large screens unless you overload them.
This is also true for the push and pull classes. So what you need to do is layout the buttons the way you intend for them to be in a small screen and then push/pull them in larger screens to where you want them.
In other words, put the buttons in your HTML where you want them in small screens and use the push/pull medium classes to move them in larger screens.
Edit
I've created a Bootply demonstrating the concept of pushing and pulling. See if that makes sense.
The gist of it is this:
<div class="col-md-5">
AVAILABLE LIST (1)
</div>
<div class="col-md-5 col-md-push-2">
SELECTED LIST (3)
</div>
<div class="col-md-2 col-md-pull-5">
MOVEMENT BUTTONS (2)
</div>
A push class moves an element to the right a number of columns and the pull class moves an element to the left a number of columns. For example, if you want to switch two elements, the first of size 3 and the second of size 6, you will need to push the first 6 columns and pull the second 3 columns, effectively switching their positions.
I have a jsp page with a menu bar in the top portion of the page and a table on the bottom portion of the page. The menu bar is expanded with menu items (<ul>) that contains a list of items. The table on the bottom portion has a header row like this:
<td style='text-align:center; position:relative; vertical-align:middle;'>
<span style="position:absolute;top:0;right:0;">
<img title="Close" alt="Close Column" src='<%=servernamepath%><%=closeButtonPath %>' />
</span><span style="width:100%;clear:both;"></span>
<b><a title="Sort" href="javascript: setSortableFieldAndSubmit('field1');" tabindex="80">Field1</a></b>
</td>
And the issue that I'm facing right now is if the list of items in the menu is large enough such that the list of items goes down and reaches the header row of the table (or go pass the header row), it will be hidden behind it; the header column appears in front of the item in the menu list. I thought adding z-index to the header row would fix the issue but that didn't work. Is there something that I'm missing in the CSS portion?
You had the right idea with the z-index property, but it should be set both for your header row and your bottom table, otherwise I don't think it's going to work properly.
I made a fiddle with part of your example with two tables, and one getting bigger and displayed above the other when you hover over it.
You might also be interested with this article explaining very well how it works.