Codigo HTML, using Google Fonts
.nav_burguer .checkbox_nav {
display: block;
}
.nav_burguer #menu_close {
display: none;
}
.nav_burguer #menu_abrir {
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
margin: 1rem;
}
.nav_burguer label {
cursor: pointer;
}
#checkbox_nav:checked+nav .menu li {
display: none;
}
#checkbox_nav:checked+.nav_burguer #menu_close {
display: block;
}
#checkbox_nav:checked+.nav_burguer #menu_abrir {
display: none;
}
<div class="nav_burguer">
<label for="checkbox_nav">
<span id="menu_abrir" class="material-icons"> menu </span>
<span id="menu_close" class="material-icons"> close </span>
<input type="checkbox" class="checkbox_nav" id="checkbox_nav" />
</label>
</div>
I'm trying to make a responsive menu, but the marked pseudo event doesn't work.
Any ideas what I'm doing wrong?
Related
I am trying to do simple Tabs on my page, so I have 3 tabs and 3 sections for them. Problem is that in first section i can see all sections containers, in second 2 last and in this last. And it should be simple one section for one tab.
What am i missing?
My html and code https://codepen.io/wojsza/pen/XWMOXXm :
.display__tabs {
display: flex;
flex-wrap: wrap; }
.display__tabs--tab {
display: none; }
.display__tabs--tab:checked ~ .display__tabs--label ~ .display__tabs--content {
display: block; }
.display__tabs--label {
cursor: pointer;
padding: 25px;
color: #2e2e2e; }
.display__tabs--label:hover {
color: #aeaeae;
background-color: #2e2e2e;
font-weight: bold;
text-decoration: underline; }
.display__tabs--content {
width: 100%;
padding: 20px;
order: 1;
display: none; }
and html:
<div class="display__tabs">
<input type="radio" class="display__tabs--tab" id="display-module-info" name="module" checked="checked" />
<label class="display__tabs--label" for="display-module-info">Info</label>
<div class="display__tabs--content">
<p>Module</p>
</div>
<input type="radio" class="display__tabs--tab" id="display-module-wsu" name="module" />
<label for="display-module-wsu" class="display__tabs--label">Wsu</label>
<div class="display__tabs--content">
<p>
WSU
</p>
</div>
<input type="radio" class="display__tabs--tab" id="display-module-sections" name="module" />
<label for="display-module-sections" class="display__tabs--label">Sections</label>
<div class="display__tabs--content">
<p>
SECTION
</p>
</div>
</div>
You nearly there! Just need to change the "~" into "+".
You wanna change your css on this part :
From
.display__tabs--tab:checked ~ .display__tabs--label ~ .display__tabs--content {
display: block;
}
To
.display__tabs--tab:checked + .display__tabs--label + .display__tabs--content {
display: block;
}
This caused by the css selector of ~ which select the general sibling, and you wanted to use +, because the radio element that being set to hidden and block, is adjacent sibling. Reference https://levelup.gitconnected.com/understanding-use-of-the-and-symbols-in-css-selectors-95552eb436f5
You can just add a second class to radio inputs, and display__tabs--content. Then, you can just add CSS for each one of them.
.display__tabs {
display: flex;
flex-wrap: wrap;
}
.display__tabs--tab {
display: none;
}
.tab1:checked ~ .display__tabs--label ~ .display__tabs--content.content1 {
display: block;
}
.tab2:checked ~ .display__tabs--label ~ .display__tabs--content.content2 {
display: block;
}
.tab3:checked ~ .display__tabs--label ~ .display__tabs--content.content3 {
display: block;
}
.display__tabs--label {
cursor: pointer;
padding: 25px;
color: #2e2e2e;
}
.display__tabs--label:hover {
color: #aeaeae;
background-color: #2e2e2e;
font-weight: bold;
text-decoration: underline;
}
.display__tabs--content {
width: 100%;
padding: 20px;
order: 1;
display: none;
}
<div class="display__tabs">
<input type="radio" class="display__tabs--tab tab1" id="display-module-info" name="module" checked="checked" />
<label class="display__tabs--label" for="display-module-info">Info</label>
<div class="display__tabs--content content1">
<p>Module</p>
</div>
<input type="radio" class="display__tabs--tab tab2" id="display-module-wsu" name="module" />
<label for="display-module-wsu" class="display__tabs--label">Wsu</label>
<div class="display__tabs--content content2">
<p>
WSU
</p>
</div>
<input type="radio" class="display__tabs--tab tab3" id="display-module-sections" name="module" />
<label for="display-module-sections" class="display__tabs--label">Sections</label>
<div class="display__tabs--content content3">
<p>
SECTION
</p>
</div>
</div>
I have a problem with an <i> element that must be seen only in a media query. The problem is I can see everything works fine in my inspector, but despite <i> takes the right font-size, and takes the right space, it doesn't take the color I gave it. The inspector even shows the right color without problems, but the element doesn't take it, it takes the background color of the section, making it impossible to be seen.
The one I want to show in the media query is id="footer-left-options", the other two above not.
Here some code to help
/*footer-left*/
.footer-section-left {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.footer-album-cover {
width: 50px;
min-width: 40px;
cursor: pointer;
}
.footer-album-cover img {
width: 100%;
}
.footer-album-info {
margin-left: 10px;
margin-right: 30px;
cursor: pointer;
}
.footer-album-info-artist a {
font-size: 10px;
color: #8d8d8d;
text-decoration: none;
}
.footer-album-info-artist a:hover {
text-decoration: underline;
}
.footer-icon-left>i {
color: #797979;
font-size: 16px;
font-weight: 500;
padding-right: 10px;
cursor: pointer;
}
.footer-icon-left>i:hover {
color: white;
}
#footer-left-options {
display: none;
}
#media all and (max-width: 532px) {
.footer-section-left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.footer-album-cover {
width: 30px;
min-width: 30px;
}
.footer-album-info {
margin-left: 0;
margin-right: 0;
}
.footer-icon-left>i {
display: none;
}
#footer-left-options {
padding-right: 0;
display: block;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<!--footer-left-->
<div class="footer-section-left">
<div class="footer-album-cover">
<img src="img/sinister.jpeg" alt="Sinister">
</div>
<div class="footer-album-info">
<div class="footer-album-info-title">Sinister</div>
<div class="footer-album-info-artist">
Brano nome
</div>
</div>
<div class="footer-icon-left">
<i class="far fa-heart"></i>
<i class="far fa-folder"></i>
<i id="footer-left-options" class="fas fa-ellipsis-h"></i>
</div>
</div>
The problem is the font-weight, since the <i> inherited the font-weight:500 from the previous rule:
.footer-icon-left>i {
color: #797979;
font-size: 16px;
font-weight: 500;
padding-right: 10px;
cursor: pointer;
}
Thanks to this site https://www.amp-blogger.com/2019/01/font-awesome-5-not-working-on-css.html I've found the answer. The <i> I've token from Font Awesome was this https://fontawesome.com/icons/ellipsis-h?style=solid and opening the link you can see that the icon is described as "solid" and has two pro version both in "regular" and "light" font-weight. Now, since 500 isn't solid (bold), the icon took the color I wanted for it, but didn't display at all! Changing font-weight to font-weight:800 solves the problem, the icon shows itself regularly and the color is correct.
Thanks everybody for the help!
/*footer-left*/
.footer-section-left {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.footer-album-cover {
width: 50px;
min-width: 40px;
cursor: pointer;
}
.footer-album-cover img {
width: 100%;
}
.footer-album-info {
margin-left: 10px;
margin-right: 30px;
cursor: pointer;
}
.footer-album-info-artist a {
font-size: 10px;
color: #8d8d8d;
text-decoration: none;
}
.footer-album-info-artist a:hover {
text-decoration: underline;
}
.footer-icon-left>i {
color: #797979;
font-size: 16px;
font-weight: 500;
padding-right: 10px;
cursor: pointer;
}
.footer-icon-left>i:hover {
color: red;
}
#footer-left-options {
display: none;
}
#media all and (max-width: 532px) {
.footer-section-left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.footer-album-cover {
width: 30px;
min-width: 30px;
}
.footer-album-info {
margin-left: 0;
margin-right: 0;
}
#footer-left-options {
padding-right: 0;
display: block;
}
}
<script src="https://kit.fontawesome.com/f10f36656a.js" crossorigin="anonymous"></script>
<!--footer-left-->
<div class="footer-section-left">
<div class="footer-album-cover">
<img src="img/sinister.jpeg" alt="Sinister">
</div>
<div class="footer-album-info">
<div class="footer-album-info-title">Sinister</div>
<div class="footer-album-info-artist">
Brano nome
</div>
</div>
<div class="footer-icon-left">
<i class="far fa-heart"></i>
<i class="far fa-folder"></i>
<i id="footer-left-options" class="fas fa-ellipsis-h"></i>
</div>
</div>
I'm trying to create a menu with options inside. I'm using only CSS with checkbox and radio inputs.
By changing one of the options, I also want the menu to close. I tried this using label inside label, but it doesn't work.
My prototype code:
input {
display: none;
}
label {
cursor: pointer;
}
label span:hover {
font-weight: 600;
}
.opener .menu {
background-color: #f3f3f3;
display: flex;
flex-direction: column;
color: #4d4d4d;
padding: 12px 4px;
width: 270px;
}
#menu:checked~.opener .menu {
display: none;
}
#menu~.opener>span:nth-of-type(1) {
display: none;
}
#menu:~.opener>span:nth-of-type(2) {
display: block;
}
#menu:checked~.opener>span:nth-of-type(1) {
display: block;
}
#menu:checked~.opener>span:nth-of-type(2) {
display: none;
}
.box {
height: 50px;
width: 50px;
margin: 20px 0;
}
#red:checked~.box {
background-color: red;
}
#blue:checked~.box {
background-color: blue;
}
#green:checked~.box {
background-color: green;
}
<input id="menu" type="checkbox"></input>
<input id="red" type="radio" name="opcoes" checked></input>
<input id="blue" type="radio" name="opcoes"></input>
<input id="green" type="radio" name="opcoes"></input>
<label class="opener" for="menu"><span>Open</span><span>Close</span>
<div class="menu">
<label for="red"><span>red</span></label>
<label for="blue"><span>blue</span></label>
<label for="green"><span>green</span></label>
</div>
</label>
<div class="box"></div>
Or you can check here: https://codepen.io/anon/pen/JxzPKR
Is there a way to close the menu when you click on one of the options without JavaScript?
Sometimes, contrary to popular opinion, it's just more dev friendly to use Javascript.
There is too much conditional logic for this to be a pure CSS solution. There are ~3 if-then-else conditions you would have to satisfy, while keeping the styles cascading. I think the most arduous task to satisfy is that you have a toggle header, in addition to other controls toggling it.
This will inherently get more complex and convoluted the more components you add. But here is an example using :target. This is a work-around and provides a solution to the question at hand. You won't be able to 'toggle' the menu this way so I had to add the header under the elements so it can be accessed via some kind of sibling selector:
.menu {
position: relative;
width: 45%;
}
input[type="radio"] {
position: absolute;
opacity: 0;
height: 0;
width: 0;
}
a:any-link {
all: unset;
}
.menu-header {
position: absolute;
top: 0;
padding: 5px 10px;
color: white;
width: 100%;
background-color: cornflowerblue;
}
.menu-header a {
font-weight: bold;
cursor: pointer;
color: white;
font-size: 22px;
}
.menu-header .close {
display: none;
}
#menu-body {
display: none;
flex-flow: column nowrap;
position: absolute;
top: 34px;
background-color: rgba(220,220,220,1);
height: 100px;
color: black;
width: 100%;
padding: 10px;
}
.menu-header a,
#menu-body label {
cursor: pointer;
}
#menu-body:not(:target) {
display: none;
}
#menu-body:not(:target) + .menu-header > a:not(.close) {
display: inline-block;
}
#menu-body:target {
display: flex;
}
#menu-body:target + .menu-header > a {
display: none;
}
#menu-body:target + .menu-header > a.close {
display: inline-block;
}
<div class="menu">
<div id="menu-body">
<input id="red" type="radio" name="opcoes" checked/>
<label for="red">Red</label>
<input id="blue" type="radio" name="opcoes"/>
<label for="blue">Blue</label>
<input id="green" type="radio" name="opcoes"/>
<label for="green">Green</label>
</div>
<div class="menu-header">≡ Open≡ Close</div>
</div>
You should consider accessability using this method, or at minimum, how this effects site navigation.
Edit: A demo in regards to discussion in comments:
.menu {
position: relative;
width: 45%;
}
input[type="radio"] {
position: absolute;
opacity: 0;
height: 0;
width: 0;
}
a:any-link {
all: unset;
}
#menu-header {
position: absolute;
top: 0;
padding: 5px 10px;
color: white;
width: 100%;
background-color: cornflowerblue;
}
#menu-header a {
font-weight: bold;
cursor: pointer;
color: white;
font-size: 22px;
}
#menu-header .close {
display: none;
}
#menu-body {
display: none;
flex-flow: column nowrap;
position: absolute;
top: 34px;
background-color: rgba(220,220,220,1);
height: 100px;
color: black;
width: 100%;
padding: 10px;
}
.menu-header a,
#menu-body label {
cursor: pointer;
}
#menu-body:not(:target) {
display: none;
}
#menu-body:not(:target) ~ .menu-header > a:not(.close) {
display: inline-block;
}
#menu-body:target {
display: flex;
}
#menu-body:target ~ #menu-header > a {
display: none;
}
#menu-body:target ~ #menu-header > a.close {
display: inline-block;
}
#red:target ~ .box {
background-color: red;
}
#blue:target ~ .box {
background-color: blue;
}
#green:target ~ .box {
background-color: green;
}
.box {
background-color: black;
width: 75px; height : 75px;
}
<div class="menu">
<input id="red" type="radio" name="opcoes" checked/>
<input id="blue" type="radio" name="opcoes"/>
<input id="green" type="radio" name="opcoes"/>
<div id="menu-body">
Red
Blue
Green
</div>
<div class="box"></div>
<div id="menu-header">
≡ Open
≡ Close
</div>
</div>
Here's the problem. My checkbox was default one and I changed it by deleting the default styles with: -webkit-appearance: none;. But what happened after, you can see in the fiddle.
Somewhy, it's isn't aligned anymore. Tried to use vertical-align: middle or text-align:center, but didn't helped.
Why did it even happened and how to fix it?
.more-dropdown-price {
float: right;
vertical-align: middle;
}
.more-dropdown-checkbox {
height: 18px;
width: 18px;
border: 1px solid #92aabb;
-webkit-appearance: none;
display: inline-block;
}
input[type=checkbox]:checked {
background-color: #3180D8;
}
.dropdown-items:hover {
background-color: #87CEFA;
}
<div class="more-dropdown">
<div class="dropdown-items">
<input type="checkbox" class="more-dropdown-checkbox"> Foo <span class="more-dropdown-price"> 155$ </span>
</div>
<div class="dropdown-items">
<input type="checkbox" class="more-dropdown-checkbox"> Bar <span class="more-dropdown-price"> 15$ </span>
</div>
I suggest adding the following to your .dropdown-item class:
.dropdown-item{
display: flex;
align-items: center;
}
Add vertical-align: middle; to input.
.more-dropdown-price {
float: right;
vertical-align: middle;
}
.more-dropdown-checkbox {
height: 18px;
width: 18px;
border: 1px solid #92aabb;
-webkit-appearance: none;
display: inline-block;
vertical-align: middle;
}
input[type=checkbox]:checked {
background-color: #3180D8;
}
.dropdown-items:hover {
background-color: #87CEFA;
}
<div class="more-dropdown">
<div class="dropdown-items">
<input type="checkbox" class="more-dropdown-checkbox"> Foo <span class="more-dropdown-price"> 155$ </span>
</div>
<div class="dropdown-items">
<input type="checkbox" class="more-dropdown-checkbox"> Bar <span class="more-dropdown-price"> 15$ </span>
</div>
try something like this:
.dropdown-items:hover {
background-color: #87CEFA;
display: flex;
align-items: center;
align-content: center;
}
But I think you should align to the left because the elements have different number of letters so they are never aligned
I want to use the checkbox-trick to show my mobile navbar. Somehow the h1 isn't showin up even when the invisible checkbox is checked. What have I done wrong?
#label {
margin-left: auto;
margin-right: auto;
color: #000000;
font-size: 35px;
cursor: pointer;
width: 47px;
}
h1 {
display: none
}
#toggle {
display: none;
}
#toggle:checked + h1 {
display: block;
}
<div id="hamburgermenu">
<label id="label" for="toggle">☰</label>
<input id="toggle" type="checkbox">
</div>
<h1>DEMO ELEMENT</h1>
You're using "+" which is a sibling CSS selector, but <h1> isn't a sibling of your checkbox. It's a sibling of the checkbox's parent container. You can have 3 ways to go about it.
First way: Make it the sibling of the input by placing it inside
#label {
margin-left: auto;
margin-right: auto;
color: #000000;
font-size: 35px;
cursor: pointer;
width: 47px;
}
h1 {
display: none
}
#toggle {
display: none;
}
#toggle:checked+h1 {
display: block;
}
<div id="hamburgermenu">
<label id="label" for="toggle">☰</label>
<input id="toggle" type="checkbox">
<h1>DEMO ELEMENT</h1>
</div>
Second way: Make it the sibling of the input by taking the input out of the container
#label {
margin-left: auto;
margin-right: auto;
color: #000000;
font-size: 35px;
cursor: pointer;
width: 47px;
}
h1 {
display: none
}
#toggle {
display: none;
}
#toggle:checked + h1 {
display: block;
}
<div id="hamburgermenu">
<label id="label" for="toggle">☰</label>
</div>
<input id="toggle" type="checkbox">
<h1>DEMO ELEMENT</h1>
Third way: Make use of javascript.