0
Hello I am making a full screen menu type burger for a site with CSS and pure HTML. I made the code of this menu separate. But the problem is that the CSS code only works properly in the internal style, when I copy the same code to an external css file it works the wrong way. And the weird thing is, if I copy the last 3 CSS formatting and paste it in the internal style, it works correctly.
<html>
<head>
<title>Menu</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="h-estilo.css">
</head>
<body>
<input type="checkbox" id="menu-ham" autocomplete="off">
<label for="menu-ham">
<div class="menu">
<span class="hamburguer"></span>
</div>
</label>
<ul>
<li><a href="#">Home</a> </li>
<li><a href="#">About</a> </li>
<li><a href="#">Contact</a> </li>
</ul>
</body>
</html>
CSS:
*, *::after, *::before{
margin: 0;
padding: 0;
}
body{
background: #81ecec;
}
.menu{
background: #fff;
width: 60px;
height: 60px;
border-radius: 50%;
position: fixed;
bottom: 25px;
right: 25px;
cursor: pointer;
box-shadow: 0 0 0 0px #fff,
0 0 0 0px #fff;
transition: box-shadow 1s ease-in-out;
}
.menu:hover{
box-shadow: 0 0 0 8px #fff,
0 0 0 8px #fff;
}
.hamburguer{
display: block;
background: black;
width: 30px;
height: 2px;
position: relative;
top: 28px;
left: 15px;
transition: .5s ease-in-out;
}
.hamburguer::before,
.hamburguer::after{
content:'';
display: block;
width: 100%;
height: 100%;
background: black;
position: absolute;
transition: .5s ease-in-out;
}
.hamburguer::before{
top: -10px;
}
.hamburguer::after{
bottom: -10px;
}
input{
display: none;
}
input:checked ~ label .menu{
box-shadow: 0 0 0 130vw #fff,
0 0 0 130vh #fff;
}
input:checked ~ label .hamburguer{
transform: rotate(45deg);
}
input:checked ~ label .hamburguer:before{
transform: rotate(90deg);
top: 0;
}
input:checked ~ label .hamburguer:after{
transform: rotate(90deg);
bottom: 0;
}
ul{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
list-style: none;
opacity: 0;
transition: opacity 2s ease-in-out;
}
input:checked ~ ul{
opacity: 1;
}
a{
display: block;
margin-bottom: 40px;
color: #00cec9;
font-size: 47px;
text-decoration: none;
}
This may be happening due to the order that this CSS was placed inside your document, or simply pq vc applied the style in a "universal" way, directed directly to the tags as
a { }orul { }this way you apply the style in all the Links of your page, or in all the List!– hugocsl
It could be this if I were put more
ul { }and linksa{ }. But that’s all there isul { }and it’s just these linksa{ }what’s in the code. I even tried to do here the way you said, putting an exclusive selection for these tags, but the error remains.– Wandrei Martins do Nascimento