スライドメニューの検索結果1 - 3 件 / 3件

• あとで読む

  jQueryを使わずにスライドメニューを実装しよう

  • 75 users
  • www.webcreatorbox.com
  • テクノロジー
  • 2020/04/06

  2022年4月27日 CSS, JavaScript スマートフォンのアプリやモバイルサイズのWebサイトでよく見かけるスライドメニュー。どうも「jQueryがないと実装できない」と思っている人がちょこちょこいるようなので、簡単なJavaScriptで実装できるんだよーというのを記事にしてみます。 ↑私が10年以上利用している会計ソフト！ このようにボタンをクリックすると横からひゅるっと出てくるメニューを作っていきます。 1. メニューを開いた状態を作成 まずはHTMLとCSSで「Menu」ボタンをクリックしてメニューが開いている状態を作成します。メニュー部分は position: absolute; で位置を指定しています。また、メニュー項目に white-space: nowrap; を加えることで、スライドさせた時に日本語が変に改行されるのを防ぎます。それ以外は色や線、余白の指定など

  • javascript
  • メニュー
  • css
  • jQuery
  • HTML・CSS
  • ボタン
  • スライド
  • アニメーション
  • あとで読む

  
• あとで読む

  【iOS対応】究極のハンバーガーメニュー（スライドメニュー） | 名古屋のシステム・ウェブ開発・株式会社ウェブネーション

  • 4 users
  • webnation.co.jp
  • テクノロジー
  • 2020/02/23

  仕様 ・開閉時メニューの横幅分とコンテンツを外にスクロール ・メニューを開いたときにコンテンツ部分がスクロールしない（iPhoneも） ・開閉ボタンをスクロール追従させる ・できるだけCSSで完結する。 説明 デモ 開閉時の挙動 <input type="checkbox" id="nav-tgl"> <label for="nav-tgl" class="open nav-tgl-btn"><span></span></label> /*メニュー部分*/ .drower-menu { transform: translateX(100%); } #nav-tgl:checked ~ .drower-menu { transform: none; } /*コンテンツ部分*/ .content-wrapper { transition: transform .6s cubic-bezier(

  • jquery

  
• あとで読む

  CSS | スワイプで横スクロールするスライドメニューを実装する方法 | 1 NOTES

  • 3 users
  • 1-notes.com
  • テクノロジー
  • 2020/11/19

  スワイプで横スクロールするメニューの動作サンプルスワイプで横スクロールするメニューを実装した動作サンプルです。 See the Pen MENU by yochans (@yochans) on CodePen. 動作サンプルのスライドメニューはモバイル端末向けです。 PCでドラッグによる横スクロールを実装するにはJavaScript等が必要になりますし、また、良くあるメニューであればPCでの横スクロールは実装せずにPC表示時は折り返すなどにした方がユーザービリティ的にも良いと考えています。 ※スクロールバーを半透明にして、positionで被せてうんたら～ってことはできるかもしれません。 このページにPCからアクセスしている場合、F12でデロペッパーツールを開いてモバイルビュー表示で試すとスワイプ（フリック）でスライドすることが確認できると思います。 サンプルコード<div class=

  • CSS