予想は裏切り、期待は裏切らず。2019/12/26以前作成した『jQueryとCSSで作る「ハンバーガーメニュー」』に少し手を入れて、よりスタイリッシュ(?)に使えるものにしてみましたので、ご紹介したいと思います。以下のことに対して対応してみました。画面左からメニューをスライドさせるメニュー内容を増やしてスクロールさせるメニューをスクロールしてもメインブロックは固定する上からロールダウンしてくるのも良いですが、今回の版では画面左からメニューを出現させることとしました。スクリプト(CSS)の設定でメニューを右から出すことも可能です。右から出す場合はハンバーガー(メニュー)の位置を調整する必要があると思いますが、今回は触れませんのであしからず。サンプルデモはこちら。「jQueryとCSSで作る「ハンバーガーメニュー」を少しリニューアルしてみました」デモページhttps://lightning-bolt.xyz/js/jquery.tgHumbergerMenu2/PCでの操作ですが、動画も作成してみました。右肩にあるハンバーガーメニューをクリック(タップ)することで、画面左側から20個の内容があるメニューがせり出してきます。上下のスクロールに対応し全てのコンテンツを表示させるのと、メニューの一番下までスクロールさせた状態でさらにスクロールさせた場合の前の版ですとメインコンテンツがスクロールされてしまいましたが、今回はメインコンテンツはスクロールしないようにしています。PCで見ている場合にブラウザの横幅によって背景色が変わるようになっていますが、これは単にブレイクポイントを調整していた時の設定を消し忘れているだけです(苦笑)ハンバーガーメニューの各種スクリプトでは恒例のスクリプト紹介です。jQuery読み込みまず、ヘッダでjQueryを読み込んでおきます。バージョンは任意のもので構いません。src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>(メニュー用)HTML左からせり出すメニュー本体のHTMLです。スクロールさせるために、あえてメニュー項目を20個作ってみました。今回はメニュー内にタイトル用にヘッダーを追加しています。href="#">Menu20</a></li></ul></nav>CSS(グローバルナビ用)CSS左からせり出してくるメニュー用のCSS。装飾と、メニューそのものを見えない位置に配置する内容となっています。34px;}(タップした後)CSSタップした後の「X」の形とするためのCSSです。transformプロパティを使用します。付与し、不要なスクロールをさせないということをするjQueryのスクリプトです。{$('.globalMenuSp').removeClass('active');$('body').removeClass('overflowHidden');}});});以上で、jQueryとCSSで作るハンバーガーメニューの出来上がりです。...【JS】クーポン系サイトによくある「カウントダウンタイマー」をjQueryを使って設置してみる「グルーポン」や「シェアリー」など、クーポン系サイトでよく利用されているような、カウントダウンしていくタイマーが必要になったので、その設置方法の紹介です。Countdown」というライブラリを使用します。ログイン画面デザイン100選ちょっとでもテンションが上がるようなログイン画面にしてみたい、ってことでググりましたところ、海外のサイト(しかも2009年)の記事ですが、ログインのデザイン画面のみを集めたサイトを見つけました。【jQuery】連動プルダウン用プラグイン『jquery.tgHierSelect』をより簡単に設置できるようバージョンアップ以前作成した「jquery.tgHierSelect」ですが、連動させるプルダウン数が増えた場合や、同じページに2個以上の連動プルダウンがある場合などに、かなり手を入れないと使えない状態だったので、それらを解決しつつ、オプションの記述もシンプルになるよう、バージョンアップしました。【JS】選択済みのチェックボックスの個数をカウントするスクリプトをjQueryで組んでみた選択されているチェックボックスの個数を取得して表示させたいというリクエストを受けましたので、Javascript(jQuery)を使用して作成してみました。スクリプトの解説をしつつ、いつの日かまた使うことがあると思うので、備忘録をかねてご紹介します。Codeで、カーソル行の背景色を設定する方法を備忘録としてポストします。【Laravel】Bladeテンプレートでレイアウトを共通化するLaravelのBladeにて用意されている「継承」と「セクション」を使い、テンプレートを組み合わせてレイアウトを作成していく方法をまとめます。【PHP】オブジェクト形式のデータを作成する方法PHPでオブジェクト形式データの作成方法をポストしておきます。Widgets」にてエラーが出たのて対応した件WordPressのバージョンを5.3にアップグレードしましたら、久々にプラグインでの不具合が出たので、メモとして残しておきたいと思います。【Laravel】テンプレートエンジン「Blade」の構文LaravelのBladeテンプレートの基本構文をまとめます。このWindowsのコピーは正規品ではありません」と表示された件。HTMLなどプログラムネタ、スマホやタブレット、カメラ・写真、たまに日記などを扱っています。個人的な備忘録と化しているカテゴリもありますが、1週間に1回の更新を目指しつつ、ネタ探しの毎日です。運営者について更新履歴お問い合わせサイトマップにんじん予想は裏切り、期待は裏切らず。