我正在尝试创建一个切换菜单,我有一个菜单,当我点击它时会展开,当我再次点击它时会关闭。
它的HTML代码是
<label for="menu-toggle"><img src="icons/navicon.png"></label>
<input type="checkbox" id="menu-toggle"/>
<ul id="menu">
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Third link</a></li>
</ul>
CSS 是
<style>
label
{
cursor: pointer;
}
#menu-toggle
{
display: none; /* hide the checkbox */
}
#menu
{
display: none;
}
#menu-toggle:checked + #menu
{
display: block;
}
</style>
开关看起来像这样
当我点击 3 行图像时,它看起来像这样
我希望当我点击 3 行图像时,菜单应该显示在一个垂直列表中,在一个白色背景的 block 中。像这样
谁能告诉我怎么做
最佳答案
图片在这里看不到。但您可以做的是为 block 设置背景颜色和宽度标记的 css。
有点像
#menu
{
显示:无;
宽度:30%;
背景色:绿色;
关于javascript - 以垂直列表的形式创建一个切换菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30365336/