帶上下文菜單和按需表單的浮動按鈕

我試圖創建將在內容上浮動的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） –

帶上下文菜單和按需表單的浮動按鈕

回答

相關問題