ナビゲーション

css

cssで要素を上下左右に中央寄せするサンプル

cssで要素を上下左右に中央寄せするサンプルcss関連記事text−alignで中央寄せhtmlcssよく使うやつですね。これで横方向の中央寄せができます。line-heightで中央寄せhtmlcssheightとline-heightを...
jQuery

スクロールしてもコンテンツの範囲内を固定されて追従するサイドメニューの作り方【jQuery】

jQueryで、スクロールしてもコンテンツの範囲内を固定されて、範囲を超えたらその位置で待ってる忠犬のような追従するサイドメニューの作り方デモはこちらナビゲーションメニュー関連記事2カラムのhtmlhtml2カラムを作成し、#leftがスク...
jQuery

スマホでスクロールできちゃう!横からスライドして出てくるドロワーメニューのサンプル【jQuery】

jQueryとcssで、スマホでスクロールできちゃう横からスライドして出てくるドロワーメニューのサンプルを自作してみました。ナビゲーションメニュー関連記事ドロワーメニューの作り方ブラウザで見える範囲の外にメニューを隠しておいて、ボタンを押し...
css

jQueryとcssでハンバーガーメニューの開閉ボタンをアニメーション付きで変化させる

cssでシュッと動かす動きをつけて、jQueryで開閉させるとハンバーガーメニュー(アコーディオンメニュー)の開閉ボタンをアニメーション付きで変化させる方法ナビゲーションメニュー関連記事htmlとjshtmljsコードは【jquery】クリ...
css

cssで作る、横並びナビゲーションバーのサンプル4種類

cssで横並びのナビゲーション(メニュー)バーの作り方を「display: table-cell」と「display: inline-block」と「float: left」と「display: flex」の4パターンのサンプルを作ってまと...
jQuery

【jQuery】コピペでできる!クリックで開閉するアコーディオンメニューサンプル8選

jQueryのslideToggleを使った、クリックで開閉するアコーディオンメニュー(開閉パネル)を、7種類実装しました。クリックしたときに開いたままにしておくものや、開いたアコーディオンメニュー以外は自動で閉じる、最初から開いておく、閉じるボタンで閉じる、多階層のアコーディオンメニュー、アンカーリンクをクリックで、スクロール&該当アコーディオンメニューの開閉などのサンプルです。
css

cssだけ!jQueryを使わないスマホでよくある横から出てくるドロワーメニュー

checkboxとlabel、cssだけでつくる!jQueryを使わずに、スマホでよくある横から出てくるドロワーメニューナビゲーションメニュー関連記事開くボタンを押すと画面外の横からするりとでてくるサイドメニューを実装してみます!まずはデモ...