I am creating a side navigation bar using CSS only. I was able to trigger dropdown menus using checkbox triggers:
[type="checkbox"] {
display: none;
&:checked ~ div
{
display: block;
}
}
HTML Structure:
<ul>
<li>
<input type="checkbox" id="chk1">
<label for="chk1">Dropdown 1</label>
<div class="dropnav">
.. list of sub menu
</div>
</li>
<li>
<input type="checkbox" id="chk2">
<label for="chk2">Dropdown 1</label>
<div class="dropnav">
.. list of sub menu
</div>
</li>
<li>
<input type="checkbox" id="chk3">
<label for="chk3">Dropdown 1</label>
<div class="dropnav">
.. list of sub menu
</div>
</li>
</ul>
So as you can see when the checkbox is 'checked' the next sibling div element will be display: block to show the dropdown menus, and it's working. However I have multiple dropdown menus and I would like close other dropdown menus when one of them was open. For example if I trigger the 'chk1' it will open its sibling 'dropnav' menu then the other 'dropnav' will be closed (display: none). Is this possible for a CSS only solution?
Use type radio with the same names instead of checkboxes:
[type="radio"] {
display: none;
}
.dropnav {
display: none;
}
[type="radio"]:checked~div {
display: block;
}
<ul>
<li>
<input type="radio" name="c" id="chk1">
<label for="chk1">Dropdown 1</label>
<div class="dropnav">
.. list of sub menu
</div>
</li>
<li>
<input type="radio" name="c" id="chk2">
<label for="chk2">Dropdown 1</label>
<div class="dropnav">
.. list of sub menu
</div>
</li>
<li>
<input type="radio" name="c" id="chk3">
<label for="chk3">Dropdown 1</label>
<div class="dropnav">
.. list of sub menu
</div>
</li>
</ul>
Related
Best described by example.
I have two issues that I couldn't solve after hours of researching.
1) Stop HTML separating a single li content. For example, we can see that Group C heading in rendered in the first column, and the rest is rendered in the second.
2) Render the OK button so that it is out of the ul - in the left or right corner of the drop-down room.
<div>
<span style='cursor:pointer; float:right'>
<div class="btn-group pull-right">
<button id = 'majic' type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span>
</button>
<ul style='padding:10px; width:auto' class="dropdown-menu zeon-search-settings-dropdwown-menu zeon-two-columns-ul">
<li class="dropdown-submenu zeon-dropdown-submenu">
<div class='section-heading-3'>Group A</div>
<div>
<label class='zeon-input-label'>
<input id="white_agreements_filter" type="checkbox" name="vehicle" checked class='zeon-checkbox' />Choice</label>
</div>
<div>
<label class='zeon-input-label'>
<input id="black_agreements_filter" type="checkbox" name="vehicle" checked class='zeon-checkbox' />Choice</label>
</div>
</li>
<li class="dropdown-submenu zeon-dropdown-submenu">
<div class='section-heading-3'>Group B</div>
<div>
<label class='zeon-input-label'>
<input id="cash_payment_filter" type="checkbox" name="vehicle" checked class='zeon-checkbox' />Choice</label>
</div>
<li class="dropdown-submenu zeon-dropdown-submenu">
<div class='section-heading-3'>Group C</div>
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-7">
<form>
<label class="radio-inline">
<input type="radio" name="optradio">
< </label>
<label class="radio-inline">
<input type="radio" name="optradio">=
</label>
<label class="radio-inline">
<input type="radio" name="optradio">>
</label>
</form>
</div>
<div class="col-sm-4">
<input class="form-control input-sm" id="inputsm" type="text" placeholder='количетсво дней'>
</div>
</div>
</li>
<li class="dropdown-submenu">
<div class='section-heading-3'>Group D</div>
<div>
<label class='zeon-input-label'>
<input id="full_package_filter" type="checkbox" name="vehicle" checked class='zeon-checkbox' />Choice</label>
</div>
<div>
<label class='zeon-input-label'>
<input id="not_full_package_filter" type="checkbox" name="vehicle" checked class='zeon-checkbox' />Choice</label>
</div>
</li>
<li class="dropdown-submenu">
<button id='vendor_list_filter_ok_button' type="button" class="next btn btn-default btn-sm pull-left">ОК</button>
</li>
</ul>
</div>
</span>
</div>
You can use flexbox for that (You can play with the height of the ul.dropdown-menu, if you add more height the group-c block will move to the left column)
This is the added css:
.open>ul.dropdown-menu {
display: flex;
width: 400px !important;
flex-wrap: wrap;
flex-direction: column;
height: 250px;
}
ul.dropdown-menu li {
width: 50%;
}
Here is the working jsfiddle:
https://jsfiddle.net/p6yf17du/
Update
If you don't care (or if you can change the markup) about the order of the elements you can use:
.open>ul.dropdown-menu {
display: flex;
width: 400px !important;
flex-wrap: wrap;
}
This will change the order of your elements from
A | C
B | D
to
A | B
C | D
However, this way you don't need to set the height of the menu (only the width, which makes sense to me).
You can check here:
https://jsfiddle.net/m0rg1uoe/
You can try to solve this issue adding to last <li> element the column-span property. Applying this rule with value all it will force the last <li> element to cover all the columns.
For example see the following code:
HTML:
...
<li class="dropdown-submenu btn-confirm">
<button id='vendor_list_filter_ok_button' type="button" class="next btn btn-default btn-sm pull-left">ОК</button>
</li>
...
CSS:
.btn-confirm {
-webkit-column-span: all;
column-span: all;
}
Once that last element cover both columns, also Group C heading will displayed correctly.
You can find a live demo here.
Attention: column and column-span properties have some issues in different browsers. See caniuse website and check browsers support.
Try This
.zeon-dropdown-submenu {
margin-top: 10px;
min-height: 100px;
}
I want to use foundation button groups and have my own styling, but i don't know how to set up the custom style foe chosen button
I have this:
.format-button-group {
#include button-group-container(
$styles:true
);
.format-group { #include button; }
}
How can I set up "active" button styles for the one that was clicked?
You can do it with radio group http://jsfiddle.net/vDyK2/
html:
<ul class="button-group round">
<li>
<input type="radio" id="btn1" name="btn">
<label for="btn1" class="small button secondary">Ipsum</label>
</li>
<li>
<input type="radio" id="btn2" name="btn">
<label for="btn2" class="small button secondary">Dolor</label>
</li>
<li>
<input type="radio" id="btn3" name="btn">
<label for="btn3" class="small button secondary">Sit amet</label>
</li>
</ul>
css:
input[type="radio"]{
display:none;
position:absolute;
}
.small.button.secondary{
margin:0;
}
input[type="radio"]:checked + label{
background-color: rgb(0, 114, 149);
}
I'm not well versed in front end web design or CSS. Using a pre-made template from Foundation, however my code for a search button is not aligning like the example button.
Using this template: http://foundation.zurb.com/templates/workspace.html
Can someone tell me how I can move the search button to the right as in pic where the blue button is located?
This is what I am using now:
<input type="submit" value="Search" style="float: right;">
Fiddle: Search button code
<ul class="right">
<li class="search">
<li class="has-button">
/* Original template form */
{#<form>#}
{#<input type="search">#}
{#</form>#}
/* My form with code */
<form action="{{ path('sym_corp_search') }}" method="GET">
<label><input type="search" name="q" value={{ app.request.query.get('q') }}></label>
<input type="submit" value="Search" style="float: right;">
</form>
</li>
</li>
/* Original form button in blue */
<li class="has-button">
<a class="small button" href="#">Search</a>
</li>
Using the foundation classes, you can manage to perform this layout with your own inputs, your code will look like this:
<ul class="right">
<form action="{{ path('acme_demo_search') }}" method="GET">
<li class="search">
<label><input type="search" name="q" value="{{ app.request.query.get('q') }}" /></label>
</li>
<li class="has-button">
<input type="submit" value="Search" class="small button" />
</li>
</form>
</ul>
You have to use margin property like margin-left:50%; or more and you can also use ... tag but it will make button position to center. float:right is can be used in div, Not in button.
Move your button in a div :<div id="mybtn"><input type="submit" value="Search"></div> add CSS : #mybtn {float : right;display : inline-block;}
I have an html page given below
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
</div>
<div data-role="content">
<div class="content-primary">
<form id="frm1">
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="Name">name:</label>
<input type="text" Name="Name" id="Name" value="" />
</li>
<li data-role="fieldcontain">
<label for="No">no:</label>
<input type="text" No="No" id="No" value="" />
</li>
<li data-role="fieldcontain">
<label for="countryName">Country name:</label>
<input type="text" countryName="countryName" id="countryName" value="" />
</li>
<li data-role="fieldcontain">
<label for="stateName">State name:</label>
<input type="text" stateName="stateName" id="stateName" value="" />
</li>
<li data-role="fieldcontain">
<label for="cityName">City name:</label>
<input type="text" cityName="cityName" id="cityName" value="" />
</li>
</form>
</div>
</div>
</body>
and i am using the following jquery 1.3.2 links displayed in the link given
http://jquerymobile.com/download/
and i have css file given below
.ui-body-c { background:#FFFFFF !important; }
.ui-page .ui-header {
background:#0B0B3B !important;
}
.ui-page .ui-footer {
background:#0B0B3B !important;
}
When i am using the above code the list which is displayed contains grey color.
how will i get white color instead grey to the list displayed.
Thanks in advance
I can't actually test this but I have noticed oddities like this before when a css rule is defined as background-color: and you try to override with just background:
Try changing your rule to say background-color: instead. Also, if you can help it, stay clear of !important unless you're sure it's what you need. It can be a real pain when your css gets more complicated.
All you need is to set background-color rule to .ul-body
.ui-body{
background-color:#FFF;
}
Don't use !improtant, Keep it as a last resource.
Note: In case some other list might contain a class named ui-body, but you can give parent ID or class as selector to your custom class .ui-body
#Parent .ui-body{
}
.Parent .ui-body{
}
fiddle
Im trying to group text fields together on the same line using "ui-grid-a".
But the blue halo gets clipped on the left and right side of the fields.
<ul data-role="listview" data-inset="true">
<li>
<label>Label A</label>
<input data-id="name" type="text" value="" placeholder="" title="">
</li>
<li>
<div class="ui-grid-a">
<div class="ui-block-a">
<label>Label B</label>
<input data-id="email" type="text" value="" placeholder="" title="">
</div>
<div class="ui-block-b">
<label>Label C</label>
<input data-id="phone" type="text" value="" placeholder="" title="">
</div>
</div>
</li>
</ul>
Sample here: http://jsfiddle.net/N8ZUt/1/
Set focus to "label a" and then "label b" and you should see the difference.
You just need to add a little padding:
li .ui-block-a, li .ui-block-b {
padding-right: 4px;
padding-left: 4px;
}
Also, to keep things aligned, I have put your first list item in a ui-grid-solo with the same padding.
Here is your updated fiddle: http://jsfiddle.net/ezanker/N8ZUt/4/