ドキュメント
- タイトル
- GreedyNav
- 説明
- GreedyNavは画面縮小時にはみ出した項目をドロップダウンに切り替えるjQueryを用いたレスポンシブナビゲーションメニューです。
- カテゴリー
- ナビゲーション
- ライブラリー
jQuery
- 組み込みファイル
<!-- Add jQuery and GreedyNav --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript" src="libs/greedynav/greedynav.js"></script>※ CDN配信されていないので、ダウンロードする必要があります。
- ベーシックマークアップ
<nav class='greedy'> <ul class='links'> <li><a href="">...</a></li> ... </ul> <button>MENU</button> <ul class='hidden-links hidden'></ul> </nav>
- 関連
ソースコード
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add jQuery and GreedyNav -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="libs/greedynav/greedynav.js"></script>
<title>GreedyNav</title>
<style>
nav.greedy {
position: relative;
display: flex;
align-items: center;
height: 60px;
background-color: #009385;
}
nav.greedy button {
font-size: .9rem;
font-weight: bold;
align-self: stretch;
padding: 0 1rem 0 1.5rem;
transition: all .4s ease-out;
color: #fff;
border: 0;
outline: 0;
background: #00665b;
}
nav.greedy button.hidden {
overflow: hidden;
width: 0;
padding: 0;
transition: none;
border-right: .5rem solid #00665b;
}
nav.greedy button::after {
font-size: 14px;
line-height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
margin-right: calc(-1rem + -8px);
margin-left: 1rem;
content: attr(count);
color: #fff;
border-radius: 50%;
background: #009385;
}
nav.greedy ul.links {
display: flex;
overflow: hidden;
flex: 1;
justify-content: flex-end;
list-style: none;
}
nav.greedy ul.links li {
flex: none;
padding: 1rem;
}
nav.greedy ul.links li a {
text-decoration: none;
color: #fff;
}
nav.greedy ul.hidden-links {
position: absolute;
top: 100%;
right: 0;
margin: 0;
padding: 0;
list-style: none;
background: #009385;
z-index: 1000;
}
nav.greedy ul.hidden-links.hidden {
display: none;
}
nav.greedy ul.hidden-links li {
margin: 0;
padding: 1rem;
}
nav.greedy ul.hidden-links li a {
text-decoration: none;
color: #fff;
}
</style>
</head>
<body>
<header>
<h1 class="dlw-title">GreedyNav</h1>
<p class="dlw-description">GreedyNavは画面縮小時にはみ出した項目をドロップダウンに切り替えるjQueryを用いたレスポンシブナビゲーションメニューです。</p>
</header>
<section style="overflow:initial;">
<h2 class="dlw-subtitle">[1] 基本設定</h2>
<p>GreedyNavは実行するセレクターを指定出来ないので、クラス名は変更せずに利用してください。</p>
<nav class='greedy'>
<ul class='links'>
<li>
<a href='#'>menu1</a>
</li>
<li>
<a href='#'>menu2</a>
</li>
<li>
<a href='#'>menu3</a>
</li>
<li>
<a href='#'>menu4</a>
</li>
<li>
<a href='#'>menu5</a>
</li>
<li>
<a href='#'>menu6</a>
</li>
<li>
<a href='#'>menu7</a>
</li>
</ul>
<button>MENU</button>
<ul class='hidden-links hidden'></ul>
</nav>
</section>
</body>
</html>コメント
検索
- スタイルデザイン
- テキストスタイルデザインCSS
ここではテキストにスタイルシートで様々な効果を付したデザインサンプルを掲載しています。
- 見出しスタイルデザインCSS
見出しは、その下の記事の性質を示すテキストです。
ここでは、スタイルシートを使用した見出しのデザインサンプルが掲載しています。 - 順番リストデザインスタイルCSS
HTML <ol> 要素は順序付けられた項目リストを表します。
ここでは、スタイルシートを使用するolのデザインサンプルを掲載しています。 - 分割線スタイルデザインCSS
HTML <hr>要素は、段落レベルの要素間のテーマ区切りを表します。
ここでは、スタイルシートを使用してhrのデザインサンプルを掲載しています。 - ボックスシャドウスタイルデザインCSS
CSSプロパティbox-shadowは、要素のフレーム枠の周囲にシャドーエフェクトを追加するために使用されます。
ここでは、スタイルシートを使用したボックスシャドウプロパティのデザインサンプルを掲載しています。
- レイアウト
- ブレークポイントを指定して画像を切り替える方法JS
<picture> とsrcset を使用して、画面サイズに応じて画像を切り替える方法です。レティーナにも対応しています。
このサンプルではIE用にPicturefillを追加しています。
- リンク & ボタン
- BootstrapボタンCSS
Bootstrapフレームワークの標準的なボタンデザインです。
- Hover.cssCSS
Hover.cssはマウスオーバー効果のスタイルシートコレクションです。
- Button.cssCSS
Button.cssは、CSS3のボタンアニメーションのコレクションです。
- カード
- BootstrapカードCSS
これはBootstrapフレームワークの標準的なカードデザインのまとめです。
- テキスト
- Arctext.jsjQuery
Arctext.jsは文字列を指定した円半径に沿ってカーブさせるjQueryプラグインです。
- Lettering.jsjQuery
Lettering.jsは、1文字、1単語、1列の指定された文字列を<span>タグで囲むjQueryプラグインです。
- Textillate.jsjQuery
Textillate.jsは、イン/アウトアニメーションエフェクトをテキストに追加するjQueryプラグインです。
- FitText.jsjQuery
FitText.jsは、親要素の幅に応じてフォントサイズをフィットさせるjQueryプラグインです。
- メディア
- FeedEkjQuery
FeedEkは、RSSフィードとAtomフィードを解析して表示するjQueryプラグインです。
- YouTubeの埋め込み
YouTubeのさまざまな埋め込み方法の紹介。
- FitVids.jsjQuery
FitVidsはiframeで埋め込まれたYouTube動画をレスポンシブ対応に変換するjQueryプラグインです。
- xZoomjQuery
xZoomは画像のズームプレビューを表示するjQueryプラグインです。
プレビュー位置とズームをカスタマイズすることができます。 - Instagram.cssCSS
Instagram.cssは、インスタントグラムのような写真をフィルタリングするスタイルシートです。
- 日付
- Moment.jsJS
Moment.jsは日付と時刻を処理して表示するjavascriptです。
このサンプルでは日本語にローカライズしています。 - Bootstrap Material DatePickerjQuery
Bootstrap Material DatePickerはMoment.jsを使用したjQueryデータピッカープラグインです。
- テーブル
- MultifilterjQuery
MultifilterはjQueryテーブルフィルタリングプラグインです。
- FlexテーブルCSS
"display: flex;"を使用したレスポンステーブル
rowspanはサポートされていません。 - GridテーブルCSS
"display: grid;"を使用したレスポンステーブル
rowspanはサポートされていません。 - BootstrapテーブルCSS
Bootstrapフレームワークの標準的なテーブルデザインです。
- フォーム
- jQuery Mask PluginjQuery
jQuery Mask Pluginは、フォームフィールドでマスク（検証）を行うjQueryプラグインです。
- Select2 #1. 基本的な設定jQuery
Select2は、セレクトフォームをより高度にするjqueryプラグインです。
Select2の基本的な使い方は次のとおりです。 - jQuery SearcherjQuery
jQuery Searcherは、さまざまなマークアップをサポートするjQuery検索/フィルタリングプラグインです。
- スライダー
- BootstrapカルーセルjQuery
Bootstrapフレームワークの標準的なカルーセルです。
- FlexSlider #1. シングルスライダーjQuery
FlexSliderはレスポンシブjQueryスライダープラグインです。
ここにはFlexsliderの基本的な単一スライダー設定を掲載しています。 - FlexSlider #2. カルーセルスライダーjQuery
FlexSliderはレスポンシブjQueryスライダープラグインです。
ここにはFlexsliderの基本的なカルーセルスライダー設定を掲載しています。
- ライトボックス
- fancyBox #1. 基本的なイメージライトボックスjQuery
fancyBoxはjQueryライトボックスプラグインです。
ここではfancyBoxの基本的なイメージライトボックスの設定を行います。 - fancyBox #2. メディアライトボックスjQuery
fancyBoxはjQueryライトボックスプラグインです。
ここでは、YouTube、Vimeo、Instagram、Googleマップ、fancyBoxのインラインHTML、iframeライトボックスの設定を掲載しています。
- ナビゲーション
- animsitionjQuery
animsitionはページ遷移時にアニメーションエフェクトを追加するjQueryプラグインです。
- GreedyNavjQuery
GreedyNavは画面縮小時にはみ出した項目をドロップダウンに切り替えるjQueryを用いたレスポンシブナビゲーションメニューです。
- GridTabjQuery
GridTabはグリッドベースのレスポンシブタブを作成する軽量なjQueryプラグインです。
- jQuery.NiceScrolljQuery
jQuery.NiceScrollはスクロールの表示と機能を拡張するjQueryプラグインです。
- metisMenujQuery
metisMenuは水平・垂直メニューを展開するjQueryプラグインです。
- fullPage.js #1. 基本的なフルスクリーンスクロールjQuery
fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここでは、基本的なfullPage.jsのフルスクリーンスクロールを掲載しています。 - fullPage.js #2. メニュー付のフルスクリーンスクロールjQuery
fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここではナビゲーションメニューを表示しています。 - Offside.js #1. 基本的なオフキャンバスJS
Offside.jsはオフキャンバス展開するJavaScriptキットです。
これは、左側オフキャンバスが展開するサンプルです。 - Offside.js #2. 複数のオフキャンバスJS
Offside.jsはオフキャンバス展開するJavaScriptキットです。
これは、複数のオフキャンバスが展開するサンプルです。 - Filterizr #1. 基本的なフィルタリングjQuery
Filterizrはコンテナ内のアイテムをフィルタリング、並べ替え、シャッフル、検索をするjQueryプラグインです。
これはオプションを使用しない基本的なサンプルです。 - Filterizr #2. 高度なフィルタリングjQuery
Filterizrはコンテナ内のアイテムをフィルタリング、並べ替え、シャッフル、検索をするjQueryプラグインです。
これはFilterizrのより高度なフィルタリングのサンプルです。
- アニメーション
- animsitionjQuery
animsitionはページ遷移時にアニメーションエフェクトを追加するjQueryプラグインです。
- Textillate.jsjQuery
Textillate.jsは、イン/アウトアニメーションエフェクトをテキストに追加するjQueryプラグインです。
- ScrollajQuery
Scrollaはスクロール時に表示するアイテムにアニメーション効果を付加するjQueryプラグインです。
- Hover.cssCSS
Hover.cssはマウスオーバー効果のスタイルシートコレクションです。
- Animate.cssCSS
Animate.cssはアニメーション効果のスタイルシートコレクションです。
- jQuery Easing PluginjQuery
jQuery Easing Plugin はjQueryのイージング（アニメーション効果）を拡張するプラグインです。
ここでは要素へのイージングのサンプルを掲載しています。
- 背景
- fullPage.js #1. 基本的なフルスクリーンスクロールjQuery
fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここでは、基本的なfullPage.jsのフルスクリーンスクロールを掲載しています。 - fullPage.js #2. メニュー付のフルスクリーンスクロールjQuery
fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここではナビゲーションメニューを表示しています。 - jquery.mb.YTPlayerjQuery
jQuery.mb.YTPlayerは背景にYouTube動画を表示するjQueryプラグインです。
- モーダル & ツールチップ
- Hint.cssCSS
Hint.cssはツールチップ用のスタイルシートです。
クラス名を追加するだけでツールチップを表示することが出来ます。 - ProtipjQuery
Protipはツールチップを生成するjQueryプラグインです。
ツールヒントの位置、大きさなどは、データ属性のみで設定します。
- ソーシャル
- フレームワーク
- BootstrapカルーセルjQuery
Bootstrapフレームワークの標準的なカルーセルです。
- BootstrapカードCSS
これはBootstrapフレームワークの標準的なカードデザインのまとめです。
- BootstrapボタンCSS
Bootstrapフレームワークの標準的なボタンデザインです。
- BootstrapテーブルCSS
Bootstrapフレームワークの標準的なテーブルデザインです。
- チートシート
- GreenSockチートシート
GreenSockによるTweenMAX、TweenLite、TimelineLite、TimelineMaxのチートシート
- その他
- Google検索
このページでは、コードをまとめて検索することができます。