Question

我想为我的网站的管理部分制作一个控制面板。我开发的控制面板由几个按钮组成。我需要的是每当我点击其中一个按钮时，该选项的子菜单就会出现在它旁边。例如，我将“我的帐户”作为主要选项之一。如果单击“我的帐户”按钮，将显示其子菜单（包括更新配置文件和更改密码等）。

以下是控制面板的代码：

    <div class="main-area">
    <div class="control-panel">
    <h1>Admin Control Panel</h1>
    <button class="categories">My Account ►</button><br /><br />
    <button class="categories">System Users ►</button><br /><br />
    <button class="categories">Applicants ►</button><br /><br />
    <button class="categories">Blacklist ►</button>
    <br /><br />
    <button class="categories">Jobs ►</button><br /><br />
    <button class="categories">Requirements ►</button><br />
    <br />
    <button class="categories">Reports ►</button>

这是CSS部分：

body {
      font-family: arial;
      background-color: #0F8DC7;
    }

    .control-panel {
      border: solid 1px #000;
      padding: 15px;
      border-radius: 15px;
      box-shadow: 5px 5px 5px;
      width: 300px;
      text-align: center;
      display: inline-block;
      height: 370px;
      background-color: #FFE400;
    }

    .main-area {
      width: 500px;
      margin: auto;
    }

    .categories{
      width: 200px;
    }

希望得到一些不涉及JavaScript的答案。

Answer 1

这只是一个演示，我还没有设计代码以获得更好的视图。

您必须使用css :hover来实现此功能。并将你的按钮（menuItem）和submenuItems（li）放在＆＃34; ul＆＃34;像这样的标签，

<ul>
    <button class="categories">My Account ►</button><br /><br />
    <li>First</li>
    <li>Second</li>
</ul>

添加此css代码，

.main-area ul li{
    display : none;
}

.main-area ul:hover li{
    display : block;
    background:blue; 
    height:auto; 
    width:8em;
}

根据需要设置子菜单项的样式。

jsFiddle

单击按钮后滑动到右侧子菜单

1 个答案: