ユーザーがボタンをクリックしたときにスクロール可能なドロップダウン・ディビジョンを作成したい

Question

ドロップダウンを作成したいが、ドロップダウンはその中に複数のページを持つdivでなければならない。右クリックすると、左のアイコン、新しいページが表示されます。添付のスクリーンショットをご覧ください。

Answer 1

チェックこのJsfiddle： https://jsfiddle.net/aaodtoh6/4/

HTML：

<div id="cel-screen"> 
    <a href="javascript:void(0)" onclick="toggleColorlib()" id="colorbt">Color Buttons</a> 
    <div id="color-lib"> 
    <ul> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
    </ul> 
    </div> 
</div> 

CSS：

#cel-screen {width:400px; height:650px; border:1px solid gold; position:relative} 
#colorbt {position:absolute; bottom:0; right:0;} 
#color-lib {background:#25d396;width:50%; height:250px; overflow-x:hidden; overflow-y:auto; position:absolute; bottom:15px; right:0; display:none;} 

JS：

function toggleColorlib() { 
    var element = document.getElementById('color-lib'), 
    style = window.getComputedStyle(element), 
    display = style.getPropertyValue('display'); 
    if(display == "none"){ 
      document.getElementById('color-lib').style.display = "block"; 
    } else { 
     document.getElementById('color-lib').style.display = "none"; 
    } 
} 

javascriptを使用して問題が解決するかどうかを確認してください。