文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS浮动可扩展菜单以显示内容

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

Stack Overflow用户

提问于 2015-12-22 19:44:33

回答 1查看 648关注 0票数 0

请仁慈地对待我，因为我是个菜鸟。我已经用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，这样我就能更好地理解这一点。任何和所有的建议都会很好。提前谢谢你。

floating

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-12-22 20:14:07

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

如果要使用纯CSS，则需要使用CSS转换。做了一个快速的Google搜索，找到了一个简单的例子：http://bradsknutson.com/blog/css-only-accordion/

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

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34423324

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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