リスト要素を使ったシンプルなHTMLで実装されたメニューやナビゲーションをどのようにデザイン、スタイルするかのコンテストがCodePenで開かれているので紹介します。 次のプロジェクトで使用できそうなアイデアから、こんなの初めて見る！ ここから更に広げていけそう！ といった面白いアイデアまで、さまざまなメニューの実装が楽しめます。 CodePenChallenge: Menus CodePenChallengeの今回のお題は、メニューです。 実装のポイントになるのは、 ネストされたアイテムを常に表示させておくのか、サブメニューとしてインタラクションを使用するか。 スマホのような小型スクリーンとワイドスクリーンにどのように対応させるか。 リスト要素で実装されたメニューにさまざまなデザイン、アニメーションやインタラクションを与えます。ベースになるHTMLは、下記のようになります。
ヘッダに配置されたハンバーガーメニュー。 まぁ、ハンバーガーメニューでなくてもいいのですが、スクロールするとヘッダから流体のようにちゅるんと分離するアニメーションを紹介します。 実装しても気付かれにくいですが、見つけたら嬉しくなりますよね。
デスクトップ、タブレット、スマホに対応した、通常のスタティックなヘッダやスクロールしても常に上部・下部に固定表示されるバーとして配置できるナビゲーションを実装するスタイルシートを紹介します。 スクリプトは一切無し、アニメーションも快適な超軽量のスタイルシートです。
コンテンツの見出しを目次代わりにし、スクロールしてもサイドバーに固定表示されるナビゲーションを実装するJavaScriptのライブラリを紹介します。 ページのスクロールに合わせて、ナビゲーションの現在位置はアニメーションで移動します。
If you’re working on digital products, you have already read dozens of articles describing how and why the hamburger navigation on mobile (and desktop!) hurts UX metrics due of its low discoverability and efficiency. (You can read some of best articles on the topic here, here, here, and here.) Luckily, more and more sites and apps are experimenting with alternative, more efficient solutions for th
Some say web design has become boring. Current trends and high-end techniques establish the rules for the creatives, playing a low-down trick on the community. Everyone wants to be in the mainstream, and release products that go viral; it means that a million interfaces are likely to have the same features. Of course, content can save the day. Still, the truth is that a lot of those interfaces are
nuContextMenu クールな独自の右クリックコンテクストメニューを実装できるjQueryプラグイン「nuContextMenu」 次のようにカッコいいコンテクストメニューが実装できます。対象の要素をセレクタで指定できるので、指定要素に対するコンテクストメニューが簡単に作れそうです 関連エントリ ファイルアップ用のDropゾーンを簡単に作れるjQueryプラグイン「Dropper」 アニメーション切り替えがカッコイイタブUI実装jQueryプラグイン「tabtab.js」 独自デザインのソーシャルシェアボタンが実装できるjQueryプラグイン「jsSocials」 必要な機能は全部入ったモダンなLightBox実装jQueryプラグイン「lightGallery」 エレメントにサウンドを自由に付けられるjQueryプラグイン「easyAudioEffects.js」
lukejacksonn/GreedyNav GitHub｜CodePen - Greedy Navigation レスポンシブでメニューの数が分かりやすいナビを実装できる「GreedyNav」。 次のようなナビゲーションを実装でき、Windowによって隠れてしまっている物はハンバーガーメニューと共に、バッジで残りメニュー数を表示するという物が実現できます 関連エントリ ナビゲーションとコンテンツが同期して分かりやすいナビ実装「NavSync」 CSS＆jQueryで作るパネル型の3Dナビゲーション作成サンプル 特定要素をスクロールに応じて固定ナビゲーションにできる「Clingify」 ホバーするとフリップするナビゲーションメニューが実装できる「menuFlip」
画像を使用せずに、多階層のリストをツリー状にデザインするスタイルシートのテクニックを紹介します。 ピュアCSSなので、リストのアイテムは増やしても減らしても、ツリー状のスタイルを適用できます。 Parent child vertical list menu コードはこんな感じです。 HTML リストは階層ごとに入れ子を使用します。 コードは、CodeのjQueryまで。 <nav class="nav"> <ul class=list> <li> <a href="#">Home</a> <ul> <li> <a href="#">Lab</a> <ul> <li> <a href="#">Code</a> <ul> <li> <a href="#">Html</a> </li> <li> <a href="#">Css</a> </li> <li> <a href="#">Jquery<
jQuery Sapling by outofroutine ULリストをツリービュー状に開閉できるようにするjQueryプラグイン「Sapling」 ulで階層的に定義したマークアップをツリービュー状に開閉できるようにするjQueryプラグインです。 マークアップ的にも綺麗で情報が多くなってもスペースをとらなくてよさそう。 関連エントリ Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 おしゃれで軽量なシェアボタンを実装できるjQueryプラグイン より良いフォームの入力ヒント実装jQueryプラグイン「Label Better」 selectボックスをカッコよくスタイリングできるjQueryプラグイン「Selectric」 スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 クールなペ
ContextJS Bootstrap風な右クリックメニューが実装できる「ContextJS」 デフォルトのBootstrapでは右クリックメニューは実装されていませんが、こちらのスクリプトを使えば簡単に実装できます。 Bootstrapがなくとも単独でも動作するようです。 どんどん便利になっていくBootstrap。 こうしてBootstrapのUIライブラリでのデファクトスタンダード的な地位は確固たる物になっていくのかも。 関連エントリ ページ上で独自の右クリックメニューを作れるjQueryプラグイン「contextMenu.js」 リアルなWindows風ツリービューが実装できるjQueryプラグイン「dynatree」
contextMenu.js ページ上で独自の右クリックメニューを作れるjQueryプラグイン「contextMenu.js」 指定した要素をクリックしたり、ページ上で右クリックした際のコンテキストメニューを簡単に作れるjQueryプラグインです。 もちろん、メニューをクリックした時の動作もJavaScriptで定義が可能 動的に右クリックメニューの有効・無効を切り替えたりすることも可能です 関連エントリ アニメーションスクロールをデフォルト化できるjQueryプラグイン「Scroll To」 タップ操作とクリックのイベントを統一できるjQueryプラグイン「jQuery Finger」 selectをカッコよくしてくれるjQueryプラグイン「Minimalect」 素早く簡単にGoogleマップを導入できるjQueryプラグイン「initmap.js」 LazyLoadを実現する1KB
HTML5のmenu要素もサポートしている オリジナルのコンテキストメニュー を実装するjQueryプラグインです。 普通のサイトじゃ使わないでしょう けど、最近ではHTML5製のリッチコン テンツ等利用するシーンもあるかも なのでメモがてら。 基本的に通常のWebサイトでコンテキストメニューを変えてしまうのはユーザビリティを大きく損ないますが、HTML5によるペイントツールやゲームなど幅広いコンテンツの実装が可能になってきましたのでこういったライブラリも用途が出来始めた気がします。 右クリックメニューを独自のものに変えます。それだけならちょっとアレなんですが、このプラグインは左クリックメニューにも出来るので一応覚えておいてもいいんじゃないかなと。他にもmenu要素にも対応してたり、アイコンを付けたりなどいろいろ応用が利くみたい。 右クリックでフォームが出る・・なんてのも作れる。実際あった
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く