CSS code for underline style for menu items - css

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;
}
}

Related

Getting SVG plus symbol to appear to the right of tab, not the right of the containing div

So I've got a problem where I've got two tabs (https://codepen.io/databell/pen/LYjxvyx) where the first tab opens up content and the second opens up a modal.
Now to be clear, those functions work. That's not the issue. So for those purposes, I deleted those out of my example. Focusing on CSS here.
My problem is I want plus + symbols to appear to the right side of each tab (really a div) and instead one tab has the symbol to the far right of the container, even though the tab is set to width 100%. So I'm stumped as to what the problem is.
This is meant to go into a Shopify store using the Dawn theme, so I'm using their elements here to create this interface.
Here's the code.
<div id="info-additions" class="product__accordion accordion info-additions-content" >
<details>
<summary>
<div class="summary__title info-additions-tab g-flex">
<h2 class="h4 accordion__title t-body benefits">
Tab One
<span></span>
</h2>
</div>
<div class="summary__title info-additions-tab g-flex">
<modal-opener class="product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-ingr">
<button id="ProductPopup-ingr" class="summary__title t-body ingredients" type="button" aria-haspopup="dialog" data-additions-tab="ingredients">
<h2 class="h4 accordion__title">
Tab Two
<span></span>
</h2>
</button>
</modal-opener>
</div>
</summary>
<div class="accordion__content rte">
<p>Content</p>
</div>
</details>
</div>
CSS:
body {
font-size: 1.6rem;
}
*, ::before, ::after {
box-sizing: inherit;
}
.h0, .h1, .h2, .h3, .h4, .h5, h1, h2, h3, h4, h5 {
letter-spacing: .06rem;
line-height: 1.3;
}
.h4, h4 {
font-size: 1.6rem;
}
.grid {
list-style: none;
}
.g-flex {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.accordion summary {
cursor: pointer;
display: flex;
position: relative;
list-style: none;
line-height: 1;
padding: 1.5rem 0;
}
.accordion__title {
display: inline-block;
max-width: calc(100% - 6rem);
min-height: 1.6rem;
margin: 0;
word-break: break-word;
}
details > * {
box-sizing: border-box;
}
.accordion__title {
word-break: break-word;
}
.accordion .summary__title {
display: flex;
flex: 1;
}
#info-additions {
clear: both;
height: auto;
margin: 15px 0 0;
border-top: 2px solid;
border-bottom: 2px solid;
width: 100%;
}
.info-additions-content {
position: relative;
height: 0;
transition: .6s var(--a-cubic-1);
}
.info-additions-tab {
justify-content: space-between;
}
.info-additions-tab span {
display: block;
position: absolute;
width: 18px;
height: 18px;
top: 13px;
right: 2rem;
}
.info-additions-tab button {
position: relative;
padding: 16px 0!important;
line-height: 1;
font-weight: 500;
text-align: left;
}
.info-additions-tab button.benefits {
width: 50%;
}
.info-additions-tab .product-popup-modal__opener {
width: 100% !important;
}
.info-additions-tab button.ingredients {
width: 100%;
}
.info-additions-tab span {
display: block;
position: absolute;
width: 18px;
height: 18px;
top: 13px;
right: 2rem;
}
.info-additions-tab span:before,
.info-additions-tab span:after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(90deg);
transform: translate(-50%, -50%) rotate(90deg);
width: 2px;
height: 18px;
background-color: black;
transition: 0.3s;
}
.info-additions-tab button:not(.active) span:after {
-webkit-transform: translate(-50%, -50%) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg);
}
.info-additions-content {
position: relative;
height: 0;
transition: 0.6s var(--a-cubic-1);
}
.info-additions-content [data-additions-content] {
position: absolute;
width: 100%;
top: 0;
left: 0;
padding: 5px 0 20px;
opacity: 0;
pointer-events: none;
transition: 0.3s 0s;
}
.info-additions-content [data-additions-content].active {
opacity: 1;
pointer-events: auto;
transition-delay: 0.4s;
}
#info-additions button {
padding: 0;
background: transparent;
color: inherit;
cursor: pointer;
border: 0;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
transition: 0.2s;
}
if you want an absolute element like + to stay in the parent element you have to set the position of the parent to "relative".
you have two problems. summary__title doesn't have a position so + doesn't stay in it .
for the second tab, your modal button has a relative position that makes the + stay inside of it instead of the summary__title.
.accordion .summary__title {
...
position: relative; // add position
}
#info-additions button {
...
position: unset; // unset the position of the button
}

How to hover parent & have child respond to keyframe animation

I am trying to write code that mimics this animation as much as possible.
I have been going over keyframe animations & I think that they can be used to do what I need them to do.
I effectively want to have three things happen when the user hovers over the parent element. The first is the color
on the right side of the element will change dynamically (as in the picture & as in the example code), the
icon will animate into the picture & then the text will then animate.
I am new to programming & I am looking for some direction.
Example of finished product: https://imgur.com/a/bxV1V1B
DEMO
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
a span {
position: relative;
z-index: 2;
}
a:after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 100%;
background: green;
transition: all .35s;
}
a:hover:after {
width: 15%;
}
<div class="wrapper">
<span>Hover Me!</span>
</div>
Here you go. I made a CSS animation for you which will rotate and translate a new i that I have added into the HTML. I used font awesome for the check with the circle around it. Take a look:
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
a span {
position: relative;
z-index: 2;
}
a:after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 100%;
background: green;
transition: all .35s;
visibility: hidden;
}
a:hover:after {
width: 15%;
visibility: visible;
}
#check {
right: 2px;
top: 8px;
position: absolute;
display: none;
z-index: 3;
transition: right .35s;
}
a:hover #check {
animation:spin .35s linear;
display: block;
}
#keyframes spin {
0% {
transform: translate(25px) rotate(0deg);
}
100% {
transform: translate(0px) rotate(360deg);
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<span>Hover Me!</span><i id="check"style="font-size:22px; color:lightgrey" class="fa fa-check-circle"></i>
</div>

Why are my menu items not showing when desktop size?

I followed this tutorial to create a responsive hamburger menu. But i can't figure out why the menu items don't show when my screen is desktop size.
When the screen is mobile size i can click the hamburger menu and the items appear. If i scale up my screen to desktop size while the menu is "open" they do appear the way i want to (because of my media querie). But when i refresh the page (while my screen is desktop size) my menu items don't appear. I can't seem to figure it out, please help if you see my mistake. Thanks!
This is what i want:
This is what i get now:
This is what i get when i scale to mobile screen:
body {
margin: 0;
background-color: #fff;
}
.header {
background-color: #fff;
position: fixed;
width: 100%;
z-index: 3;
.menu-btn {
display: none;
&:checked ~ .menu {
max-height: 240px;
}
&:checked ~ .menu-icon .nav-icon {
background: transparent;
&:before {
transform: rotate(-45deg);
top: 0;
}
&:after {
transform: rotate(45deg);
top: 0;
}
}
}
.menu-icon {
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;
.nav-icon {
background: #333;
display: block;
height: 2px;
width: 18px;
position: relative;
transition:background .2s ease-out;
&:before {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: 5px;
}
&:after {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: -5px;
}
}
}
.menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
color: #403e3f;
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
li {
a {
display: block;
padding: 20px;
border-right: 1px solid #aaa;
text-decoration: none;
}
}
}
}
#media (min-width: 48em) {
li {
float: left;
a {
padding: 20px 30px;
}
}
.menu {
clear: none;
float: right;
max-height: none;
}
.menu-icon {
display: none;
}
}
<header class="header">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li>oplossingen</li>
<li>product</li>
<li>about</li>
</header>
You need to remove the max-height: 0;and max-height:250px set a height: auto;on the menu in the media query for the menu to show up in desktop.
Update I've revised the snippet, it works now.
body {
margin: 0;
background-color: #fff;
}
.header {
background-color: #fff;
position: fixed;
width: 100%;
z-index: 3;
}
.menu-btn {
display: none;
}
.menu-btn:checked ~
.menu {
height: auto;
}
.menu-btn:checked ~ .menu-icon .nav-icon {
background: transparent;
}
.menu-btn:checked ~ .menu-icon .nav-icon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked ~ .menu-icon .nav-icon:after {
transform: rotate(45deg);
top: 0;
}
.menu-icon {
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;
}
.nav-icon {
background: #333;
display: block;
height: 2px;
width: 18px;
position: relative;
transition: background .2s ease-out;
}
.nav-icon:before {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: 5px;
}
.nav-icon:after {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: -5px;
}
.menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
color: #403e3f;
clear: both;
height: 0;
transition: height .2s ease-out;
}
.menu a {
display: block;
padding: 20px;
text-decoration: none;
}
#media screen and (min-width: 48em) {
.menu-icon {
display: none;
}
.menu {
float: right;
height: auto;
}
.menu li {
display: inline-block;
}
}
<header class="header">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li>oplossingen</li>
<li>product</li>
<li>about</li>
</header>

