Hello fellow developers,
I'm building a sidebar component with view and am struggling to reverse the :checked functionality.
The issue is somewhere here:
#menu__toggle:checked ~ .menu__box {
left: 0 !important;
}
Expected result: I want the sidebar menu to be open by default. I want it to toggle -> close when I clicked.
The code snippet is pure html and css. I hope someone has a good idea how to fix this.
Thank you in advance.
#menu__toggle {
opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
top: 0;
transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
left: 0 !important;
}
.menu__btn {
position: fixed;
top: 20px;
left: 20px;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 1;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #616161;
transition-duration: .25s;
}
.menu__btn > span::before {
content: '';
top: -8px;
}
.menu__btn > span::after {
content: '';
top: 8px;
}
.menu__box {
display: block;
position: fixed;
top: 0;
left: -100%;
width: 300px;
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: #ECEFF1;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
transition-duration: .25s;
}
.menu__item {
display: block;
padding: 12px 24px;
color: #333;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 600;
text-decoration: none;
transition-duration: .25s;
}
.menu__item:hover {
background-color: #CFD8DC;
}
<div class="hamburger-menu">
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
<span></span>
</label>
<ul class="menu__box">
<li><a class="menu__item" href="#">Home</a></li>
<li><a class="menu__item" href="#">About</a></li>
<li><a class="menu__item" href="#">Team</a></li>
<li><a class="menu__item" href="#">Contact</a></li>
<li><a class="menu__item" href="#">Twitter</a></li>
</ul>
</div>
You can reverse selectors with the :not pseudo selector.
In your case simply combine it with the :checked selector.
#menu__toggle:not(:checked)
Related
I would like to know the CSS code used to make the underline effect for the menu items of this website : https://www.kevin-missud-charpente.fr/
Thanks in advance.
this is better
body,html {
margin: 0;
font: bold 14px/1.4 'Open Sans', arial, sans-serif;
background: #fff;
}
ul {
margin: 150px auto 0;
padding: 0;
list-style: none;
display: table;
width: 600px;
text-align: center;
}
li {
display: table-cell;
position: relative;
padding: 15px 0;
}
a {
color: #000;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 15px 20px;
position: relative;
}
a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #000;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
a:hover:after {
width: 100%;
left: 0;
}
#media screen and (max-height: 300px) {
ul {
margin-top: 40px;
}
}
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Support</li>
</ul>
this is on hover underline effect
Here a link to codepen with the same underline animation.
https://codepen.io/Nerd/details/zBmAWV
HTML
<nav>
Hover me!
</nav>
CSS
nav {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
position: relative;
color: #000;
text-decoration: none;
font-size: 42px;
font-family: sans-serif;
&:hover {
color: #000;
&:before {
visibility: visible;
transform: scaleX(1);
}
}
&:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
}
I realized that I am not correctly stating the issue. The issue I'm having is when clicking on the hamburger the menu will not open. I think it might be how the sibling selectors are coded. If I display the checkbox in .cc_menu-btn and click that, then the menu opens. Am I missing something or is it my selectors?
.cc_headernav {
.cc_menu-btn {
display: none;
&:hover {
background-color: #f4f4f4;
}
}
.cc_menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
.navicon {
background: #009FAE;
display: block;
height: 4px;
position: relative;
transition: background .2s ease-out;
width: 30px;
&:before {
background: #009FAE;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
top: 9px;
}
&:after {
background: #009FAE;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
top: -9px;
}
}
}
ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.cc_menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
li {
a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
&:hover {
background-color: #f4f4f4;
}
}
}
}
}
// CSS Need to Make SASSY
.cc_menu-btn:checked ~ .cc_menu {
max-height: 240px;
position: absolute;
top: 60px;
right: 0;
z-index: 99;
box-shadow: 0 3px 8px #c0c0c0;
}
.cc_menu-btn:checked + .cc_menu-icon .navicon {
background: transparent;
}
.cc_menu-btn:checked + .cc_menu-icon .navicon:before {
transform: rotate(-45deg);
}
.cc_menu-btn:checked + .cc_menu-icon .navicon:after {
transform: rotate(45deg);
}
.cc_menu-btn:checked + .cc_menu-icon:not(.steps) .navicon:before,
.cc_menu-btn:checked + .cc_menu-icon:not(.steps) .navicon:after {
top: 0;
}
HTML/JSX:
<Column small={1} className="cc_headernav">
<input className="cc_menu-btn" type="checkbox" id="menu-btn" />
<label className="cc_menu-icon" for="cc_menu-btn"><span className="navicon"></span></label>
<ul className="cc_menu">
<li><Link name="Menu One" to="/MenuOne" onClick={this.changeTitle.bind(this)}>Menu One</Link></li>
<li><Link name="Menu Two" to="/MenuTwo" onClick={this.changeTitle.bind(this)}>Menu Two</Link></li>
<li><Link name="Menu Three" to="/Menu Three" onClick={this.changeTitle.bind(this)}>Menu Three</Link></li>
</ul>
</Column>
Any help is greatly appreciated!
There's a very small glitch in a CSS animation I've made for a responsive menu icon that turns into an "X" when clicked. The top line of the menu icon flickers down about 1px once the X shape has been made, so it is effectively still moving once the others have stopped. I've been messing around with it for hours but haven't been able to stop it happening – can anyone think of a way in which I could do this, or even a better way of achieving that animation?
https://jsfiddle.net/8nj5y4t1/58/
HTML:
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</span>
CSS:
.menu-button {
position: relative;
top: 0;
right: 0;
display: inline-block;
z-index: 10;
width: 21px;
height: 14px;
padding: 2px 0 2px 0;
cursor: pointer;
vertical-align: middle;
}
.bar {
display: block;
position: absolute;
width: 21px;
height: 2px;
background-color:#888;
-webkit-transition: all .8s;
transition: all .8s;
}
.bar:nth-child(3n) {
top: 2px;
}
.bar:nth-child(3n+1) {
top: 8px;
opacity:1;
}
.bar:nth-child(3n+2) {
top: 14px;
}
.bar.open {
background-color:#666;
}
.bar:nth-child(3n).open {
transform: rotate(45deg);
width: 23px;
left: -1px;
top: 7.5px;
}
.bar:nth-child(3n+1).open {
opacity:0;
}
.bar:nth-child(3n+2).open {
transform: rotate(-45deg);
width: 23px;
left: -1px;
top: 7.5px;
}
jQuery:
jQuery(document).ready(function($) {
$('.menu-button').click(function() {
$('.bar').toggleClass('open');
});
});
.bar:nth-child(3n+1) top property and .bar:nth-child(3n).open and .bar:nth-child(3n+2).open top properties should be off same value;
Example
I replaced top:7.5px with top:8px at .bar:nth-child(3n).open and .bar:nth-child(3n+2).open
jQuery(document).ready(function($) {
$('.menu-button').click(function() {
$('.bar').toggleClass('open');
});
});
.menu-button {
position: relative;
top: 0;
right: 0;
display: inline-block;
z-index: 10;
width: 21px;
height: 14px;
padding: 2px 0 2px 0;
cursor: pointer;
vertical-align: middle;
}
.bar {
display: block;
position: absolute;
width: 21px;
height: 2px;
background-color:#888;
-webkit-transition: all .8s;
transition: all .8s;
}
.bar:nth-child(3n) {
top: 2px;
}
.bar:nth-child(3n+1) {
top: 8px;
opacity:1;
}
.bar:nth-child(3n+2) {
top: 14px;
}
.bar.open {
background-color:#666;
}
.bar:nth-child(3n).open {
transform: rotate(45deg);
width: 23px;
left: -1px;
top: 8px; /* Changed this from 7.5px to 8px */
}
.bar:nth-child(3n+1).open {
opacity:0;
}
.bar:nth-child(3n+2).open {
transform: rotate(-45deg);
width: 23px;
left: -1px;
top: 8px; /* Changed this from 7.5px to 8px */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="menu-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</span>
I'm building a hamburger menu for a mobile website using only html and css. You can view the code here on codepen.io.
<html>
<body>
<nav>
<button class="hamburger"><span></span></button>
<div class="close"></div>
<ul class="menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
<li>Page4</li>
<li>Google</li>
</ul>
</nav>
</body>
</html>
As you can see from line 106 in the css part
.hamburger:focus ~ .menu {
visibility: visible;
}
the menu is visible when the button is in focus. The Problem is that as soon as you click on a menu item, the button gets out of focus and the menu disappears before the click can be processed.
I already tried to write rules for the focussed menu, but it did not help.
Please let me know if you need any additional information.
Thank you in advance for your effort.
add transition visibility on your menu class. see the updated class below.
.menu {
position: absolute;
margin: 0;
padding: 10px;
width: auto;
height: auto;
visibility: hidden;
list-style: none;
background-color: #333;
transition: visibility 0.5s;
}
.menu a {
color: #87BF58;
display: block;
text-decoration: none;
}
.hamburger {
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
height: 3rem;
width: 3rem;
z-index: 500;
text-indent: 0;
appearance: none;
box-shadow: none;
border-radius: 0;
border: none;
cursor: pointer;
transition: background 0.3s;
background-color: yellowgreen;
}
.hamburger:focus {
outline: none;
background-color: green;
}
.hamburger span {
display: block;
position: absolute;
top: 45%;
left: 25%;
right: 25%;
height: 10%;
background: white;
transition: background 0s 0.3s;
}
.hamburger span::before,
.hamburger span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
content: "";
transition-duration: 0.3s, 0.3s;
transition-delay: 0.3s, 0s;
}
.hamburger span::before {
top: -210%;
transition-property: top, transform;
}
.hamburger span::after {
bottom: -210%;
transition-property: bottom, transform;
}
.hamburger:focus span {
background: none;
}
.hamburger:focus span::before {
top: 0;
transform: rotate(45deg);
}
.hamburger:focus span::after {
bottom: 0;
transform: rotate(-45deg);
}
.hamburger:focus span::before,
.hamburger:focus span::after {
transition-delay: 0s, 0.3s;
}
.close {
position: absolute;
height: 3rem;
width: 3rem;
margin-top: -3rem;
z-index: 501;
background-color: transparent;
cursor: pointer;
visibility: hidden;
}
.hamburger:focus ~ .menu {
visibility: visible;
}
.hamburger:focus ~ .close {
visibility: visible;
}
<nav>
<button class="hamburger"><span></span></button>
<div class="close"></div>
<ul class="menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
<li>Page4</li>
<li>Google</li>
</ul>
</nav>
I want to add links to circularmenu found on https://jsfiddle.net/zv5dr670/4/.
<a href="http://www.google.com" target="_blank">
<li>
<input id='1' type='checkbox'>
<label for='1'>Option 1</label>
</li>
</a>
The link is displayed in browser status bar, but dooesn't react on a click. I don't work CSS in school for now, only HTML. Can you help me?
You could add a custom attribute to li element as follows
<li class='link' data-url='https://jsfiddle.net'>
<input id='c1' type='checkbox'/>
<label for='c1'>Menu 1</label>
</li>
Then with jQuery you can bind the link class' click event like this:
$('li.link').click(function(e) {
window.location=$(this).attr('data-url');
});
If you want to make outer circles just links you don't have to use input tag:
HTML
<div class='selector'>
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
<li>Google</li>
<li>Google</li>
<li>Google</li>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
<button>Click</button>
</div>
<button class ="mycbutton">Click2</button>
CSS
html,
body { height: 100%; }
body {
margin: 0;
background: linear-gradient(#eeeeee, #cccccc);
overflow: hidden;
}
.mycbutton {
}
.selector {
position: absolute;
left: 50%;
top: 50%;
width: 140px;
height: 140px;
margin-top: -70px;
margin-left: -70px;
}
.selector,
.selector button {
font-family: 'Oswald', sans-serif;
font-weight: 300;
}
.selector button {
float:right;
position: relative;
width: 100%;
height: 100%;
padding: 10px;
background: #428bca;
border-radius: 50%;
border: 0;
color: white;
font-size: 20px;
cursor: pointer;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
transition: all .1s;
}
.selector button:hover { background: #3071a9; }
.selector button:focus { outline: none; }
.selector ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
top: -20px;
right: -20px;
bottom: -20px;
left: -20px;
}
.selector li {
position: absolute;
width: 0;
height: 100%;
margin: 0 50%;
-webkit-transform: rotate(-360deg);
transition: all 0.8s ease-in-out;
}
.selector li a {
position: absolute;
left: 50%;
bottom: 100%;
width: 0;
height: 0;
line-height: 1px;
margin-left: 0;
background: #fff;
border-radius: 50%;
text-align: center;
font-size: 1px;
overflow: hidden;
cursor: pointer;
box-shadow: none;
transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
text-decoration: none;
color: black;
}
.selector li a:hover { background: #f0f0f0; }
.selector.open li a {
width: 80px;
height: 80px;
line-height: 80px;
margin-left: -40px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
font-size: 14px;
}
JS
var nbOptions = 9;
var angleStart = -360;
// jquery rotate animation
function rotate(li,d) {
$({d:angleStart}).animate({d:d}, {
step: function(now) {
$(li)
.css({ transform: 'rotate('+now+'deg)' })
.find('a')
.css({ transform: 'rotate('+(-now)+'deg)' });
}, duration: 0
});
}
// show / hide the options
function toggleOptions(s) {
$(s).toggleClass('open');
var li = $(s).find('li');
var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;
for(var i=0; i<li.length; i++) {
var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
$(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);
}
}
$('.selector button').click(function(e) {
toggleOptions($(this).parent());
});
$('.mycbutton').click(function(e) {
toggleOptions($(this).parent());
});
setTimeout(function() { toggleOptions('.selector'); }, 100);
Run it on JSFiddle