<!-- 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>
ここではテキストにスタイルシートで様々な効果を付したデザインサンプルを掲載しています。
見出しは、その下の記事の性質を示すテキストです。
ここでは、スタイルシートを使用した見出しのデザインサンプルが掲載しています。
HTML <ol> 要素は順序付けられた項目リストを表します。
ここでは、スタイルシートを使用するolのデザインサンプルを掲載しています。
HTML <hr>要素は、段落レベルの要素間のテーマ区切りを表します。
ここでは、スタイルシートを使用してhrのデザインサンプルを掲載しています。
CSSプロパティbox-shadowは、要素のフレーム枠の周囲にシャドーエフェクトを追加するために使用されます。
ここでは、スタイルシートを使用したボックスシャドウプロパティのデザインサンプルを掲載しています。
このサンプルではIE用にPicturefillを追加しています。
Bootstrapフレームワークの標準的なボタンデザインです。
Hover.cssはマウスオーバー効果のスタイルシートコレクションです。
Button.cssは、CSS3のボタンアニメーションのコレクションです。
これはBootstrapフレームワークの標準的なカードデザインのまとめです。
Arctext.jsは文字列を指定した円半径に沿ってカーブさせるjQueryプラグインです。
Lettering.jsは、1文字、1単語、1列の指定された文字列を<span>タグで囲むjQueryプラグインです。
Textillate.jsは、イン/アウトアニメーションエフェクトをテキストに追加するjQueryプラグインです。
FitText.jsは、親要素の幅に応じてフォントサイズをフィットさせるjQueryプラグインです。
FeedEkは、RSSフィードとAtomフィードを解析して表示するjQueryプラグインです。
YouTubeのさまざまな埋め込み方法の紹介。
FitVidsはiframeで埋め込まれたYouTube動画をレスポンシブ対応に変換するjQueryプラグインです。
xZoomは画像のズームプレビューを表示するjQueryプラグインです。
プレビュー位置とズームをカスタマイズすることができます。
Instagram.cssは、インスタントグラムのような写真をフィルタリングするスタイルシートです。
Moment.jsは日付と時刻を処理して表示するjavascriptです。
このサンプルでは日本語にローカライズしています。
Bootstrap Material DatePickerはMoment.jsを使用したjQueryデータピッカープラグインです。
MultifilterはjQueryテーブルフィルタリングプラグインです。
"display: flex;"を使用したレスポンステーブル
rowspanはサポートされていません。
"display: grid;"を使用したレスポンステーブル
rowspanはサポートされていません。
Bootstrapフレームワークの標準的なテーブルデザインです。
jQuery Mask Pluginは、フォームフィールドでマスク(検証)を行うjQueryプラグインです。
Select2は、セレクトフォームをより高度にするjqueryプラグインです。
Select2の基本的な使い方は次のとおりです。
jQuery Searcherは、さまざまなマークアップをサポートするjQuery検索/フィルタリングプラグインです。
Bootstrapフレームワークの標準的なカルーセルです。
FlexSliderはレスポンシブjQueryスライダープラグインです。
ここにはFlexsliderの基本的な単一スライダー設定を掲載しています。
FlexSliderはレスポンシブjQueryスライダープラグインです。
ここにはFlexsliderの基本的なカルーセルスライダー設定を掲載しています。
fancyBoxはjQueryライトボックスプラグインです。
ここではfancyBoxの基本的なイメージライトボックスの設定を行います。
fancyBoxはjQueryライトボックスプラグインです。
ここでは、YouTube、Vimeo、Instagram、Googleマップ、fancyBoxのインラインHTML、iframeライトボックスの設定を掲載しています。
animsitionはページ遷移時にアニメーションエフェクトを追加するjQueryプラグインです。
GreedyNavは画面縮小時にはみ出した項目をドロップダウンに切り替えるjQueryを用いたレスポンシブナビゲーションメニューです。
GridTabはグリッドベースのレスポンシブタブを作成する軽量なjQueryプラグインです。
jQuery.NiceScrollはスクロールの表示と機能を拡張するjQueryプラグインです。
metisMenuは水平・垂直メニューを展開するjQueryプラグインです。
fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここでは、基本的なfullPage.jsのフルスクリーンスクロールを掲載しています。
fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここではナビゲーションメニューを表示しています。
Offside.jsはオフキャンバス展開するJavaScriptキットです。
これは、左側オフキャンバスが展開するサンプルです。
Offside.jsはオフキャンバス展開するJavaScriptキットです。
これは、複数のオフキャンバスが展開するサンプルです。
Filterizrはコンテナ内のアイテムをフィルタリング、並べ替え、シャッフル、検索をするjQueryプラグインです。
これはオプションを使用しない基本的なサンプルです。
Filterizrはコンテナ内のアイテムをフィルタリング、並べ替え、シャッフル、検索をするjQueryプラグインです。
これはFilterizrのより高度なフィルタリングのサンプルです。
animsitionはページ遷移時にアニメーションエフェクトを追加するjQueryプラグインです。
Textillate.jsは、イン/アウトアニメーションエフェクトをテキストに追加するjQueryプラグインです。
Scrollaはスクロール時に表示するアイテムにアニメーション効果を付加するjQueryプラグインです。
Hover.cssはマウスオーバー効果のスタイルシートコレクションです。
Animate.cssはアニメーション効果のスタイルシートコレクションです。
jQuery Easing Plugin はjQueryのイージング(アニメーション効果)を拡張するプラグインです。
ここでは要素へのイージングのサンプルを掲載しています。
fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここでは、基本的なfullPage.jsのフルスクリーンスクロールを掲載しています。
fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここではナビゲーションメニューを表示しています。
jQuery.mb.YTPlayerは背景にYouTube動画を表示するjQueryプラグインです。
Hint.cssはツールチップ用のスタイルシートです。
クラス名を追加するだけでツールチップを表示することが出来ます。
Protipはツールチップを生成するjQueryプラグインです。
ツールヒントの位置、大きさなどは、データ属性のみで設定します。
Bootstrapフレームワークの標準的なカルーセルです。
これはBootstrapフレームワークの標準的なカードデザインのまとめです。
Bootstrapフレームワークの標準的なボタンデザインです。
Bootstrapフレームワークの標準的なテーブルデザインです。
GreenSockによるTweenMAX、TweenLite、TimelineLite、TimelineMaxのチートシート
このページでは、コードをまとめて検索することができます。