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>
Related
Is there any way with css or JavaScript to set an animation border when it is clicked or active in wordpress?
I want to make this effect on a ul lists.I'm using a filter product and i can't put a button inside li elements.
.btn{
border:none;
color: #FFFFFF29;
position: relative;
display: inline-block;
overflow: hidden;
padding: 0.5rem 0;
font-size:65px;
transition: .3s;
transition-delay: 0.5s;
}
.btn::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 100%;
background-color: #fff;
transform: translateX(-105%);
transition: transform 0.5s ease-in-out;
transition-delay: 0.5s;
}
.btn:focus::before{
transform: translateX(0);
}
.btn:focus{
transition:.3s;
color:#fff;
transition-delay: 0.5s;
outline: none;
background-color: transparent;
}
.btn:not(hover){
color: #FFFFFF29 ;
background-color: #1a1a1a;
}
ul {
background-color:#1a1a1a;
list-style-type: none;
}
<ul>
<li><button class="btn" >Digital Marketing</button></li>
<li><button class="btn" >Sviluppo</button></li>
</ul>
Elementor Class Add into a tag
.btn:not(hover){
color: var(--e-global-color-secondary) !important;
background-color: #1a1a1a;
}
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;
}
}
Here is my code and the javascript. I've tried deleting the width off the original class .sidebar but it doesn't work. The nav-links come in smooth but the .sidebar background snaps into place. It doesn't smoothly transition with the rest of the elements but when the browser resizes the transitions take place. It's just that when I click on the event action it snaps into place.
var toggler = document.getElementsByClassName('toggler')[0]
var sideBar = document.getElementsByClassName('sidebar')[0]
toggler.addEventListener('click', function openSideBar() {
sideBar.classList.toggle('open')
});
.menu {
height: 100vh;
width: 100%;
background: #eeefcf;
}
h1{
display: flex;
justify-content: center;
align-items: center;
}
.menu-toggler{
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 50px;
background: purple;
z-index: 1;
transition: ease-in .4s;
}
.toggler {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 2;
opacity: 0;
transition: all ease-in .9s;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: -200px;
background: rgb(45, 125, 218);
transition: ease 0.9s;
}
.nav-links {
position: absolute;
top: 100px;
left: -70px;
display: flex;
flex-direction: column;
transition: ease-in .4s;
}
.nav-link {
margin: 15px 0px;
}
.nav-link a {
color: white;
text-decoration: none;
}
.open {
width: 250px;
transition: ease 2s all;
}
.open .nav-links {
left: 70px;
transition: ease-in all .5s;
}
<div class="menu">
<h1>Move It over</h1>
<div class="menu-toggler">
<input type="checkbox" class="toggler">
</div>
<aside class="sidebar">
<ul class="nav-links">
<li class="nav-link">Home</li>
<li class="nav-link">About</li>
<li class="nav-link">Services</li>
<li class="nav-link">Contact</li>
</ul>
</div>
</aside>
You have set the width of .sidebar to -200px, which is an invalid value.
If you set it to 0px it will animate.
So I would like to have this underline hover effect to stretch only up to the length of the text that I hover on, and not more than that. I tried to insert some shape with pseudo selector that would cover the overflow if I put for example too long underline which would cover all lengths but can't get it to work as supposed...any ideas perhaps?
Here's link to my codepen: http://codepen.io/anon/pen/jVqqEZ
* {
background-color: blue;
}
li > a {
position: relative;
color: white;
text-decoration: none;
}
li > a:hover {
color: white;
}
li > a:before {
content: "";
position: absolute;
width: 70%;
height: 1px;
bottom: 0;
left: -10;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.2s ease-in-out 0s;
}
li > a:hover:before {
visibility: visible;
transform: scaleX(1);
}
/*
li > a:after {
content: "";
background-color: yellow;
height: 10px;
width: 100px;
}*/
<ul class="menu">
<li>About</li>
<li>Works and stuff</li>
<li>Contact</li>
</ul>
li > a:before {
width: 70%; /* initial*/
width: 100%; /* changed value*/
}
* {
background-color: blue;
}
li > a {
position: relative;
color: white;
text-decoration: none;
}
li > a:hover {
color: white;
}
li > a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: -10;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.2s ease-in-out 0s;
}
li > a:hover:before {
visibility: visible;
transform: scaleX(1);
}
/*
li > a:after {
content: "";
background-color: yellow;
height: 10px;
width: 100px;
}*/
<ul class="menu">
<li>About</li>
<li>Works and stuff</li>
<li>Contact</li>
</ul>
Use the following in css:
li > a:before {
...
width: 100%; // not 70 %
...
}
Hello i try to make a hover effect on my menu list with data-letters, so it' s work really good but i want to make it in text-align: right, the problem is that when i add it to my menu-item, i can' t see the data-letters :/
anyone have a solution ?
there is my code:
.link {
outline: none;
text-decoration: none;
position: relative;
color: #9e9ba4;
display:inline-block;
}
.link--over {
text-transform: uppercase;
overflow: hidden;
color: #c5c2b8;
}
.link--over:hover {
color: #c5c2b8;
}
.link--over::after {
content: '';
position: absolute;
height: 3px;
width: 100%;
top: 20%;
margin-top: -1.5px;
right: 0;
background: rgba(51,51,51,1);
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.link--over:hover::after {
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
.link--over::before {
content: attr(data-letters);
position: absolute;
z-index: 150;
overflow: hidden;
display:block;
color: #424242;
white-space: nowrap;
letter-spacing:10px;
width: 0%;
-webkit-transition: width 0.4s 0.3s;
transition: width 0.4s 0.3s;
}
.link--over:hover::before {
width: 100%;
}
.menu-item{
position:absolute;
left:50%;
margin-left:-50px;
margin-top:20%;
width:150px;
text-align:right;
}
.menu-item li {
position:relative;
width:100%;
letter-spacing:10px;
margin-bottom:40px;
}
#en-cours{
color:rgba(51,51,51,1);
}
<ul class="menu-item">
<a id="en-cours" class="link link--over" href="index.html" data-letters="works"><li>works</li></a>
<a class="link link--over" href="#" data-letters="about"><li>about</li></a>
<a class="link link--over" href="#" data-letters="contact"><li>contact</li></a>
</ul>
Would you be against throwing some tags between each item? I also added text-align:right to many CSS items:
.link {
outline: none;
text-decoration: none;
position: relative;
color: #9e9ba4;
display:inline-block;
}
.link--over {
text-transform: uppercase;
overflow: hidden;
color: #c5c2b8;
text-align: right;
}
.link--over:hover {
color: #c5c2b8;
}
.link--over::after {
content: '';
position: absolute;
height: 3px;
width: 100%;
top: 20%;
margin-top: -1.5px;
right: 0;
background: rgba(51,51,51,1);
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
text-align: right;
}
.link--over:hover::after {
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
.link--over::before {
content: attr(data-letters);
position: absolute;
z-index: 150;
overflow: hidden;
color: #424242;
white-space: nowrap;
letter-spacing:10px;
width: 0%;
-webkit-transition: width 0.4s 0.3s;
transition: width 0.4s 0.3s;
text-align: right;
}
.link--over:hover::before {
width: 100%;
text-align: right;
}
.menu-item{
position:absolute;
left:50%;
margin-left:-50px;
margin-top:20%;
width:150px;
}
.menu-item li {
position:relative;
width:100%;
letter-spacing:10px;
margin-bottom:40px;
text-align: right;
}
#en-cours{
color:rgba(51,51,51,1);
}
<ul class="menu-item">
<a id="en-cours" class="link link--over menu-item" href="index.html" data-letters="works"><li>works</li></a>
<br>
<a class="link link--over menu-item" href="#" data-letters="about"><li>about</li></a>
<br>
<a class="link link--over menu-item" href="#" data-letters="contact"><li>contact</li></a>
</ul>