jQueryでドロップダウンメニュー

公開日:2017年04月23日更新日:2022年01月13日

JavaScript

jQuery

jQueryを使ったドロップダウンメニュー。簡易版。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul {
  list-style-type: none;
  padding: 0;
}
#menu {
  color: #fff;
  display: flex;
  justify-content: center;
}
#menu li {
  position: relative;
  width: 200px;
  background-color: #333;
}
#menu a {
  display: block;
  padding: 5px 10px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
#menu a:hover {
  background: #ff0000;
}
#menu .child ul {
  display: none;
  position: absolute;
}
</style>
</head>
<body>
<ul id="menu">
  <li><a href="https://jobtech.jp">トップ</a></li>
  <li class="child"><a href="#">ニュース</a>
    <ul>
      <li><a href="https://jobtech.jp">プレスリリース</a></li>
      <li><a href="https://jobtech.jp">お知らせ</a></li>
    </ul>
  </li>
  <li class="child"><a href="#">採用情報</a>
    <ul>
      <li><a href="https://jobtech.jp">新卒採用</a></li>
      <li><a href="https://jobtech.jp">中途採用</a></li>
    </ul>
  </li>
  <li class="child"><a href="#">会社案内</a>
    <ul>
      <li><a href="https://jobtech.jp">会社概要</a></li>
      <li><a href="https://jobtech.jp">沿革</a></li>
      <li><a href="https://jobtech.jp">アクセスマップ</a></li>
    </ul>
  </li>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
    $('#menu .child').on('click',function(){
        $(this).find('ul').slideToggle();
    });
});
</script>
</body>
</html>

コンテンツ一覧

同じタグのコンテンツ