Question

请和我一样善待，因为我是一个菜鸟。我已经用html创建了一个页面，但现在我需要做一些我认为html无法做到的事情。在左侧，我希望创建一个可扩展的浮动菜单。这将是垂直的。当您单击第一个选项时，它会随指示一起展开，然后您可以关闭它。然后人们可能会跳到第4位。一直以来，中间会有一个主html地图（已经完成），他们可以尝试说明中的内容。我完全是CSS的新手。我发现了类似于我想要的东西，但并不完全。

    <style>
    body {
        margin: 0;
     }

    ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
background-color: #f1f1f1;
position: fixed;
height: 50%;
overflow: auto;
    }

    li a {
display: inline;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
    }

    li a.active {
background-color: #4CAF50;
color: white;
    }

    li a:hover:not(.active) {
background-color: #555;
color: white;
    }
    </style>

    <body>

    <ul>
      <li><a class="active" href="home.htm">Home</a></li>
      <li><a href="#one.htm">One</a></li>
      <li><a href="#two.htm">TWo</a></li>
      <li><a href="#Three.htm">Three</a></li>
    </ul>

    <div style="margin-left:15%;padding:1px 16px;height:1000px;">
    <img src="image.png" width="1200" height="900" usemap="#map" /> 

    <map name="map">

    </map>
    </div>

    </body>

我可能完全不喜欢这个。我开始学习CSS，所以我可以更多地了解它。任何和所有的建议都会很棒。提前谢谢。

Answer 1

我认为你要找的是手风琴菜单。

如果要使用纯CSS，则需要使用CSS过渡。快速谷歌搜索并找到一个简单的例子： http://bradsknutson.com/blog/css-only-accordion/

如果您不介意使用一些Javascript，那么jQuery UI有一个快速且易于使用的手风琴菜单，您可以选择不同的选项（例如可排序的菜单等）。如果您之前没有使用过jQuery UI，则可能需要学习jQuery设置基础知识。 https://jqueryui.com/accordion/#sortable

CSS浮动可扩展菜单以显示内容

1 个答案: