Jqueryを使ったドロップダウンメニューの作り方

40代からプログラミングを挑戦して学ぶ|jqueryを使ってドロップダウンメニューを作る。 Jqueryを使ったドロップダウンメニューの作り方 | How to create a dropdown menu using Jquery

ニュース

首相の一日
官房長官
財務省

内閣

活動
報告
会見

HTML <dl id=”main”>
<dt id=”news”>ニュース</dt>
<dd>
<ul>
<li>首相の一日</li>
<li>官房長官</li>
<li>財務省</li>
</ul>
</dd>
<dt id=”naikaku” >内閣</dt>
<dd>
<ul>
<li>活動</li>
<li>報告</li>
<li>会見</li>
</ul>
</dd>
　</dl>

Javascript $(function(){
$(‘#main dd’).hide();
$(‘#main dt’).on(‘click’,function(){
$(this).next().slideToggle();
});
});
$(function(){
$(‘#main li’).on(‘click’,function(){
$(‘.active’).removeClass(‘active’);
$(this).addClass(‘active’);
});
});

CSS body{
background-color: #10517b;
color:white;
}
#news,#naikaku{
border: 1px solid white;
padding:7px;
}
dl{
width:50%;
margin: 0 auto;
}
dd{
margin: 0;
}
dd li{
list-style: none;
padding-bottom:2em;
}
dd li:before{
content:’>’;
padding: 5px;
}
dt{
margin-bottom: 15px;
}
.active{
color: red;
}

今回はこちらのサイトから学ばせてもらいました。| This time I learned from this site.

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル