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

【问题标题】：CSS Floating expandable menu to display contentCSS浮动可扩展菜单以显示内容
【发布时间】：2015-12-22 19:44:33
【问题描述】：

请善待我，因为我是菜鸟。我已经在 html 中创建了一个页面，但现在我需要做一些我认为 html 做不到的事情。在左侧，我希望创建一个可扩展的浮动菜单。这将是垂直的。当您单击第一个选项时，它会随着说明展开，然后您可以将其关闭。然后一个人可能会跳到第四个。一直以来，中间都会有一个主要的 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，所以我可以更多地理解这一点。任何和所有的建议都会很棒。提前谢谢你。

【问题讨论】：

标签： html css menu floating

【解决方案1】：

我认为您正在寻找的是手风琴菜单。

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

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

【讨论】：