東京都立川市のWeb制作事務所KOSAERU（コサエル）
理想をカタチに！あなたのホームページをこさえます！

2021.01.21 2023.06.22

Bootstrapドロップダウンメニューをマウスホバーで展開する

KOSAERU WEB MEMO Bootstrap

Bootstrapドロップダウンメニューをマウスホバーで展開する

Bootstrapのドロップダウンメニューはクリックでないと展開しないのをマウスホバーで展開する方法をご紹介！

JavaScript

$('.dropdown').mouseenter(function(){
  if(!$('.navbar-toggle').is(':visible')) {
    if(!$(this).hasClass('open')) {
      $('.dropdown-toggle', this).trigger('click');
    }
  }
});

1

2

3

4

5

6

7

$('.dropdown').mouseenter(function(){

if(!$('.navbar-toggle').is(':visible')) {

if(!$(this).hasClass('open')) {

$('.dropdown-toggle', this).trigger('click');

}

}

});

HTML

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" href="#store-top" role="tab" data-toggle="tab">店舗情報</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#store-zaseki" role="tab" data-toggle="tab">座席表</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">写真</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#photo_1" data-toggle="tab">料理</a>
      <a class="dropdown-item" href="#photo_2" data-toggle="tab">内観</a>
      <a class="dropdown-item" href="#photo_3" data-toggle="tab">外観</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#store-map" role="tab" data-toggle="tab">地図</a>
  </li>
</ul>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<ul class="nav nav-tabs" role="tablist">

<li class="nav-item">

<a class="nav-link active" href="#store-top" role="tab" data-toggle="tab">店舗情報</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#store-zaseki" role="tab" data-toggle="tab">座席表</a>

</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">写真</a>

<div class="dropdown-menu">

<a class="dropdown-item" href="#photo_1" data-toggle="tab">料理</a>

<a class="dropdown-item" href="#photo_2" data-toggle="tab">内観</a>

<a class="dropdown-item" href="#photo_3" data-toggle="tab">外観</a>

</div>

</li>

<li class="nav-item">

<a class="nav-link" href="#store-map" role="tab" data-toggle="tab">地図</a>

</li>

</ul>

WEB MEMO Bootstrap

関連するカテゴリの記事

WordPress 問い合わせフォームのプラグインMW WP Formの自動返信メールに送信日時を設置

WordPress 問い合わせフォームのプラグインMW WP Formの自動返信メールに送信日時を設置

2018.05.20 2023.06.22

WordPressのプラグインMW WP Formの問い合わせフォームから問い合わせいただいた方に、問い合わせした日時を自動返信メールに表示させる方法。公式サイトに記載はあるものの、要点があったのでメモっときます。 functions.phpに以下のソースを記載…

query postsでチェックボックスにチェックした記事を表示 [WordPress][Advanced Custom Fields]

query postsでチェックボックスにチェックした記事を表示 [WordPress][Advanced Custom Fields]

2018.11.10 2023.06.22

ME 投稿の中から「真/偽」チェックボックスにチェックした記事を表示する方法です。準備チェックボックスは、プラグイン「Advanced Custom Fields」を利用して投稿画面に設置します。フィールドタイプは「真/偽」とする。メッセ…

WordPress条件分岐｜最初1件のみデザインを変える方法

WordPress条件分岐｜最初1件のみデザインを変える方法

2015.12.04 2021.10.10

FRIEND 記事一覧ページの１件目の記事の直下にグーグルバナーを設置したい！ FRIEND なんかクリックしてくれそうな位置だから（汗） ME 最初の１件目を呼んで、その直下にグーグルバナーを設置して…

WordPress […] を消す

WordPress […] を消す

2016.02.23 2021.10.10

▼functions.phpに以下のコードを追加【出力】冒頭文 [crayon-662a312b39548204084719/] 【2行目】「'」シングルクォーテーションの間に任意の文字を書くこともでける。【出力】冒頭文…続きを読む [crayo…

WordPress 投稿画像をランダムに表示させクリックすると投稿記事へジャンプ

WordPress 投稿画像をランダムに表示させクリックすると投稿記事へジャンプ

2015.11.29 2021.10.10

現在、以下の画像のようにトップページに画像を8枚掲載している。その方法を記しておく。 ▼functions.phpに以下のコードを書く function my_random_images($count=1, $size='thumbnail'){ $ar…

WordPress post_class()に任意の独自クラスを追加する方法

WordPress post_class()に任意の独自クラスを追加する方法

2017.09.09 2021.10.10

WordPressのループ内でほぼほぼ使うpost_class()。実際には以下のように書くことが多い。 [crayon-662a312b395d7317725655/] このpost_class()が出力する値は以下のもの。 post-(投稿 I…