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);
}
Related
I need to get the menu item to remain highlighted when a user clicks on it, of each different page..? It must be CSS only.
CSS:
.topplinker span:hover, .index .shjem, .kontakt .skontakt, .byggdrifter .sbyggdrifter, .om .som {
background-color: #fffcd9;
border-radius: 0 10px 0 0;}
HTML:
<body class="index"><p class="topplinker">
<span class="shjem">Hjem</span>
<span class="skontakt">Kontakt</span>
<span class="sbyggdrifter">Byggdrifter</span>
<span class="som">Om</span>
</p>
So now the code depends on the body class to be unique for each page to work. But I wants it to be working without using the body class to highlight each menu item. Any suggestions..?
Best regards
use ul and li.
then use onclick function to make li active.
Try this one with CSS, If you click on the URL i just change color.
FYI, if pages loads while clicking those url means you have right based on Router URL only.
#toggle1:checked ~ .control-me,
#toggle2:checked ~ .control-me,
#toggle3:checked ~ .control-me,
#toggle4:checked ~ .control-me {
background: violet;
}
.menuitem {
visibility: hidden;
}
<body class="index">
<p class="topplinker">
<a href="javascript:;">
<label>
<input type="radio" name="menuitem" id="toggle1" class="menuitem" />
<span class="control-me shjem">Hjem</span>
</label>
</a>
<a href="javascript:;">
<label>
<input type="radio" name="menuitem" id="toggle2" class="menuitem" />
<span class="control-me skontakt">Kontakt</span>
</label>
</a>
<a href="javascript:;">
<label>
<input type="radio" name="menuitem" id="toggle3" class="menuitem" />
<span class="control-me sbyggdrifter">Byggdrifter</span>
</label>
</a>
<a href="javascript:;">
<label>
<input type="radio" name="menuitem" id="toggle4" class="menuitem" />
<span class="control-me som">Om</span>
</label>
</a>
</p>
</body>
CSS only solution:
.topplinker {
display: flex;
justify-content: space-evenly;
}
a {
text-decoration: none;
color: black;
}
a:active, a:hover {
color: green;
font-weight: bold;
}
/* EDIT */
a:visited {
color: blue;
}
<p class="topplinker">
<span class="shjem">Hjem</span>
<span class="skontakt">Kontakt</span>
<span class="sbyggdrifter">Byggdrifter</span>
<span class="som">Om</span>
</p>
See for more selectors: https://www.w3schools.com/css/css_link.asp
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>
I need to match the selectors that I put down in the image but I can't find any css property to do it
The point is that I need that when the input-radio is checked the button is seen in another color, any css expert that can help me?
Thanks
<div class="radio" id="uniform-28">
<span class="checked">
<input type="radio" class="attribute_radio" name="group_1" value="28" id="28"></span>
</div>
<label for="28">5/6</label>
enter image description here
You cannot select parent elements via css, therefor you have to use script and toggle element classes. One way to do it:
$('.attribute_radio').each(function(i) {
var thisRadio = $(this);
var thisName = thisRadio.attr('name');
var groupRadios = $('.attribute_radio[name='+thisName+']');
thisRadio.on('change', function() {
groupRadios.each(function(j) {
var thatRadio = $(this);
thatRadio.closest('.radio').toggleClass('radio_checked', thatRadio.is(':checked'));
/* You could also target the label itself this way: */
var labelId = thatRadio.attr('id');
var thatLabel = $('label[for='+labelId+']');
thatLabel.toggleClass('label_checked', thatRadio.is(':checked'));
});
}).trigger('change');
});
.radio {
display: none;
}
.radio + label {
display: inline-block;
padding: 10px 14px;
min-width: 50px;
background: #ddd;
color: #444;
border: 3px solid #444;
border-radius: 6px;
}
.radio_checked + label {
background: yellow;
}
.label_checked {
/* Any styles */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
Group 1
</p>
<div class="radio" id="uniform-27">
<span class="checked">
<input type="radio" class="attribute_radio" name="group_1" value="27" id="27">
</span>
</div>
<label for="27">4</label>
<div class="radio" id="uniform-28">
<span class="checked">
<input type="radio" class="attribute_radio" name="group_1" value="28" id="28" checked="checked">
</span>
</div>
<label for="28">5/6</label>
<p>
Group 2
</p>
<div class="radio" id="uniform-37">
<span class="checked">
<input type="radio" class="attribute_radio" name="group_2" value="37" id="37" checked="checked">
</span>
</div>
<label for="37">XS</label>
<div class="radio" id="uniform-38">
<span class="checked">
<input type="radio" class="attribute_radio" name="group_2" value="38" id="38">
</span>
</div>
<label for="38">S</label>
Also on JSFiddle.
I think you should restructure your DOM and that will make it easy for you to apply CSS.
How about this?
<div class="radio" id="uniform-28">
<span class="checked">
<input type="radio" class="attribute_radio" name="group_1" value="28" id="28"/>
<label for="28">5/6</label>
</span>
</div>
And then you can apply style you want
.checked label {
background-color: yellow;
}
This way you don't have to do extra wotk with JS and CSS.
Also you might have to change your existing CSS if you want use above HTML.
I am learning responsive menus and by googling, i got the hamburger checkbox hack.
What i am trying to do is show only direct descendants by clicking the hamburger and hide the sub menus.
#toggle-menu {
cursor: pointer;
}
#primary-nav,
#menu-toggle,
#primary-nav>ul {
display: none;
}
#menu-toggle:checked+#primary-nav {
display: block;
}
<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet" />
<div class="menu">
<a href="#">
<h1>Company</h1>
</a>
<label for="menu-toggle" id="toggle-menu"><i class="far fa-bars"></i></label>
<input type="checkbox" id="menu-toggle">
<ul id="primary-nav">
<li>home</li>
<li>dropdown
<ul>
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
</ul>
</div>
Any help will be appreciated
To only show the ul after the input, you need to hide all uls, then only show the ul directly after a checked input
You can then add a class on all the inputs and do the same for the submenu.
#toggle-menu {
cursor: pointer;
}
.toggler, /*checkboxes a class of toggler and hide */
ul { /* hide all menus (you may want to give them all a class) */
display: none;
}
.toggler:checked+ul { /* only show a ul if it is directly after a checked toggler input */
display: block;
}
<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet" />
<div class="menu">
<a href="#">
<h1>Company</h1>
</a>
<label for="menu-toggle" id="toggle-menu"><i class="far fa-bars"></i></label>
<input type="checkbox" id="menu-toggle" class="toggler">
<ul id="primary-nav">
<li>home</li>
<li>
<label for="sub-menu1">dropdown</label> <!-- use a label and target the checkbox below -->
<input type="checkbox" class="toggler" id="sub-menu1"> <!-- add this -->
<ul>
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
</ul>
</div>
The Bootstrap .dropdown-menu.pull-right selector doesn't seem to work (the code is in navbar.less, lines 330 to 341).
As you can see on this screenshot, the up caret is not aligned to the right.
My dropdown-menu class :
<ul class="dropdown-menu pull-right">
When I change line 286 to
right:10px;
it works fine.
Any idea on how to fix this ?
Here is my html code:
<div id="USE_dropdown_signin" class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> Sign in
</a>
<ul class="dropdown-menu pull-right">
<form action="" method="post" accept-charset="UTF-8">{% csrf_token %}
<input id="USE_signin_username" type="text" name="signin[username]" size="30" placeholder="User Name"/>
<input id="USE_signin_password" type="password" name="signin[password]" size="30" placeholder="Password"/>
<input id="USE_signin_remember_me" type="checkbox" name="signin[remember_me]" value="1" />
<label id="USE_signin_remember_me_label" class="string optional" for="signin_remember_me"> Remember me</label>
<input id="USE_signin_submit" class="btn btn-primary" type="submit" name="commit" value="Sign in" />
</form>
</ul>
</div>
From your screenshot, I would assume that you have used .btn-group class to make your white log in button.
Assign "pull-right" class to the div element containing btn-group class instead of the ul element.
Correct Html markup
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> Username
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Profile</li>
<li class="divider"></li>
<li>Sign Out</li>
</ul>
</div>
Based on what I have analyzed on the twitter bootstrap, you will require the following css to work.
.navbar .pull-right .dropdown-menu, .navbar .dropdown-menu.pull-right {
right: 0;
left: auto;
}
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
.pull-right { float: right; }
Here is what I didn't understand:
1) The boostrtap selector in navbar.less line 329-330
.navbar .nav.pull-right .dropdown-menu,
.navbar .nav .dropdown-menu.pull-right {}
didn't match my dropdown-menu because I don't have the parent .nav class in my hierarchy.
2) My .dropdown-menu has the class .pull-right, and this doesn't match:
.navbar .dropdown-menu:before .pull-right {
left: auto;
right: 9px;
}
but this does:
.navbar .pull-right .dropdown-menu:before {
left: auto;
right: 9px;
}
3) I couldn't debug correctly until I removed the -yui-compress option of the less compiler ;-)
Thanks for everything!