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

Question

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

Navigation

#1 by (0 votes)

1

I have a menu made with 'ul' lists with a sub-menu displayed when clicking on the 'checkbox' The element is too far away and the reference using the 'checkbox' is fine at the beginning, I'm not sure how to specify the address # sm2, in order to display the sub menu when clicking the checkbox, since I did not want to insert the checkbox on top of the third "home" I left a / note / in the CSS where I made the specification that does 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

asked by anonymous 22.05.2018 / 23:02

1 answer

Strange character in place of the directory Delete unwanted VBA values

score 0 · Accepted Answer

You can "shorten" this path simply by placing a class in the% w_that you want to show. So your rule in CSS would look like this: <li> . Note with class .test you do not need to put .rd2:checked ~ li.teste 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: That way you did it seems that your intention was when to dial one also uncheck the other confers? If it is only with CSS you will not be able to solve it, even if you put it as invisible the button continues with status li li li ul#sm2 understands, then when you click again to check it is already checked, it is not visible on the screen. Half complicated, right, but the fact is that it will not work that way if your intention is to just mark one at a time, or uncheck one when you click on the other.