横並びのメニューに対して、縦方向にプルダウンを出すというのは要望が多かったりします。
今回は、右サイドメニューに対して吹き出し型のプルダウンでということで、CSSで実装してみました。
即興なので、美しい構文ではないかもしれません。
需要があるか分かりませんが、見てくださった誰かのお役に立てれば嬉しいです！
※マウスを重ねると吹き出し型のメニューが表示されます
<!--吹き出し型のプルダウンメニュー-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ここにページの概要が入ります。">
<!--Jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>吹き出し型のプルダウン</title>
<style>
.balloon{
margin: 30px 0;
display:flex;
justify-content: flex-end;
align-items: flex-start;
}
.balloon .menu{
margin-left:25px;
margin-top:17px;
}
.balloon .menu{
order:2 !important;
}
.pull {
max-width:500px;
display: none;
flex-wrap: wrap;
position: relative;
padding: 17px 13px 15px 18px;
border-radius: 12px;
background: #1e90ff;/*色は任意*/
box-sizing:border-box;
margin:0 !important;
line-height:1.5;
}
.pull ul{
margin:8px 0 0 !important;
padding-inline-start: 0px;
}
.pull ul li{
text-align: center;
list-style: none;
line-height: 2em;
}
.pull ul li a{
background-color: #00ffff;
color: black;
text-decoration: none;
}
.pull ul li a:hover{
background-color: #1e90ff;
color: white;
}
.pull:after {
content: "";
position: absolute;
border: 10px solid transparent;
}
.balloon .pull:after {
right: -26px;
border-left: 22px solid #1e90ff;
}
</style>
<body>
<div class="balloon">
<div class="menu">
メニュー１
</div>
<div class="pull">
<ul>
<li><a href="https://blog.hayate-room.com">サブメニュー１</a></li>
<li><a href="https://blog.hayate-room.com">サブメニュー２</a></li>
<li><a href="https://blog.hayate-room.com">サブメニュー３</a></li>
</ul>
</div>
</div>
<script>
$('.balloon').on({
'mouseenter': function() {
console.log('マウスが重なった時');
$('.pull').css('display','flex');
},
'mouseleave': function() {
console.log('マウスが離れた時');
$('.pull').css('display','none');
}
})
</script>
</body>
</html>