带有上下文菜单和按需表单的浮动按钮

Question

我正在尝试创建将浮动在内容之上的 html 表单。按钮将浮动在内容上，单击每个按钮时，下面会出现不同的 div 表单。类似于下面的屏幕截图。它仅在第一次出现时显示按钮，并且在单击表单下方的每个按钮时应附加并出现。如果是最后一个按钮，应该会出现带有附加按钮的上下文菜单。

我尝试过创建按钮和表单，但是如何：

1) 为 button1、button2 添加按钮类型的外观 ...这是 div

2) 单击时在最后一个按钮上显示上下文菜单

3) 点击相应按钮时隐藏和显示适当的表单

jsbin

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#content {
  width: 100%;
  height: 100%;
  background-color: #FBBC06;
}

#form {
  width: 300px;
  background-color: rgba(255, 255, 255, 0.65);
  height: 50px;
  position: absolute;
  top: 36px;
  right: 168px;
  border: 1px solid darkred;
  border-radius: 22px;
}

.widthHeight {
  width: 100%;
  height: 100%;
}
#button1 {
  background-color: aquamarine;
  height: 50px;
  width: 20%;
  border-radius: 25px 0px 0px 25px;
  border: 1px solid blue;
  display: inline-block;
}
#button2 {
  height: 50px;
  width: 20%;
  background-color: aquamarine;
  display: inline-block;
}

#button3 {
  height: 50px;
  width: 20%;
  background-color: aquamarine;
  display: inline-block;
  border: 1px solid blue;
}

#button4{
  height: 50px;
  width: 20%;
  background-color: aquamarine;
  display: inline-block;
  border: 1px solid blue;
}
#button5 {
  height: 50px;
  width: 12%;
  background-color: aquamarine;
  display: inline-block;
  border-radius: 0px 25px 25px 0px;
  border: 1px solid blue;
}

#form1{
  width: 100%;
  height: 200px;
  border: 1px solid yellow;
  background-color: skyblue;
  margin-top: 13px;
}

#form2 {
  width: 100%;
  height: 200px;
  border: 1px solid yellow;
  background-color: skyblue;
  margin-top: 13px;
}

#form3 {
  width: 100%;
  height: 200px;
  border: 1px solid yellow;
  background-color: skyblue;
  margin-top: 13px;
}

<div class="widthHeight">
    <div id="content">
    </div>
    <div id="form">
        <div id="buttonHolder">
            <div id="button1">
                button1
            </div>
            <div id="button2">
                buton2
            </div>
            <div id="button3">
                button3
            </div>
            <div id="button4">
                button4
            </div>
            <div id="button5">
                button5
            </div>
        </div>
        <div id="form1">
            This is form 1 on click of button 1 it appears
        </div>
        <div id="form2">
            This is form 1 on click of button 1 it appears
        </div>
        <div id="form3">
            This is form 1 on click of button 1 it appears
        </div>
    </div>
</div>

Answer 1

1) 个性化 CSS - 取决于您的个人喜好。更改背景颜色和/或光标可能会添加您需要的效果，所以像

.divbutton:hover
{
    cursor:pointer;
}

应该可以帮助你。 （将class='divbutton' 添加到作为按钮的每个 div 中）

3) 创建这些样式类

.hiddenitem
    {
      display:none;
    }

.shownitem
    {
      display:block;
    }

在每个表单中添加.hidenitem 类

<div id="form1" class="hiddenitem">
    This is form 1 on click of button 1 it appears 
</div>

在您的脚本文件或标签中

activateMenu = function (menuId)
{
     $("#form" + menuId).toggleClass('shownitem');
}

最后将onclick='activateMenu(menuId)'添加到每个对应的按钮

<div id="button2" onclick='activateMenu(2)'>
                                    TEXT1
</div>

对于 2) 使用与表单相同的方法：在 html 中创建上下文菜单，应用 .hidenitem 类并创建一个切换函数来切换菜单上的 .shownitem 类，使用它自己的 id 作为选择器。

编辑：JSFiddle