Unable to click on items in a css hamburger menu

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>

Drop down menu positioning

so I'm having this issue. Here is the jsfiddle.
https://jsfiddle.net/g5yo9jts/
<body>
<div class="header">
<div class="menuIcon">
<a id="nav-toggle" href="#menuExpand"><span></span></a>
<div class="box"><h3>Home</h3></div>
</div>
<div class="menu">
<ul>
<li>Menu Option 1</li>
<li>Menu Option 2</li>
<li>Menu Option 3</li>
<li>Menu Option 4</li>
</ul>
</div>
</div>
</body>
* {
-webkit-font-smoothing:antialiased;
padding: 0;
margin: 0;
}
#nav-toggle span {
margin-left: 15px;
float: left;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 3px;
width: 25px;
background: white;
position: absolute;
display: block;
content: '';
}
#nav-toggle span:before {
top: -6px;
}
#nav-toggle span:after {
bottom: -6px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
transition: all 500ms ease-in-out;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
h3 {
font-size: 1em;
color: white;
float: right;
margin-right: 15px;
margin-bottom: 25px;
font-family: "alternate-gothic-no-3-d";
font-weight: 800;
}
.header .menu ul {
padding: 0;
margin: 0;
}
.header .menu ul li {
display: inline-block;
list-style: none;
padding: 0 0 0 5px;
margin: 0;
}
.header .menuIcon {
height: 50px;
display: none;
background: #000;
width: 100%;
}
.header .menuIcon a {
width: 100%;
display: inline-block;
color: #fff;
}
.header .menuIcon a img {
vertical-align: middle;
}
#media only screen and (min-width: 400px) {
.menu {
display: none;
}
}
#media only screen and (max-width: 767px) {
.header .menu {
max-height: 0;
overflow: hidden;
float: none;
text-align: center;
width: 100%;
-webkit-transition: max-height 0.5s;
-moz-transition: max-height 0.5s;
transition: max-height 0.5s;
}
.header .menu.menuOpen {
max-height: 1000px;
-webkit-transition: max-height 0.5s;
-moz-transition: max-height 0.5s;
transition: max-height 0.5s;
}
.header .menu ul li {
display: block;
width: 100%;
background: #000;
border-top: 1px solid #4d4d4d;
}
.header .menu ul li:hover {
background: #999;
}
.header .menu ul li a {
color: #fff;
text-shadow: #848484 0px 1px 2px;
padding: 10px;
width: 100%;
}
.header .menuIcon {
display: inline-block;
}
}
$(function() { $("a[href=#menuExpand]").click(function(e) {
$(".menu").toggleClass("menuOpen"); e.preventDefault(); });});
document.querySelector( "#nav-toggle" ).addEventListener( "click",
function(){
this.classList.toggle( "active" );
});
$(".header").click(function() {
$('.menu').show();
});
The main issue is my hamburger icon and text font aren't lining up. As you can see the hamburger is centered vertically and the text is on bottom right. I've tried everything from margining the text, to adding a box div to the text to move it. Floating, absolute positioning is not working.
I'd also like to have the hamburger icon on the right, and the text for my page on the left but I was having issues with the centering that I hadn't got that far. If anybody could help out that would be awesome.
Thanks so much.
NB: Resize the fiddle 'Result' view to something closer to a mobile/tablet device display resolution to view the menu. Maximum width 767px.
I think i have your problem solved. Only thing is there is a small gap between the header and the menu items when the menu appears (didn't tackle that) I'm sure some negative padding/margin will fix that right up
$(function() {
$("a[href=#menuExpand]").click(function(e) {
$(".menu").toggleClass("menuOpen");
e.preventDefault();
});
});
document.querySelector("#nav-toggle").addEventListener("click", function() {
this.classList.toggle("active");
});
$(".header").click(function() {
$('.menu').show();
});
$(".swap").click(function() {
var _this = $(this);
var current = _this.attr("src");
var swap = _this.attr("data-swap");
_this.attr('src', swap).attr("data-swap", current);
});
* {
-webkit-font-smoothing: antialiased;
padding: 0;
margin: 0;
}
.menuIcon a,
.menuIcon p {
display: inline;
}
#nav-toggle span {
margin-left: 15px;
float: left;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 3px;
width: 25px;
background: #000000;
position: absolute;
display: block;
content: '';
}
/*#nav-toggle span:before {
top: -6px;
}
#nav-toggle span:after {
bottom: -6px;
}*/
#nav-toggle img,
#nav-toggle img:before,
#nav-toggle img:after {
transition: all 500ms ease-in-out;
}
#nav-toggle.active img:before,
#nav-toggle.active img:after {
top: 0;
}
#nav-toggle.active img:before {
transform: rotate(45deg);
}
#nav-toggle.active img:after {
transform: rotate(-45deg);
}
h3 {
font-size: 1em;
color: white;
float: left;
margin-left: 15px;
padding-top: 15px;
font-family: "alternate-gothic-no-3-d";
font-weight: 800;
}
.header .menu ul {
padding: 0;
margin: 0;
}
.header .menu ul li {
display: inline-block;
list-style: none;
padding: 0 0 0 5px;
margin: 0;
}
.header .menuIcon {
height: 50px;
display: none;
background: #000;
width: 100%;
}
.header .menuIcon a {
width: 100%;
display: inline-block;
color: #fff;
}
.header .menuIcon a img {
width: 75px;
height: 50px;
float: right;
margin-top: -34px;
margin-bottom: 15px;
}
#media only screen and (min-width: 400px) {
.menu {
display: none;
}
}
#media only screen and (max-width: 767px) {
.header .menu {
max-height: 0;
overflow: hidden;
float: none;
text-align: center;
width: 100%;
-webkit-transition: max-height 0.5s;
-moz-transition: max-height 0.5s;
transition: max-height 0.5s;
}
.header .menu.menuOpen {
max-height: 1000px;
-webkit-transition: max-height 0.5s;
-moz-transition: max-height 0.5s;
transition: max-height 0.5s;
}
.header .menu ul li {
display: block;
width: 100%;
background: #000;
border-top: 1px solid #4d4d4d;
}
.header .menu ul li:hover {
background: #999;
}
.header .menu ul li a {
color: #fff;
text-shadow: #848484 0px 1px 2px;
padding: 10px;
width: 100%;
}
.header .menuIcon {
display: inline-block;
}
}
<body>
<div class="header">
<div class="menuIcon">
<p>
<h3>ELIJi</h3>
</p>
<a id="nav-toggle" href="#menuExpand">
<img class="swap" src="http://www.rachelgallen.com/images/hamburgerIcon.png" data-swap="http://www.rachelgallen.com/images/close.png"></img>
</a>
</div>
<div class="menu">
<ul>
<li>Menu Option 1
</li>
<li>Menu Option 2
</li>
<li>Menu Option 3
</li>
<li>Menu Option 4
</li>
</ul>
</div>
</div>
</body>

Resources