jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
レスポンシブ対応メニュー用jQueryプラグイン「meanmenu.js」
ウィンドウサイズが小さい場合に、自動的にナビゲーションを変形させてくれるjQueryプラグイン「meanmenu.js」のご紹介です。 PCやタブレットで表示する際は、ナビゲーションを横並びに配置しておき、ウィンドウサイズがある一定のサイズを基準にアコーディオン形式のナビゲーションに変形させることができます。 MeanMenu デモサンプル ▼サンプルとして多少カスタマイズしたサンプルをご用意しました。 デモサンプル（カスタマイズ） 【使い方】 1.meanmenu.jsをダウンロードします。 meanthemesよりデータ一式をダウンロードします。 2.jQuery本体とJavaScriptを読み込む 内に読み込む" ><script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/jav
プラグインを使わずにCSSとjQuery数行でできるドロワーナビ | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、制作担当の奥田です。 今やレスポンシブウェブデザインや、スマホ制作には欠かせない、ドロワーナビ。 jQueryのプラグインも豊富に存在しますが、DEMOのソースと環境を揃えてあげないといけなかったり、ちょこちょこ修正が必要だったりと、意外と面倒です。 実は特に難しい事はせずに、数行のjQueryコードとCSSで実装可能なのです。 今回はプラグインを使わずに作るドロワーナビをご紹介いたします。 Table of contentsコンテンツとナビゲーションを用意開いている状態を作成するjQueryで制御するコンテンツとナビゲーションを用意まずはコンテンツとナビゲーションを用意します。 固定ヘッダーとコンテンツ、そしてリスト型のナビゲーションを用意し、#drawernavとします。 DEMO.コンテンツとナビゲーションを用意 <div id="page"> <!-- コンテンツ --
[WordPress] カスタムメニューのコードから余計なタグやクラスを削除しスッキリさせ、かつカレントクラス機能を付ける
カスタムメニューを使うとオリジナルのメニューを管理画面で簡単に作れて便利ですが、カスタムメニューで生成されるコードは余計な div や id、class が入ってしまいます。この余分な部分を削除して、カレントクラス表示の機能は残す方法です。 カスタムメニューをデフォルトのまま表示したコードは以下のようになっています。 これをスッキリ必要なものだけにしていきます。具体的には、ul 要素を囲っている div 要素を削除し、ul と li 要素に付与されているID、クラスを削除します。 ただ、現在開いているページメニューに付けられる current-menu-item クラスは便利なので、それと同じように表示中ページの li には current のクラスを付けるようにします。 メニューを囲っている div要素と、ul要素に付与されているID・クラスを削除する カスタムメニューは表示したいテンプ
![[WordPress] カスタムメニューのコードから余計なタグやクラスを削除しスッキリさせ、かつカレントクラス機能を付ける](https://cdn-ak-scissors.b.st-hatena.com/image/square/442a98fb6e69ee7af1c30f705b701eb78785381f/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2012%2F12%2Fwp-dkblue-orange-640x960.png)
WordPressでプラグインを使わずにページネーションする - 残像ブログ
プラグインを使わなくても上図のようなページ送り機能を実装できるとの事なのでやりました。 とっても参考：E03CA オートフォーカス壊れたっぽい へのコメント 前提として 今回使用するWordPressのバージョンは3.1.2 ページネーションはカテゴリごとの記事一覧、タグごとの記事一覧、検索結果での記事一覧に設置する コードはfunctions.phpに記載し、必要な場所で呼び出す。 私の環境では動きましたが、本記事に記載したコードだとパーマリンク設定などの違いにより環境によっては上手くいかないかもしれません。 実装にはテンプレートタグの「paginate_links」を使う そもそもWordPressでページネーションするには、カテゴリの記事一覧なら http://example.com/cat/[カテゴリスラッグ]/page/[ページ番号]タグの記事一覧なら http://exampl
jQuery slimMenu - A lightweight responsive and multi-level navigation menu plugin.
slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly. With slimMenu, you'll no longer struggle with media queries to create responsive menus, or any other heavy plugins to create multi-level nested menus. slimMenu does both job for you and it's only 5KB(2.5KB minified)! Features: Multi-level nested menus. 100% mobile responsive men
FlexNav – Jason Weaver
A jQuery plugin for responsive menus FlexNav 1.3.3 jQuery plugin is no longer supported. I have plans to make a non-jQuery version 2 soon.
トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できる「Fixed Nav」 | co-jin
トップ固定で、レスポンシブ対応のナビゲーションが増えていますね。 これだけ増えてくると、トップ固定のメニューが実に使いやすくなってきます。 今回はそんなトップ固定のメニューでありながら、レスポンシブにも対応したナビゲーションを簡単に実装できる「Fixed Nav」をご紹介します。 「Fixed Nav」は、トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できるプラグインです。 jQueryは使用していません。 ページスクロールアニメーションに対応していて単ページもののサイトととっても相性がいいナビゲーションです。 ナビゲーションはアクティブにも対応していますので、現在、自分がいる位置がすぐにわかりますよ。 もちろん商用利用可です。 ソースはGitHubのFixed Navにありますよ。 デモをご覧になりたい方は以下からどうぞ。 DemoFixed Nav Sponsore
リストを使った横型のナビゲーションバー
リストを使った横型のナビゲーションバーを作成する方法について解説します。 (2022 年 02 月 20 日公開 / 2022 年 02 月 20 日更新) まず縦型の場合と同じく、リストを作成し<ul>タグに対して、"margin-left"プロパティ及び"padding-left"プロパティに対して0を設定し、初めから付いている余白を削除します。合わせて"list-style-type"プロパティに"none"を指定しデフォルトで付いている黒丸を消します。 sample7.html 次に同じく<ul>タグに対して"width"プロパティを使ってナビゲーションバーの幅を指定します。また"border"プロパティで全体に枠を描いておきます。今回は横に並べるので横に並べた時に必要となる幅を設定して下さい。 sample8.html 次にリストを横に並べるために、<li>タグに対して"floa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Jade/Pug】gulpでJade / Pugをコンパイルする – Snaplog
WordPressにページング（ページャー）を追加したい | MK2-BLOG～西宮のWEBデザイナー日記
Drop-Down Navigation: Responsive and Touch-Friendly by Osvaldas Valutis