[JS]スクリプト初心者でも簡単！レスポンシブ対応のナビゲーションやコンテンツを横から表示するスクリプト -Slidebars
最近よく見かけるトレンドの一つ「Off Canvas」、コンテンツの横からナビゲーションやコンテンツをアニメーションでスライド表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 Slidebarsの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、jquery.jsと当スクリプトを</body>の上に記述します。 <head> ... <link rel="stylesheet" href="slidebars.min.css"> <head> <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="slidebars.min.js"></script> </body> St
レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」:phpspot開発日誌
Naver/Formstone/Ben Plum レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」。 ありきたりな次のようなメニュー。 ブラウザの幅を小さくすると次のようにデザインが変更されます。 クリックで開閉。 フラットデザインがなかなか良い感じですね アニメーション設定やイベントハンドラのカスタマイズも可能。 関連エントリ クールな円形ナビゲーションを作るチュートリアル レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」 スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 レスポンシブなナビゲーションの見本やチュートリアル ページ上部に隠れるナビゲーションバーが実装できるjQueryプラグイン「jBar」
[CSS]デザインは美しく、かわいいアニメーションを備えたナビゲーションを実装するデモ
シンプルなリストを使って、アイテムがホバー時に吹き出し状にポップアップするかわいらしいアニメーションを備えたナビゲーションを実装するスタイルシートのデモを紹介します。 アニメーションもかわいくて素敵ですが、半透明のグラデーションもとても美しいナビゲーションですね。 デモは、最新のモダンブラウザでご覧ください。 Menu 実装は下記のようになっています。 HTML シンプルなリストで実装されています。 <nav> <menu> <li><a href="#">☀</a></li> <li><a href="#">✈</a></li> <li><a href="#">❄</a></li> <li><a href="#">☎</a></li> </menu> </nav> <nav class="menu2"> <menu> <li><a href="#">home</a></li> <li><
portal-f.pw - このウェブサイトは販売用です！ - portal f リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
[JS]指定した要素を抽出して、自動でページ内アンカーのナビゲーションを設置するスクリプト -MagicNav.js
ナビゲーションを抽出 ページ内の移動は、アニメーションを伴ってスクロールします。 MagicNav.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="magicnav.js"></script> Step 2: HTML デモではdl要素でFAQが実装されています。 dl, ulなどに限らず、hxの見出しなどでも構いません。 <h3>FAQ</h3> <dl> <div id="commercial" title="commercial"><dt><strong>よくある質問</strong></dt> <dd><p>回答</p></dd
[DEMO]スクロールすると上部に固定するナビゲーション | webOpixel
こんにちは これはスクロールするとナビゲーションが上部に固定されるサンプルです。 jQueryを使用しています。 CSS3は装飾しているだけなので動作には関係ないです。 このサンプルの記事はこちら
[JS]実装も簡単！ページ内の次にどこを見るかアニメーションでガイドするスクリプト -Pageguide
必要な時だけ、ページ内の指定したエレメントに番号付きのナビゲーションを設置するjQueryのプラグインを紹介します。 移動はアニメーションでスライドするので、気持ちいいです。 下部のパネルのアローをクリックすることで、次に見るべきコンテンツに移動します。 [ad#ad-2] Pageguideの使い方 実装は4ステップです。 Step 1: 外部ファイル スクリプトとスタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="stylesheets/pageguide.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="javascripts/pageguide.js"></scri
jQueryベースのグローバルナビゲーション20選 | designaholic
主に大規模サイトのグローバルナビゲーション向けのjQueryプラグインです。マウスオーバーやクリックでサブメニューを表示するものや第3階層以降への直接リンクが設置できるものなど使い勝手のいいものが揃っています。 Beautiful Slide Out Navigation
[CSS]ビューポートのサイズに合わせてナビゲーションの形状を変更するテクニック
ビューポートのサイズに合わせてスタイルシートを適用するMediaQueriesを利用して、ナビゲーションの形状を変更するテクニックを紹介します。 デモページ：スクリーンサイズが960pxより小さい時の表示 以下は各ポイントを意訳したものです。 実装 これら2つのナビゲーションを実装するには、ul要素とselect要素の2つが必要です。 HTML：Step 1 まずは、nav要素内にul要素とselect要素の2つを記述します。 ※最終形は、異なります。 <nav> <ul> <li><a href="/" class="active">Home</a></li> <li><a href="/collections/all">Books</a></li> <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> <li><a href
[CSS]ナビゲーションを実装するスタイルシートのテクニックのまとめ | コリス
CSS3をはじめとする、スタイルシートのさまざまなテクニックを使って実装するナビゲーションを紹介します。 ※一部、jQueryを併用するものもあります。
jQueryを使って実装する、かっこいいナビゲーションのまとめ | コリス
利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。
[JS]リスト要素の一部をアニメーションで表示・非表示させるスクリプト -aPartHide | コリス
長いリストを省スペースに設置するのに便利なリストの一部を非表示にし、隠したアイテムをアニメーションでスライド表示させるjQueryのプラグインを紹介します。 aPartHide デモ [ad#ad-2] 非表示にするアイテムの数は設定が可能で、デモでは七つのアイテムを配置したリスト要素の初期状態では3アイテムだけ表示し、「more」をクリックするとすべてのアイテムが表示されます。 また、全アイテムを表示した状態で、「less」をクリックすると3アイテムのみ表示されます。 aPartHideの実装 HTML リスト要素をdiv要素で内包し、表示・非表示用のdiv要素を配置します。 <div id="box1" class="demo"> <h3>Demo</h3> <ul> <li>Demo list item 1</li> <li>Another list item</li> <li>Th
メニューに困ったら参考にできる40個のプラグインやスクリプト:phpspot開発日誌
40 Javascript Menu Plugins and Scripts | AJAX | TutsList メニューに困ったら参考にできる40個のプラグインやスクリプト。 便利そうなナビゲーション用のUIがジャンルごとにまとまっていて、それぞれ使えそうです。 自分で作ると超大変そうなものもあり、気になるものはブックマークしておいてもよさそう。 ツリービュー アイコン付きツリービュー ドロップダウン 階層付きドロップダウン アイコン付き階層ドロップダウン RSSメニュー タブ 縦横にタブ iPodスタイルメニュー Dock風メニュー 素晴らしいですね。こういうのを１０年前のWEBで出来るなんて誰が想像したか？というところなんでしょうが、次の１０年どうなっているか楽しみです。 関連エントリ カッコいい円形のメニューナビゲーション実装jQueryプラグイン「Flower Navigatio
jQueryでシンプルなループスライダーを作る
JavaScriptというかjQueryのお勉強。 練習がてらコンテンツスライダーを作ってみました。 この手のものはチュートリアルもプラグインも山ほどありますが、必要な機能だけあって好きに使えるものが欲しかったので1から作りました。 プラグインをお求めの方は「jQuery.simpleLoopSlider.js」をどうぞ。 欲しかった機能シンプルに動くコンテンツスライダー。ループ機能。最後の次は最初、最初の前は最後、という感じで動く。進む、戻るナビゲーション。自動でページネーションを設置。これをやります。 デモとダウンロードは以下からどうぞ。 jQuery Simple Loop Slider DEMO デモファイルをダウンロード HTMLとCSS<div id="slider"> <div class="slider-view"> <div class="slider-container
画像がダイナミックにスライドするメニューバー実装jQueryプラグイン「pictureMenu」:phpspot開発日誌
画像がダイナミックにスライドするメニューバー実装jQueryプラグイン「pictureMenu」 2011年01月21日- pictureMenu 画像がダイナミックにスライドするメニューバー実装jQueryプラグイン「pictureMenu」。 マウスカーソルを合わせるとメニューの幅がニュイーンと伸びるUIが作れます。 動きがなかなかクールなので、うまく画像と組み合わせることでカッコいいサイト作りに役立てられそうです。 次のような比較的整ったHTMLコードを初期化する感じです。 デモはセンスがいいとは言えないかもしれませんが、工夫すればかなりカッコよく出来そう。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 ビローンと伸びるドロップダウンメニュー実装jQueryサンプル クールにアニメーションする色合い様々なjQueryメニューサンプル色々
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
