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

我试图创建将在内容上浮动的html表单。按钮将浮动内容和点击每个按钮不同的div格式应该出现在下面。就像下面的屏幕截图一样。它只在首次出现时显示按钮，并且点击每个按钮下面的表格应该附加并出现。在最后一个按钮的情况下，应该出现带额外按钮的上下文菜单。带上下文菜单和按需表单的浮动按钮

我试图创建按钮和形式，而是如何：

1）添加给按钮的看样，以按钮1，按钮2 ...这是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>

来源

2017-10-16 Sumeet

你应该看看css'display：none'。将它与'display：block'结合使用应该很容易得到你想要的。 –

我应该在按钮中添加什么CSS来看起来像可点击的按钮。它的正义div现在 – Sumeet

那么，我的意思是说，你会使用JavaScript来触发css的变化（使用jQuery的简单，没有必要），例如。 '（“＃button1”）。click（（）=> $（“＃form1”）。css（'display'，'block'））'如果你还在家，我会回家看看不明白。 –

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

来源

2017-10-16 05:44:19

你可以在JSBIN或FIDDLE中显示你的代码 – Sumeet

另外我不能给button类型的效果，我应该添加什么样的css看起来像div压缩。 – Sumeet

添加小提琴。这真的很大程度上取决于你和设计问题。这可以帮助你https：// dabuttonfactory。com /（在嵌入式中获取css） –

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

回答

相关问题