悬停时显示垂直按钮集，无需移动/向下推背景内容

嗨：多年来，我在很多网站上都看到过这个(顶部的水平按钮栏，将鼠标悬停在其中一个主要按钮上时会显示相关子功能的访问按钮(，但不太确定该怎么做。我在这里找到了代码，实际上让我在没有任何javascript的情况下走到了一半，但是每当显示子按钮集时，它都会向下推送所有后续页面内容。我不要这个。我宁愿在页面内容的顶部(即覆盖(打开按钮集，而不移动任何"后面"的内容。

这是一个小提琴，显示了我到目前为止所得到的......

    <html>
        <head>
        <style>
        body{position:fixed;}
        button{ width: 100%; }
        button.hidden { display:none;}
        button.main {display:block;}
        div.buttongroup {display:block; float: left; width: 20%;}
        div.buttongroup:hover .hidden {display:block;}
    </style>
    </head>
    <body>
        <div class="buttongroup" id="one">
        <button class="main">MAIN 1</button>
        <button class="hidden">2</button>
        <button class="hidden">3</button>
        <button class="hidden">4</button>
        <button class="hidden">5</button>
        </div>
        <div class="buttongroup" id="two">
        <button class="main">MAIN 2</button>
        <button class="hidden">2</button>
        <button class="hidden">3</button>
        <button class="hidden">4</button>
        <button class="hidden">5</button>
        </div>
        <div class="buttongroup" id="three">
        <button class="main">MAIN 3</button>
        <button class="hidden">2</button>
        <button class="hidden">3</button>
        <button class="hidden">4</button>
        <button class="hidden">5</button>
        </div>
        <div style="clear:both;"></div>
        <p>Howdy. I am a paragraph or any other page contents (images, background, etc.) that should just REMAIN fixed exactly where they are in the background when the site visitor momentarily hovers over the main button above and the hidden buttonset cascades open.</p>
    </body>
    </html>

http://jsfiddle.net/Lzd6zraq/

您需要将按钮设置为位置：绝对。下面是一个示例：http://jsfiddle.net/Lzd6zraq/1/您还可以将它们设置为位置：固定，这样即使您滚动，它们也将始终保持在自己的位置。

.buttons {position: absolute; width: 100%;}
<div class="buttons">
  *buttons*
</div>

相关内容

最新更新

热门标签：