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 %
...
}
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 have a menu containing of ul li items. I have five items, using flexbox to align them with the last item using margin-left:auto; to push it to the right.
I am also using transform: skewX(45deg) to create arrows for each li::before and li::after and I have a starting background-color. The arrow border is set to yellow.
My problem is that I would like to individually set the color for each li item, except the last li.
So, I would like to use li:nt-child property and set the background color and also take into account for before and after values.
I am guessing I need also to use the z-index maybe so the previous before and after color values are handled in a proper way.
This is my html code:
<nav class="flex-nav" id="nav">
<ul>
<li>Home page</li>
<li>Test page</li>
<li>Link1</li>
<li>Link2</li>
<li>Login</li>
</ul>
</nav>
And this is my css:
.flex-nav ul {
display: flex;
list-style-type: none;
padding-left: 0;
white-space: nowrap;
}
.flex-nav ul li {
justify-content: space-between;
align-items: center;
opacity: 1.0;
transition: opacity .2s ease-in-out;
position: relative;
line-height: 26px;
margin: 0 9px 0 -10px;
padding: 0 20px;
}
ul li::before,
ul li::after {
border-right: 4px solid yellow;
content: '';
display: block;
height: 50%;
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: -1;
transform: skewX(45deg);
background-color: #b0e0e6;
}
ul li::after {
bottom: 0;
top: auto;
transform: skewX(-45deg);
}
ul li:last-of-type::before,
ul li:last-of-type::after {
display: none;
}
ul li a {
font: bold 18px Sans-Serif;
letter-spacing: -1px;
text-decoration: none;
}
ul>li:hover {
opacity: 1.0;
}
ul:hover>li:not(:hover) {
opacity: 0.5;
}
.flex-nav ul li:last-child {
margin-left: auto;
}
Thanks :)
Try below CSS for change the background color for first, second and third items. Thanks
.flex-nav ul {
display: flex;
list-style-type: none;
padding-left: 0;
white-space: nowrap;
}
.flex-nav ul li {
justify-content: space-between;
align-items: center;
opacity: 1.0;
transition: opacity .2s ease-in-out;
position: relative;
line-height: 26px;
margin: 0 9px 0 -10px;
padding: 0 20px;
}
.flex-nav li:before,
.flex-nav li:after {
border-right: 4px solid yellow;
content: '';
display: block;
height: 50%;
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: -1;
transform: skewX(45deg);
}
.flex-nav li:first-child::before,
.flex-nav li:first-child::after {
background-color: red;
}
.flex-nav li:nth-child(2)::before,
.flex-nav li:nth-child(2)::after {
background-color: green;
}
.flex-nav li:nth-child(3)::before,
.flex-nav li:nth-child(3)::after {
background-color: blue;
}
<nav class="flex-nav" id="nav">
<ul>
<li>Home page</li>
<li>Test page</li>
<li>Link1</li>
<li>Link2</li>
<li>Login</li>
</ul>
</nav>
How to central align navbar from here
I tried:
.dropdownmenu li {
**float: center;**
position: relative;
width:auto;
**text-align: center;**
also with
div#nav{
text-align: center;
}
div#nav ul{
display: inline-block;
}
disclaimer: I have no experience in css. If it's obvios please close the question with reference.
The common way to horizontally center block-level elements is using margin: 0 auto;:
.dropdownmenu {
margin: 0 auto;
}
But this requires a specific width. In your case, it would be better to define a container element and set text-align: center;. I would recommend to not using floats here! Just make your <li> elements display: inline-block;.
Here is a working example (watch in fullscreen):
.container {
text-align: center;
}
.dropdownmenu ul,
.dropdownmenu li {
margin: 0;
padding: 0;
}
.dropdownmenu ul {
background: gray;
list-style: none;
}
.dropdownmenu li {
display: inline-block;
position: relative;
width: auto;
}
.dropdownmenu a {
background: #30A6E6;
color: #FFFFFF;
display: block;
font: bold 12px/20px sans-serif;
padding: 10px 15px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.dropdownmenu li:hover a {
background: #000000;
}
#submenu {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
}
li:hover ul#submenu {
opacity: 1;
top: 40px;
/* adjust this as per top nav padding top & bottom comes */
visibility: visible;
}
#submenu li {
float: none;
width: 100%;
}
#submenu a:hover {
background: #DF4B05;
}
#submenu a {
background-color: #000000;
}
<div class="container">
<nav class="dropdownmenu">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Articles on HTML5 & CSS3
<ul id="submenu">
<li>Difference between SVG vs. Canvas</li>
<li>New features in HTML5</li>
<li>Creating links to sections within a webpage</li>
</ul>
</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
Adjust css like below
.dropdownmenu {text-align:center}
.dropdownmenu ul {
background: gray;
list-style: none;
width: auto; display:inline-block
}
Update your CSS:
body {
text-align: center;
}
.dropdownmenu {
display: inline-block;
margin: 0 auto;
}
or
.dropdownmenu {
text-align: center;
}
.dropdownmenu ul {
display: inline-block;
width: auto;
margin: 0 auto;
}
.container {
text-align: center;
}
.dropdownmenu ul,
.dropdownmenu li {
margin: 0;
padding: 0;
}
.dropdownmenu ul {
background: gray;
list-style: none;
text-align:center;
}
.dropdownmenu li {
display: inline-block;
position: relative;
width: auto;
}
.dropdownmenu a {
background: #30A6E6;
color: #FFFFFF;
display: block;
font: bold 12px/20px sans-serif;
padding: 10px 15px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.dropdownmenu li:hover a {
background: #000000;
}
#submenu {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
}
li:hover ul#submenu {
opacity: 1;
top: 40px;
/* adjust this as per top nav padding top & bottom comes */
visibility: visible;
}
#submenu li {
float: none;
width: 100%;
}
#submenu a:hover {
background: #DF4B05;
}
#submenu a {
background-color: #000000;
}
<div class="container">
<nav class="dropdownmenu">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Articles on HTML5 & CSS3
<ul id="submenu">
<li>Difference between SVG vs. Canvas</li>
<li>New features in HTML5</li>
<li>Creating links to sections within a webpage</li>
</ul>
</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
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>
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>