What I am trying to do is to get the hover effect that puts the anchor link a bit down, but somehow it affects all the links. Can somebody point out what I did wrong here?
nav {
width: 100%;
height: 5rem;
background: red;
}
ul {
margin: 0 auto;
font-size: 0;
}
ul li {
display: inline-block;
line-height: 4.8rem;
position: relative;
}
ul li > a {
text-decoration: none;
color: #FFF;
font-family: "Verdana";
padding: .1rem 1.5rem;
font-size: 1.3rem;
display: block;
overflow: hidden;
position: relative;
transition: 300ms all;
height: 100%;
margin: 0;
}
ul li > a::before, ul li > a::after {
content: '';
width: 100%;
position: absolute;
left: 0;
transition: 200ms all;
}
ul li > a::before {
background: #FFF;
height: .5rem;
top: 0;
transform: translateY(-100%);
}
ul li > a::after {
background: #000;
height: .4rem;
bottom: 0;
transform: translateY(100%);
}
ul li::before {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #CCC;
position: absolute;
opacity: 0;
}
ul li:hover > a {
padding-top: 0.6rem;
padding-bottom: 0.1rem;
}
ul li:hover > a::before, ul li:hover > a::after {
transform: translateY(0);
}
ul li:hover::before {
opacity: 0.3;
}
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</nav>
Why li:hover > a is affecting all list items?
The problem is not your :hover selector, it's the display-block on the lis. inline-blockelements align on the baseline, this means that when you add a padding-topto one of them, all the others move down as well. To fix it float the elements to the left to keep them on one line and aligned to the top:
Demo: https://jsfiddle.net/403zexop/
nav {
width:100%;
height:5rem;
background:red;
}
ul {
margin:0 auto;
font-size:0;
overflow: hidden;
li {
display:block;
line-height:4.8rem;
position:relative;
float: left;
>a{
text-decoration:none;
color:#FFF;
font-family:"Verdana";
padding:.1rem 1.5rem;
font-size:1.3rem;
display:block;
overflow:hidden;
position:relative;
transition:300ms all;
height:100%;
margin:0;
&::before,&::after{
content:'';
width:100%;
position:absolute;
left:0;
transition:200ms all;
}
&::before{
background:#FFF;
height:.5rem;
top:0;
transform:translateY(-100%);
}
&::after{
background:#000;
height:.4rem;
bottom:0;
transform:translateY(100%);
}
}
&::before{
content:'';
width:100%;
height:100%;
top:0;
left:0;
background:#CCC;
position:absolute;
opacity:0;
}
&:hover{
>a{
padding-top:0.6rem;
padding-bottom:0.1rem;
&::before,&::after{
transform:translateY(0);
}
}
&::before{
opacity:0.3;
}
}
}
}
Note: I cleared the floats by adding overflow: hidden; to the ul
"li:hover > a" is correct!
The problem is, that with changing the padding you alter the height of the element, and the parent container has to adapt and as well all other childs.
You can see it when you do not change the padding, but just the background-color of the hovered a. You will see, it is just altering the current element.
Related
So something is overriding the background-color property in my webpage. It works just fine in the mobile-scaled version, but for some reason when it runs the media-query the background color matches the body background color.
It does work, however, when I use nav{position: fixed;} but I can't set it as fixed because there's a header above it, so when you scroll down the nav sticks and there's a space above it.
So what's causing the media-query background color to be overridden?
EDIT
This is what I'm seeing when I have it fullscreen on my computer
desktop nav shot
And this is what I'm seeing when mobile layout mobile nav shot
(Sorry if it's an obvious answer and I'm just not seeing it)
/*NAV*/
nav
{
background-color: #3f3f3f; /*this color doesn't work in the media query*/
width: 100%;
color: #e9e9e9;
z-index: 3;
}
/*MOBILE FIRST FORMATTING*/
nav ul
{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
nav li a
{
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
nav li a:hover,
nav .hambut:hover
{
background-color: #189000; /*green*/
}
/*NAV LINKS*/
nav .menu
{
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/*MENU FORMATTING*/
nav .hamicon
{
cursor: pointer;
display: inline-block;
float: right;
padding: 2em 1.5em;
position: relative;
}
nav .hamicon .navicon
{
background: #e9e9e9;
display: block;
height: .15em;
position: relative;
transition: background .2s ease-out;
width: 1.5em;
}
nav .hamicon .navicon:before,
nav .hamicon .navicon:after
{
background: #e9e9e9;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
nav .hamicon .navicon:before
{
top: .375em;
}
nav .hamicon .navicon:after
{
top: -.375em;
}
/*HAMBURGER BUTTON*/
nav .hambut
{
display: none;
}
nav .hambut:checked ~ .menu
{
max-height: 15em;
}
nav .hambut:checked ~ .hamicon .navicon
{
background: transparent;
}
nav .hambut:checked ~ .hamicon .navicon:before
{
transform: rotate(-45deg);
}
nav .hambut:checked ~ .hamicon .navicon:after
{
transform: rotate(45deg);
}
nav .hambut:checked ~ .hamicon:not(.steps) .navicon:before,
nav .hambut:checked ~ .hamicon:not(.steps) .navicon:after
{
top: 0;
}
/*DESKTOP NAV FORMATTING*/
#media (min-width: 48em)
{
nav
{
background-color: #3f3f3f;
}
nav li
{
float: left;
}
nav li a
{
padding: 1em 1.5em;
}
nav .menu
{
clear: none;
float: right;
max-height: none;
}
nav .hamicon
{
display: none;
}
}
<nav>
<input class="hambut" type="checkbox" id="hambut" />
<label class="hamicon" for="hambut"><span class="navicon"></span></label>
<ul class="menu">
<li>About</li>
<li>Trailer</li>
<li>Download</li>
<li>Devs</li>
</ul>
</nav>
This happens because in the desktop version you are using float: right to align your <ul> element. float property has a weird behavior and it's not been designed to align block element, it's been designed to align inline elements instead.
For this reason, when an element has an automatic height and its child use float, the parent will ignore the size of that element to compute the height.
In your case the consequence is that, in your desktop version, your <nav> element won't use the height of <ul> to compute its own height, since there's no an explicit height and there are no other children, the resultant computed height will so be 0px.
You have two solutions, the first is to set a fixed height:
nav {
..
height: 50px;
}
The second, which is advised, is to use a so called clearfix.
A clearfix will cancel the effects of float and the parent element will use again all its children sizes to compute the height.
/*NAV*/
nav
{
background-color: #3f3f3f; /*this color doesn't work in the media query*/
width: 100%;
color: #e9e9e9;
z-index: 3;
}
/*MOBILE FIRST FORMATTING*/
nav ul
{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
nav li a
{
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
nav li a:hover,
nav .hambut:hover
{
background-color: #189000; /*green*/
}
/*NAV LINKS*/
nav .menu
{
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/*MENU FORMATTING*/
nav .hamicon
{
cursor: pointer;
display: inline-block;
float: right;
padding: 2em 1.5em;
position: relative;
}
nav .hamicon .navicon
{
background: #e9e9e9;
display: block;
height: .15em;
position: relative;
transition: background .2s ease-out;
width: 1.5em;
}
nav .hamicon .navicon:before,
nav .hamicon .navicon:after
{
background: #e9e9e9;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
nav .hamicon .navicon:before
{
top: .375em;
}
nav .hamicon .navicon:after
{
top: -.375em;
}
/*HAMBURGER BUTTON*/
nav .hambut
{
display: none;
}
nav .hambut:checked ~ .menu
{
max-height: 15em;
}
nav .hambut:checked ~ .hamicon .navicon
{
background: transparent;
}
nav .hambut:checked ~ .hamicon .navicon:before
{
transform: rotate(-45deg);
}
nav .hambut:checked ~ .hamicon .navicon:after
{
transform: rotate(45deg);
}
nav .hambut:checked ~ .hamicon:not(.steps) .navicon:before,
nav .hambut:checked ~ .hamicon:not(.steps) .navicon:after
{
top: 0;
}
/*DESKTOP NAV FORMATTING*/
#media (min-width: 48em)
{
nav
{
background-color: #3f3f3f;
}
nav li
{
float: left;
}
nav li a
{
padding: 1em 1.5em;
}
nav .menu
{
clear: none;
float: right;
max-height: none;
}
nav .hamicon
{
display: none;
}
}
<nav>
<input class="hambut" type="checkbox" id="hambut" />
<label class="hamicon" for="hambut"><span class="navicon"></span></label>
<ul class="menu">
<li>About</li>
<li>Trailer</li>
<li>Download</li>
<li>Devs</li>
</ul>
<!-- This is the clearfix -->
<div style="clear: both"></div>
<!-- End of clearfix -->
</nav>
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 %
...
}
I have a problem when try to make transition effect on fixed element from right to left. When I hover, all li elements transition too.
https://jsfiddle.net/k0fow2jb/
You got it fixed here
https://jsfiddle.net/k0fow2jb/3/
the important thing was to add margin-left:auto to your .side-menu li
.side-menu {
z-index: 999;
overflow: hidden;
position: fixed;
top: 25%;
right: 0;
}
.side-menu li{
cursor: pointer;
display: block;
list-style-type: none;
width: 40px;
height: 40px;
overflow: hidden;
position: relative;
transition: width 0.5s;
margin-left:auto;
}
.side-menu li a{
position: relative;
text-decoration: none;
color: #FFFFFF;
}
.ask-questions {
background: #19b5fe;
}
.ask-questions:hover{
width: 150px;
}
.facebook-link {
background: #3b5998;
}
.side-menu li:hover{
width:150px;
}
.support-box{
background: #dd4b39;
}
I'm doing "interactive" menu with pure css , code :
<div class="holder">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
</ul>
</div>
*{
margin:0;
padding:0;
}
.holder{
position:fixed;
z-index: 10;
overflow:hidden;
left:6em;
width:26em;
height:26em;
border-radius:50%;
border:1px solid black;
}
.holder ul li{
position:absolute;
width:10em;
height:10em;
left: 50%;
top: 50%;
transform-origin: 100% 100%;
overflow: hidden;
border:1px solid black;
margin-left:-10em;
margin-top:-10em;
}
.holder ul li:nth-child(1){
-webkit-transform:rotate(0deg) skew(45deg)
}
.holder ul li:nth-child(2){
-webkit-transform:rotate(45deg) skew(45deg)
}
.holder ul li:nth-child(3){
-webkit-transform:rotate(90deg) skew(45deg)
}
.holder ul li:nth-child(4){
-webkit-transform:rotate(135deg) skew(45deg)
}
.holder ul li:nth-child(5){
-webkit-transform:rotate(180deg) skew(45deg)
}
.holder ul li:nth-child(6){
-webkit-transform:rotate(225deg) skew(45deg)
}
.holder ul li:nth-child(7){
-webkit-transform:rotate(270deg) skew(45deg)
}
.holder ul li:nth-child(8){
-webkit-transform:rotate(315deg) skew(45deg)
}
.holder ul li a{
display:block;
position:absolute;
-webkit-transform:skew(-45deg) rotate(-67.5deg);
width:14em;
height:14em;
border-radius: 50%;
bottom: -6.25em;
right: -6.25em;
text-decoration: none;
text-align:Center;
background-color:red;
font-size: 1.18em;
padding-top: 2.8em;
}
live demo : http://jsfiddle.net/Trolstover/n9bge484/8/
but it seems it isnt possible to fill that empty space next to anchor tag , to make it look like triangle (a.k.a slice of pizza)
Is there any way how to reach that goal?
If all you are trying to do is create a downward triangle with pure CSS you can use the following snippet:
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
<div id="triangle-down"></div>
Additional CSS shapes can be found here: https://css-tricks.com/examples/ShapesOfCSS/
Edit: I may have misunderstood the original pizza-like question. I assumed you meant a downward triangle.
Instead it seems you want to simply fill in the white area with color. If that is correct you could do the following:
.holder{background:red;}
Try increasing the dimensions of the li and remove the border radius.
width:13em;
height:13em;
margin-left:-13em;
margin-top:-13em;
* {
margin: 0;
padding: 0;
}
.holder {
position: fixed;
z-index: 10;
overflow: hidden;
left: 6em;
width: 26em;
height: 26em;
border-radius: 50%;
border: 1px solid black;
}
.holder ul li {
position: absolute;
width: 13em;
height: 13em;
left: 50%;
top: 50%;
transform-origin: 100% 100%;
overflow: hidden;
border: 1px solid black;
margin-left: -13em;
margin-top: -13em;
}
.holder ul li:nth-child(1) {
-webkit-transform: rotate(0deg) skew(45deg)
}
.holder ul li:nth-child(2) {
-webkit-transform: rotate(45deg) skew(45deg)
}
.holder ul li:nth-child(3) {
-webkit-transform: rotate(90deg) skew(45deg)
}
.holder ul li:nth-child(4) {
-webkit-transform: rotate(135deg) skew(45deg)
}
.holder ul li:nth-child(5) {
-webkit-transform: rotate(180deg) skew(45deg)
}
.holder ul li:nth-child(6) {
-webkit-transform: rotate(225deg) skew(45deg)
}
.holder ul li:nth-child(7) {
-webkit-transform: rotate(270deg) skew(45deg)
}
.holder ul li:nth-child(8) {
-webkit-transform: rotate(315deg) skew(45deg)
}
.holder ul li a {
display: block;
position: absolute;
-webkit-transform: skew(-45deg) rotate(-67.5deg);
width: 14em;
height: 14em;
bottom: -6.25em;
right: -6.25em;
text-decoration: none;
text-align: Center;
background-color: red;
font-size: 1.18em;
padding-top: 2.8em;
}
<div class="holder">
<ul>
<li>one
</li>
<li>two
</li>
<li>three
</li>
<li>four
</li>
<li>five
</li>
<li>six
</li>
<li>seven
</li>
<li>eight
</li>
</ul>
I want to make an ul li menu and I want to place each li element over previous one.
I don't know if I can explain with words what I mean, so I've made an image showing desired effect:
How can I do this using plain CSS? Is it possible, or I must use javascript?
This is what I've tried so far:
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
position: relative;
}
li a {
display: block;
position: absolute;
top: -30px;
z-index: 1;
width: 225px;
height: 115px;
}
but each li appears on the same place over previous one.
You can use a negative margin-top to "lift" the li elements.
http://jsfiddle.net/tomprogramming/mbe9W/
relevant CSS
li { padding:10px; border:1px solid #000; margin-top:-10px; }
li:first-of-type {
margin-top:0;
}
I think this is close:
<ul>
<li><a class="a" href="#">A</a></li>
<li><a class="b" href="#">B</a></li>
<li><a class="c" href="#">C</a></li>
</ul>
CSS:
ul {
margin: 0;
padding: 0;
list-style: none;
padding-top:30px;
}
li {
position: relative;
height:50px;
}
li a {
display: block;
position: absolute;
height:20px;
top: -30px;
left:0;
width:225px;
height:115px;
}
.a {
border:1px solid #ff0000
}
.b {
border:1px solid #00ff00
}
.c {
border:1px solid #ffff00
}