DropDownMenuの概要
リンクリストをドロップダウンメニューに組み込むことが出来るjQueryです。
実機サンプル
メニューにマウスポインタを合わせるとメニューが展開します。
- 用語
- HTML
- HTMLの書き方基本
- a tag
- br tag
- メニュー
- メニュー
- CSS
- border-collapse
- border-radius
- :hover
- メニュー
- メニュー
- javascript
- console.log
- Date object
- getElementById
- メニュー
- メニュー
- jquery
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset = "utf-8">
<title>jQuery : DropDownMenu | 独学 Webプログラミング! - YWORK</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.classDropDown{
max-width: 900px;
display: flex;
}
ul{
color: #fff;
list-style-type: none;
margin: 0 auto;
padding: 0;
}
li{
max-width: calc(900px/5);
position: relative;
padding: 5px;
display: block;
cursor: pointer;
}
.classDropDown>li{
font-weight: bold;
text-align: center;
width: 166px;
margin: 1px;
background: #05f;
display: inline;
}
.classDropDownMenu{
background: #017;
width: 100%;
display: none;
position: absolute;
margin-left: -5px;
margin-top: 5px;
padding: 0;
}
.classDropDownMenu li{
width: 100%;
text-align: left;
font-weight: normal;
}
.classDropDownMenu li a{
padding: 5px 0px 5px 5px;
margin: -5px 5px -5px -5px;
display: block;
color: #fff;
}
li a:hover{
background: #03a;
color: #fff;
}
</style>
</head>
<body>
<ul class="classDropDown">
<li>用語
<ul class="classDropDownMenu">
<li>メニュー</li>
<li>メニュー</li>
</ul>
</li>
<li>HTML
<ul class="classDropDownMenu">
<li>メニュー</li>
<li>メニュー</li>
</ul>
</li>
<li>CSS
<ul class="classDropDownMenu">
<li>メニュー</li>
<li>メニュー</li>
</ul>
</li>
<li>javascript
<ul class="classDropDownMenu">
<li>メニュー</li>
<li>メニュー</li>
</ul>
</li>
<li>jquery
<ul class="classDropDownMenu">
<li>メニュー</li>
<li>メニュー</li>
</ul>
</li>
</ul>
<hr>
<script>
document.open();
$(function(){
$('.classDropDown li').hover(function(){
$("ul:not(:animated)",this).slideDown();
}, function(){
$("ul.classDropDownMenu",this).slideUp();
});
});
document.close();
</script>
</body>
</html>