なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
ドロップダウンメニューのアイディア
よくあるドロップダウンメニューのアイディアです。 CSS 3D Transformsに対応しているブラウザにはそれを使ったUIを、そうでないブラウザにはシンプルな切り替えを提供します。 ドロップダウンメニューのアイディア CSSのみ補足コメントつきで載せておきます。 .nav a { display: block; padding: 0 0.5em; color: #f6f6f6; line-height: 2; text-decoration: none; } /* ulのスタイルリセット */ .nav ul { margin: 0; padding: 0; list-style: none; } /* clearfix */ .nav > ul:after { display: block; clear: both; content: ""; } /* メニューを横並びに */ .n
Top Drawer - A smooth dropdown menu for responsive web design | Experiment #5
Aim To demonstrate smoother reveal menus in small contexts using CSS3 rather than animating with JavaScript. Ingredients CSS Transforms Modernizr FT Labs Fast Click (optional - for speedy tap events) JavaScript (I used jQuery, but you could easily do this with VanillaJS) Method Tap the menu icon in the top right. The click event will assign the class of active to the drawer container which alters
25 Free Dropdown Menus in HTML5 and CSS3
With the advent of HTML5, jQuery and CSS3, designing and development were totally revolutionized. They are far more advanced and offer many features and various techniques can be applied using them. They are quite easy and quick to manage too. Using these languages you can create a plethora of amazing effects and looks with ease, which were extremely tough to achieve before them. Amateur and profe
[CSS]くるっとして、ゆらゆらしてぴたっと止まる素敵アニメーションを備えたメニュー -CSS Swinging Panel Menu
ホバー時に、子アイテムが上からくるっとスイングして、ゆらゆら揺れて、ぴたっと止まって表示する素敵なアニメーションを備えたメニューを実装するスタイルシートを紹介します。 CSS Swinging Panel Menu ゆらゆらとした動きはCSS3アニメーションで実装されています。 スクリプトは実装には使用されていません。 HTML リスト要素を入れ子にしたシンプルな実装です。 <div id="container"> <ul id="menu"> <li><a href="#">item 1</a> <ul> <li><a href="#">item 1-1</a></li> <li><a href="#">item 1-2</a></li> <li><a href="#">item 1-3</a></li> </ul> </li> <li><a href="#">item 2</a> <u
DropKick - a jQuery plugin for beautiful dropdowns
DropKick.js Painless custom dropdowns, a jQuery joint Creating custom dropdowns is usually a tedious process that requires a ton of extra setup time. Oftentimes lacking conveniences that native dropdowns have such as keyboard navigation. DropKick removes the tedium and lets you focus on making s@#t look good. Download DropKick.js That's not all! DropKick also degrades gracefully: if the user has j
セレクトボックスを創ってリンク先へジャンプする方法 - ＥＬＬの足跡
ＨＰ上でページを創った時に欲しい物の一つがセレクトボックスですよね・・・ 今日は、セレクトボックスの基本パターンを紹介しますね・・・ 先ず、セレクトボックスだけを創ってみます・・・ ★セレクトボックス①の見本はこちら★ HTMLは下の通りです＜SELECT name="text"＞ ＜OPTION selected value="default"＞★選択して下さい★＜/OPTION＞ ＜OPTION＞＜/OPTION＞ ＜OPTION value="#y-473"＞＜Y-473＞3色並びの変形紐＜/OPTION＞ ＜OPTION value="#y-337"＞＜Y-337＞ツートンの丸紐＜/OPTION＞ ＜OPTION value="#y-168"＞＜Y-168＞丸と平が交互のMIX紐＜/OPTION＞ ＜OPTION value="#y-384"＞＜Y-384＞色糸をらせん状に浮かせた
SELECTメニューにリンクをはる為に下記のページのタイプ1を使用しました。…
SELECTメニューにリンクをはる為に下記のページのタイプ1を使用しました。 http://miyakekobo.fc2web.com/contents/kowaza013.html このSELECT内のリンクを新しいウィンドウで開くにはタグをどのように変更したらよいのでしょうか？
Excelでドロップダウンリスト（プルダウンメニュー）を作る
Excelで任意のセルにドロップダウンリスト（プルダウンメニュー）を作る方法を紹介します。 スクリーンショットはExcel 2003ですがExcel 2007/Excel2010でも同様の操作で作成できます。 １．ドロップダウンリスト（プルダウンメニュー）を作る：基本 ドロップダウンリストを表示したいセルを選択（ここではB2セルのみですが複数選択も可能）して、メニューバーの「データ」→「入力規制」を選択。Excel2007/2010であれば「データ」→「データツール」にある「データの入力規制」を選択。 開いたウィンドウの「入力値の種類」から「リスト」を選択。 「元の値」欄が表示されるので、そこにドロップダウンリスト項目を半角カンマ区切りで入力して「OK」をクリック。サンプルでは「東京,名古屋,大阪」と入力しています。 これでB2セルがドロップダウンリストになりました。このセルを他のセルにコ
リボンが可愛いCSS3によるドロップダウンメニュー実装チュート:phpspot開発日誌
Tutorial - Create a Ribbon DropDown Menu with CSS3 and jQuery | Flash User リボンが可愛いCSS3によるドロップダウンメニュー実装チュートリアルです。 次のようなリボン帯の可愛いメニューにドロップダウンを付けるというものです。元々のクオリティが高くそのまま使っちゃってもよさそうな感じですね 画像を使っているので、IE8でも動作します。 色々なサイトに使えそうですね 関連エントリ ピュアCSS3で作られた「path.com」っぽい円形メニュー実装デモ CSS3単体でアニメーションするドロップダウンメニューを実装 ブラウザ上でカッコいいメニューを作れる「Menu Maker CSS3」
FacebookスタイルのシンプルなドロップダウンをjQueryで実装するサンプル:phpspot開発日誌
Facebook Style CSS JQuery drop down menus Swadesh's Programming Blog FacebookスタイルのシンプルなドロップダウンをjQueryで実装するサンプル Facebookのインタフェースはやっぱり素晴らしいと思う今日この頃ですが、facebookのドロップダウンを実装する例が紹介されています。 どちらかっていうとCSSよりなんでしょうか。とりあえずサンプルをダウンロードしてそのまま使うこともできるのでそれっぽいものを実装したい場合には使えそうです シンプルだけど立体感がうまく出せていてアプリっぽいのがいいですよね。 今世界で一番伸びてるサービスのインタフェースを真似てみることはいいことかもしれませんね 関連エントリ Facebookのタイムラインを作る際に便利なPhotoshopテンプレート faviconを書き換えてfa
これはちょっと使いたくなる、キーフレームを使ったCSS3アニメーションのナビゲーション | コリス
Flashも無し、jQueryも無し、キーフレームを使ったCSS3アニメーションで実装したかっこいいドロップダウン型のナビゲーションを紹介します。 Two Level Superfishy Menu [ad#ad-2] デモ 実装 デモ デモはキーフレームのアニメーションを使用しているため、Chrome, Safari,Firefoxでご覧ください。 ※IE, Operaでは動作しません。 デモページ: アニメーション完了時 実装 HTML ナビゲーションはリスト要素で実装されており、第二レベルはリストの入れ子になっています。 <div id="container"> <ul id="nav"> <li><a href="#">Home</a></li> <li> <a href="#">About Us</a> <ul> <li><a href="#">What we do</a></l
機能性の高いドロップダウンメニューデザインまとめ「30 Stunning Examples of Drop-Down Menu Design」
TOP > WebDesign , WebService > 機能性の高いドロップダウンメニューデザインまとめ「30 Stunning Examples of Drop-Down Menu Design」 webサイトの中で展開されるたくさんのコンテンツメニューをまとめる時に非常に便利なドロップダウンメニューですが、意外と毎回同じようなタイプになってしまうことは多いのではないでしょうか。そこで今回は、機能性の高いドロップダウンメニューの実例をまとめた「30 Stunning Examples of Drop-Down Menu Design」を紹介したいと思います。 （International Storytelling Center） シンプルなものから、ちょっとのアイデアで非常に見やすく感じられるものまで、種類はさまざま。中でも気になったものをまとめましたので以下よりご覧くださ
How to Create Accordion Menu (CSS3+jQuery) - Designmodo
Step 1 – HTML Markup The HTML is the same as the CSS3 version, a nested unordered list that will contain all of our links. We have added a class to each one to be able to add the images and the id is needed for the CSS3 only version. We will keep the CSS3 only version working so if the JavaScript will be disabled on the client browser it will continue working with just CSS. <ul class="accordion">
Animated Dropdown Menu CSS3: Guide
Without a doubt, CSS3 functionalities such as transitions, animations, and transforms have the ability to infuse a touch of innovation into your design endeavors. Within the confines of this article, we shall delve into the process of crafting a remarkable CSS3 animated dropdown menu, leveraging the remarkable capabilities of these trendy features. Opting for an alternate title for this article, o
もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ
2013年11月22日 Webサイト制作, ユーザビリティ どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ナビゲーションメニューの設置ポイント すべてのページに 基本中の基本ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン
リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」:phpspot開発日誌
リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 2011年09月27日- jQuery Mega Drop Down Menu Plugin ? Downloads Design Chemical Lab リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」。 次のような商用サイトでそのまんま使ってもかなり便利になりそうなドロップダウンメニューが作れます メニューバーのカラーは色々選べるようになっているのでサイトのイメージにマッチしたものを使うことが出来ます 垂直バージョンもあるみたいです 画像も組み合わせることで分かりやすいメニューが作れますね 関連エントリ スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」 Googleスタイルのシンプ
タブやスクロール、ツールチップなど、Webサイトで良く見かける機能を1つのファイルで実装可能にする国産jQueryプラグイン・Laquu.JS
たまたま見かけて便利そうだったので シェア。良く使われるドロップダウン メニューやページスクロール、タブや ツールチップなどを1つのjsファイルで 実装可能にする国産のjQueryプラグイン です。制作が楽になるのでLaquu、と いう名みたいです。 国産のプラグインなのでドキュメントも日本語です。英語が苦手な方でも手軽に使えるのではないかなと。また、無駄な装飾も無いので既存サイトに落とし込んだり、シンプルなフレームワークとしても良いかもしれません。 以前ご紹介したsimplelibと同様にパッケージ化されているので選択肢が増えた印象です。 シンプルで装飾も自由に出来るのでなかなか汎用的ではないかなと思います。ライセンスもMITなのはありがたいですね。 備わっている機能 機能はこんな感じ。どれも良く探している機能じゃないかなと思いますが、これらの機能を1つのjsファイルで使うことが出来る、
CSS3だけで実現する幅広で使えそうなドロップダウン実装チュートリアル:phpspot開発日誌
Creating CSS3 Drop sliding list Menu #6 ? Script Tutorials CSS3だけで実現する幅広で使えそうなドロップダウン実装チュートリアル。 次のような、ジャンルごとにわかれた幅広で使いやすそうなドロップダウンリストをJSなしで実装してしまおうというチュートリアルです。 ソースを見ると<script>タグがなく、CSSのみでアニメーションしつつ内容を切り替えるということをやっているのがわかります。 CSSだけでもこういうのできるんだ、というのを知っておく意味で一度見ておいてもよいでしょう サンプルだけではなく実用性も兼ね備えています。 関連エントリ Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ ピュアCSSでアニメーションするアコーディオン実装デモ ピュアCSSでSVGやcanvasなしの3Dオブジェクト描画デモ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これは楽しい！巻き簾のようにくるっとはらりとなるCSS 3Dのドロップダウン