How do I specify a distant address within several others using an input type="checkbox"

Asked

Viewed 23 times

1

I have a menu made with lists 'ul' with a sub-menu when clicking on the "checkbox" The element is very far away and the reference using the "checkbox" is right at the beginning, I do not know how to specify the address #sm2, to be able to display the sub menu when clicking the checkbox, because I didn’t want to insert the checkbox on top of the third "home" I left a /observing/ in the CSS where I made the specification that is not right

.menu{ width:100%; height:48px; background-color:#000; font-family:Arial, Helvetica, sans-serif;
}
.menu ul{ list-style:none; position:relative;
}
.menu ul li{ width:150px; float:left;
}
.menu a{ padding:15px; color:#000; display:block; background-color:#F00; font-family:Arial, Helvetica, sans-serif; text-align:center; text-decoration:none;
}
.menu ul ul{ position:absolute; visibility: hidden;
}
.menu ul li:hover ul{ visibility:;
}
.menu a:hover{ background-color:#FFF;
}
.menu ul ul li{ float:none;
}
.menu ul ul li a{ border-bottom:1px solid #999; background-color:#CCC;
}
.menu #mv{ position:absolute; left:150px; top:49px;
}

.rd:checked ~ li ul#sm{ visibility:visible;}

/*Observação!*/
.rd2:checked ~  li ul ul ul #sm2{ visibility:visible;}

.rd2:checked ~ li ul#sm{ visibility:hidden;
}
<body bgcolor="#33CC99">
<nav class="menu">
<ul>
<input type="checkbox" name="tb" class="rd" id="t1"/>
<input type="checkbox" name="tb" class="rd2" id="t2"/>
 <li><a href="javascriptvoid:(0)">Home</a>
 <ul id="sm">
   <li><a href="javascriptvoid:(0)">Serviços</a></li>
   <li><a href="javascriptvoid:(0)">Serviços</a>
    
    <ul id="mv">
        <li><a href="javascriptvoid:(0)" >Contatos</a></li>
    </ul>
   </li>
 
 </ul>
 </li>
 <li><a href="javascriptvoid:(0)">Home</a></li>
 <li><a href="javascriptvoid:(0)">Home</a>
 

   <ul id="sm2">
     <li><a href="javascriptvoid:(0)" >Aulas</a></li>
     <li><a href="javascriptvoid:(0)" >Aulas</a></li>
   </ul>
 </li>
</ul>
</nav>


</body>

html css input checkbox

1 answer

0


Dude you can "shorten" this path by simply putting a class on <li> that you want to show. So your CSS rule would look like this: .rd2:checked ~ li.teste ul#sm2{ }. Notice with the class . test you don’t need to keep putting li li li ul#sm2

.menu{ width:100%; height:48px; background-color:#000; font-family:Arial, Helvetica, sans-serif;
}
.menu ul{ list-style:none; position:relative;
}
.menu ul li{ width:150px; float:left;
}
.menu a{ padding:15px; color:#000; display:block; background-color:#F00; font-family:Arial, Helvetica, sans-serif; text-align:center; text-decoration:none;
}
.menu ul ul{ position:absolute; visibility: hidden;
}
.menu ul li:hover ul{ visibility:;
}
.menu a:hover{ background-color:#FFF;
}
.menu ul ul li{ float:none;
}
.menu ul ul li a{ border-bottom:1px solid #999; background-color:#CCC;
}
.menu #mv{ position:absolute; left:150px; top:49px;
}

#sm, #sm2 { visibility:hidden;}

.rd:checked ~ li ul#sm{ visibility:visible;}
/*.rd:checked ~  li.teste ul#sm2{ visibility:hidden;} se vc deixar isso seu menu bugga */

/*Observação!*/
.rd2:checked ~  li.teste ul#sm2{ visibility:visible;}

/*.rd2:checked ~ li ul#sm{ visibility:hidden;} se vc deixar isso seu menu bugga*/
<nav class="menu">
    <ul>
    <input type="checkbox" name="tb" class="rd" id="t1"/>
    <input type="checkbox" name="tb" class="rd2" id="t2"/>
    <li><a href="javascriptvoid:(0)">Home1</a>
        <ul id="sm">
        <li><a href="javascriptvoid:(0)">Serviços</a></li>
        <li><a href="javascriptvoid:(0)">Serviços</a>
            <ul id="mv">
                <li><a href="javascriptvoid:(0)" >Contatos</a></li>
            </ul>
        </li>
        </ul>
    </li>
    <li><a href="javascriptvoid:(0)">Home2</a></li>
    <li class="teste"><a href="javascriptvoid:(0)">Home3</a>
    <ul id="sm2">
        <li><a href="javascriptvoid:(0)" >Aulas</a></li>
        <li><a href="javascriptvoid:(0)" >Aulas</a></li>
    </ul>
    </li>
    </ul>
</nav>

OBS: Face this way you did it seems like your intention was to score one also unmark the other checks out? If this is really only with CSS you will not be able to solve, because you put it as invisible the button continues with status checked You see, when you click again to actually check it’s already checked, it’s just not visible on the screen. Kind of tricky right, but the fact is it’s not going to work that way if your intention is just to mark one at a time, or uncheck one when you click the other.

  • kkkkkk I just took the test here kkk and you’re right! It really didn’t work out, in these hours of a depre kk, your example of putting a "class" address worked, I thank you! I didn’t even think about it at the time I was doing the menu, for life... but the important thing is the knowledge of mistakes

  • @Elienayjunior has hours when you only realize the mistake when you get to him. But in time you will see the mistakes from afar and you will know in advance what will work or not. I myself have been through this problem haha, even you taking the menu off the screen btn remains checked, ai da pau mesmo... However good I helped, good luck there in the project! []s

Browser other questions tagged html css input checkbox

You are not signed in. Login or sign up in order to post.