スマホのhover

最近はモバイルファーストでスマホ対応のサイトがほとんどです。

スマホ用のサイトを作成する方法とレスポンシブサイトとして
スマートフォンもPCも同じページのレイアウトを変更して
見せ方を変える方法とで対応してるサイトがあります。

今回はBootstrapのレスポンシブでカルーセルを利用して
スライダー表示をしていたのですが、インジゲーターが
iPhoneでクリック出来ないということで、いろいろと
検索して設定を変えてみましたがうまくいかず、
結局スライダーをスマホ対応の物に変更しました。
ただ以下の記述にて対応できるものもあるかと
思ったので覚書として残します。

「ontouchstart属性を追加する」
これだけで大丈夫でした。

特にjQueryも不要でスマホでクリックができるようになります。
bodyタグに入れても良いですし、クリックしたいdivに入れても
良いしプロパティは空で大丈夫です。

書き方の例は以下となります。
<div ontouchstart=”” >クリック内容</div>


Bootstrap4 ハンバーガーメニューをクリックすると閉じる

Bootsrapというフレームワークで使っている方も多いかと思います。

ハンバーガーメニューもついており、テンプレートを使えば
「あっ」という間にサイトが作れてしまいます。

ただいろいろと便利な反面、カスタマイズするには
少し知識が必要だったりします。

そのまま使うとハンバーガーメニューはアイコンをクリックしないと
閉じない設定になっています。

そこでハンバーガーメニューを開いた際に、メニュー項目を
クリックしたら閉じるという簡単なコードです。
こちらのサイトに記載されていたのを転記させていただきます。
(詳細はリンク先のサイトをご確認ください)

こちらのコードで無事にBootstrap4のハンバーガーメニューも
メニュー内の項目をクリックして閉じることが出来ました!

$(document).ready(function () {
$(“.navbar-nav li a”).click(function(event) {
$(“.navbar-collapse”).collapse(‘hide’);
});
});