點擊時如何使圖標成爲下拉列表？

Question

我有一個畫布，其中有兩個圖標對齊到右側。 我希望當單擊其中一個圖標時，應打開一個包含某些選項的下拉菜單。

但我不知道如何創建一個下拉列表，當圖標被點擊時，這需要幫助。

Answer 1

正如你不能把HTML元素<canvas>裏面，你就只能定位你的HTML元素，使它們看起來是帆布內。 主要的竅門是將<canvas>元件包裹的包裝<div>內，像這樣

EDIT我剛添加的圖像的下拉也，重激發形式Bootstrap drop-downs。雖然它非常基本，但它應該起作用。如果你想要的東西全功能，看看上面的鏈接（和整個bootstrap fromework是相當不錯）。

$(".dropdown>[data-toggle='dropdown']").on('click', function(){ 
 
    $(this).parent(".dropdown").toggleClass("open"); 
 
});

#ex-canvas-wrapper{ 
 
    postion: relative; 
 
} 
 
#ex-canvas { 
 
    border: 2px solid #16a085; 
 
    background-color: #ecf0f01; 
 
} 
 
#canvas-select { 
 
    position:absolute; 
 
    left: 138px; 
 
    top: 12px; 
 
} 
 
#canvas-dropdown{ 
 
    position: absolute; 
 
    left: 145px; 
 
    top: 35px; 
 
} 
 
.dropdown>.dropdown-menu{ 
 
    display: none; 
 
    position: absolute; 
 
    border: 1px solid #bdc3c7; 
 
    min-width: 60px; 
 
    margin: 0; 
 
} 
 
.dropdown.open>.dropdown-menu{ 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="ex-canvas-wrapper"> 
 
    <canvas id="ex-canvas" width="200" height="100"></canvas> 
 
    <select id="canvas-select"> 
 
     <option value="value1">Value 1</option> 
 
     <option value="value2" selected>Value 2</option> 
 
     <option value="value3">Value 3</option> 
 
    </select> 
 
    <div class="dropdown" id="canvas-dropdown"> 
 
     <img data-toggle="dropdown" src="http://i59.tinypic.com/2cgdh87.png"> 
 
     <ul class="dropdown-menu"> 
 
     <li>Value 1</li> 
 
     <li>Value 2</li> 
 
     <li>Value 3</li> 
 
     </ul> 
 
    </div> 
 
</div>

Answer 2

您可以使用JavaScript或使用CSS創建下拉菜單。

CSS實施例

HTML

<ul><li>Home</li> 
     <li>About</li> 
     <li> 
     Portfolio 
     <ul> 
      <li>Web Design</li> 
      <li>Web Development</li> 
      <li>Illustrations</li> 
     </ul> 
     </li> 
     <li>Blog</li> 
     <li>Contact</li> 
    </ul> 

CSS

ul li { 
    font: bold 12px/18px sans-serif; 
    display: inline-block; 
    margin-right: -4px; 
    position: relative; 
    padding: 15px 20px; 
    background: #fff; 
    cursor: pointer; 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    -ms-transition: all 0.2s; 
    -o-transition: all 0.2s; 
    transition: all 0.2s; 
} 
ul li:hover { 
    background: #555; 
    color: #fff; 
} 
ul li ul { 
    padding: 0; 
    position: absolute; 
    top: 48px; 
    left: 0; 
    width: 150px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transiton: opacity 0.2s; 
    -moz-transition: opacity 0.2s; 
    -ms-transition: opacity 0.2s; 
    -o-transition: opacity 0.2s; 
    -transition: opacity 0.2s; 
} 
ul li ul li { 
    background: #555; 
    display: block; 
    color: #fff; 
    text-shadow: 0 -1px 0 #000; 
} 
ul li ul li:hover { background: #666; } 
ul li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
} 

（從http://cssdeck.com/labs/another-simple-css3-dropdown-menu）

JS實例

這裏：Simple javascript dropdown menu