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

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 转换。快速 Google 搜索并找到了一个简单的示例： http://bradsknutson.com/blog/css-only-accordion/

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

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

CSS Floating expandable menu to display content

html

css

menu

floating