20210912のHTMLに関する記事は3件です。

class・idの複数指定

See the Pen qiita by tomoe (@paripi) on CodePen. 同じタグにidを複数指定は、、 エラーにはならない(表示されないとかにはならない) 文法的には誤り CSSが思い通りに適用されない 【参考】 HTMLで同じタグに複数のid属性を指定することはできる?
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Slickでslick-slideのheightを100%にする方法

通常は下のような感じ(オプションなし) $('.slider').slick(); ここでslick-slideのheightを100%にする場合は $('.slider').slick() .on('setPosition', function(event, slick) { slick.$slides.css('height', slick.$slideTrack.height() + 'px'); }); これでOK
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【JavaScript】ハンバーガーメニューが閉じているのに中のリンクを押せる不具合の解消方法

対象者 ハンバーガーメニュー実装を考えている方 メニューを閉じているのに中身をクリックできる不具合が出ている方 目的 ハンバーガーメニューの実装 不具合の解消 実際の手順と実例 1.前提とエラー 下記の記事を参考にハンバーガーメニューを実装しました。 しかし、閉じている状態でも中身のリンクをクリックできる不具合に遭遇したので、これを解消していきたいと思います。 2.結論(解決策) CSSが今回の原因でした。 before application.scss /* ナビが開いた状態 */ nav.globalMenuSp { position: fixed; z-index : 2; top : 0; left : 0; color: #fff; background: rgba(0,0,0,0.7); text-align: center; width: 100%; opacity: 0; transition: opacity .6s ease, visibility .6s ease; } /* このクラスを、jQueryで付与・削除する */ nav.globalMenuSp.active { opacity: 100; } after application.scss /* ハンバーガーメニューの中身 */ nav.globalMenuSp { position: fixed; z-index : 2; top : 0; left : 0; color: #fff; background: rgba(0,0,0,0.7); text-align: center; width: 100%; opacity: 0; transition: opacity .6s ease, visibility .6s ease;     visibility: hidden;  #ここを追加 } /* ハンバーガーメニューが動いたとき */ nav.globalMenuSp.active { opacity: 100; visibility: visible; #ここを追加 } 3.原因 opacityを0にして透明になっていても、onclickイベントを拾ってしまうでした opacityとは透明度を調整するCSSです。 また、visibilityは要素を非表示にするCSSです。 visibility は CSS のプロパティで、文書のレイアウトを変更することなく要素を表示したり非表示にしたりします。 ここではvisibility: hidden;を指定してハンバーガーメニューの中身が隠れるようにしています。 その後visibility: visible;でハンバーガーメニューが動いた際に要素が可視化されるようになっています。 参照 【JS】ハンバーガーメニューの実装方法【CSS】 ハンバーガーメニューが閉じている状態なのに、中のリンクが押せてしまう。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む