ネイティブに実装された、プルダウンメニュー

1年 ago
夏樹, 風
1 minute

JavaScriptとHTMLを組み合わせることで、ドロップダウンメニューを作成できます。以下の例は、基本的なドロップダウンメニューの作成方法を示しています。

<!DOCTYPE html>

<html>

<head>

<style>

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

min-width: 160px;

z-index: 1;

}

.dropdown:hover .dropdown-content {

display: block;

}

</style>

</head>

<body>

<div class=”dropdown”>

<button>点击我</button>

<div class=”dropdown-content”>

<a href=”#”>选项1</a>

<a href=”#”>选项2</a>

<a href=”#”>选项3</a>

</div>

</div>

<script>

// 获取下拉菜单元素

const dropdown = document.querySelector(‘.dropdown’);

// 鼠标点击菜单外部时，隐藏下拉菜单

document.addEventListener(‘click’, function(event) {

if (!dropdown.contains(event.target)) {

const dropdownContent = dropdown.querySelector(‘.dropdown-content’);

dropdownContent.style.display = ‘none’;

}

});

// 鼠标点击按钮时，显示或隐藏下拉菜单

const button = dropdown.querySelector(‘button’);

button.addEventListener(‘click’, function() {

const dropdownContent = dropdown.querySelector(‘.dropdown-content’);

dropdownContent.style.display = dropdownContent.style.display === ‘block’ ? ‘none’ : ‘block’;

});

</script>

</body>

</html>



上記の例では、まずドロップダウンメニューの外観を設定するCSSスタイルを定義しています。次に、HTML でボタンとドロップダウンメニューのオプションを含む構造を作成します。


JavaScriptによって、ドロップダウンメニューのDOM要素を取得し、イベントリスナーを追加します。マウスがボタンをクリックしたら、ドロップダウンメニューの表示状態を切り替え、マウスがメニューの外側をクリックしたら、ドロップダウンメニューを非表示にします。


上記のサンプルは基本的なドロップダウンメニューの実装例ですので、ご自身のご要望に合わせて、アニメーションエフェクトの追加やスタイルの変更など、拡張及びカスタマイズしていただけます。

        


        
        

			        

    


	



		            	                        

        


    

















  
    bannerAds