Question

我正在尝试创建一个切换菜单，我有一个菜单，当我点击它时会展开，当我再次点击它时会关闭。

它的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>

切换看起来像这样

enter image description here

当我点击3行图像时，它看起来像这样

enter image description here

我希望当我点击3行图像时，菜单应显示在垂直列表中，在具有白色背景的块中。像这样的东西

enter image description here

任何人都可以告诉我如何做到这一点

Answer 1

这里看不到图像。但是你可以做的是css用于块的背景颜色和宽度标记。

类似

#menu { display: none; width: 30%; background-color:green;

Answer 2

更新CSS：

#menu {
    display: none;
    list-style-type: none;
    border-radius: 5px;
    background-color: lightgray;
    padding-left: 5px;
}

#menu-toggle:checked + #menu {
    display: block;
}

li a {
    color: #000;
    text-decoration: none;   
}

#menu li {
    padding: 10px;
    border-bottom: 1px solid #000;    
    margin-left: 5px;
    margin-right: 5px;
}

DEMO

Answer 3

嘿，我只是对你给定的代码做了一些调整，并希望输出接近你给定图片中的输出。

<style>
label
    {
        cursor: pointer;
    }

 a {
 	  text-decoration: none;
 	  color: #9A9494;
   }

 li { 
	  border-bottom:#ccc solid 1px; /* This is the divider line in between the list items */    
    }

#menu-toggle
    {
        display: none; /* hide the checkbox */
    }

#menu 
    {
        display: none;             
    }

#menu-toggle:checked + #menu 
    {
        display: block;
    }

 .xyz{
 	
 	padding-bottom: 10px;
 	font-size: 30px;
 	background-color: #fff; 	
   }
   
 .container{
 	background-color: #ccc;
 	width:15%;
 	border-radius: 10px;
 }  

</style>

<!DOCTYPE html>
<html>
<head>
	<title>DropDown</title>	
</head>
<body>

<label for="menu-toggle"><img src="icons/navicon.png"></label>
<div class="container">
<input type="checkbox" id="menu-toggle"/>
  	
    <ul id="menu" style="list-style: none; padding:15px; border-radius: 15px;" >
    
        <li class="xyz" ><a href="#" >First link</a></li>  
        <li class="xyz"><a href="#">Second link</a></li> 
        <li class="xyz"><a href="#">Third link</a></li>

    </ul>
   
</div>    
</body>
</html>

我将样式表与html结合起来......很好帮助你......：）

以垂直列表的形式创建切换菜单

3 个答案: