[CSS]IE6, 7も考慮した、CSS3で実装するドロップダウンメニュー | コリス

2011/04/04 453 users コリス ユーザビリティ CSS チュートリアル 見栄え

IE6, 7でもドロップダウンとしての機能を損なうことなく、そしてCSS3対応ブラウザでは更に見栄えをよくし、ユーザビリティも向上させるスタイルシートのチュートリアルを紹介します。デモページ：IE6での表示下記は各ポイントを意訳したものです。HTMLHTMLはシンプルで、ドロップダウンはリストの入れ子で実装されています。Home 続きを読む

タブやスクロール、ツールチップなど、Webサイトで良く見かける機能を1つのファイルで実装可能にする国産jQueryプラグイン・Laquu.JS - かちびと.net

2011/09/15 332 users スクロール タブ 実装 ツールチップ net

たまたま見かけて便利そうだったので シェア。良く使われるドロップダウン メニューやページスクロール、タブや ツールチップなどを1つのjsファイルで 実装可能にする国産のjQueryプラグイン です。制作が楽になるのでLaquu、と いう名みたいです。 国産のプラグインなのでドキュメントも日本語です。英語が苦手な方でも手軽に使えるのではないかなと。また、無駄な装飾も無いので既存サイトに落とし込んだり... 続きを読む

Web制作をちょっとだけ楽にするjQueryプラグイン 「laquu.js」 | webox blog

2011/09/14 286 users アコーディオン ひとまとめ target属性 ブランク 都度

知り合いが便利そうなものを作っていたのでご紹介します。 Web制作時によく使う機能をひとまとめにしたjQueryプラグインです。 読み込むjsのファイルが増えてきたり、その都度追加していくのが面倒だなと感じてきていたのでこういうのは非常に助かりますね。 Laquu.js 個人的によく使う機能 アコーディオン ドロップダウン ブランク XHTMLで非推奨とされているtarget属性の代替となる機能で... 続きを読む

JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプル:phpspot開発日誌

2009/12/08 255 users CSS phpspot開発日誌 サンプル Dow hover

JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプルが公開されています。 次のように、明らかにJavaScript 使ってるんじゃないか？と思うのですが、CSSのみでelement:hoverを使って実現されています。 ソースコードも解説されているのでこのテクニックについて覚えておいてもよさそう。 以下のエントリを参照してください。 Incredible Drop Dow... 続きを読む

ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ - PhotoshopVIP

2017/01/05 158 users CSS コピペ ナビゲーションメニュー HTML モバイル端末

ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。 今回は HTML と CSS、わずかな JavaScript で実装できるさまざまな ナビゲーションメニュー用コードスニペット をまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフル... 続きを読む

CSSだけで作る「多階層」なドロップダウンメニュー｜Webpark

2013/10/15 144 users Webpark 矢印 階層 CSS 擬似要素

以前書いた「CSSだけで作る動きのあるドロップダウンメニュー｜Webpark」という記事が検索エンジン経由でそこそこアクセスがあり、よく質問をいただきます。そのなかで多階層にできないのかという質問があったので作ってみました。 IE7の場合擬似要素が使えませんので、次の階層があることを示す矢印が表示されません。ドロップダウンの機能はIE7でも問題ありませんので、IE7に対応させる場合は矢印を画像にす... 続きを読む

WEBサイトのリスト・メニュー。ドロップダウンなどのCSSデザイン：Goodpic

2005/08/21 142 users Goodpic Firefox CSSデザイン CSS Mac

WEBサイトのナビゲーション用に、横にリンクが並んだメニューが一般的ですが、これを<ul>などのタグとCSSで構造的にやろうとすると、なかなか大変。CSSをまだまだ勉強中ということもありますが、Mac + FireFoxなどで確認しながらデザインを決めていて、Mac + IEで再確認すると、デザインが崩れて、なんじゃこりゃ〜っというような状況に。そんな時に見つけたのがこのサイト。 css.maxd... 続きを読む

これはいい！ドロップダウンに画像と説明文を追加「ddSlick」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

2012/06/09 117 users MOONGIFT ddSlick コンポーネント ライブラリ

常々HTMLのコンポーネントは貧弱だと思っていた。特にドロップダウンの使い勝手の悪さったらない。テキストしか表示できず、情報選択のUIとしてあまりに粗雑ではなかろうか。そしてみんなが望んでいたライブラリが登場した。それがddSlickだ！ 0 続きを読む

[CSS]アニメーションで細かい動きを加えたカード状のドロップダウンのデモがかなりかっこいい | コリス

2013/07/23 96 users コリス ポパー CSS アニメーションgif アニメーション

上記はデモをアニメーションgifにしたもので、初期はアイテムがカード状に重なっており、クリックすると中身がするすると表示されます。 最初にぱかっと開くの面白いですね、各アイテムはホバーでハイライトもします。 実際の動きは、下記ページでご覧ください。 CSS3 Card Deck Drop Down HTML 各アイテムはリスト要素でシンプルな実装です。 <div class="card-drop"... 続きを読む

スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」:phpspot開発日誌

2011/07/08 91 users DropKick select phpspot開発日誌 イケ

DropKick - a jQuery plugin for beautiful dropdowns スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」 次のようなデザインのドロップダウンが実装できます。大きめなデザインなのでスマフォでも使えます。 テーマは2種類あってホワイトとブラックから選べます マークアップとしては単なるselectなのでJSがおふでも使... 続きを読む

CSS3で作る、ドロップダウン⇔アコーディオンの切り替えをするレスポンシブWebデザイン対応のグローバルメニュー - かちびと.net

2012/04/10 89 users アコーディオン ブレークポイント net グロー CSS

JSを使わず、CSSのみでドロップダウン メニューとアコーディオンメニューを 特定のブレークポイントで切り替える レスポンシブWebデザイン対応のグロー バルメニューのサンプルです。これは なかなか良いのでは。 JS不要で、ドロップダウン⇔アコーディオンをスマフォ閲覧時などに切り替えるグローバルメニューのサンプル。 Responsive CSS3 Drop-Down to Accordion 大き... 続きを読む

[CSS]スクリプトに依存せずに、「:checked」でできるテクニックをBootstrapに組み込むプラグイン -Bootleg.css | コリス

2012/12/10 87 users コリス checked Bootstrap カルーセル CSS

タブ、ドロップダウン、アコーディオン、カルーセルなど、今まではスクリプトに依存しないと実装できなかったものをスタイルシートベースで実装するBootstrapのプラグインを紹介します。 Bootstapのプラグインですが、CSSの「:checked」を使ったテクニックを学ぶのにも役立ちます。 Bootleg.css 仕組みは簡単に説明すると、見えない状態のラジオボタンを使い、そのオン・オフのチェック... 続きを読む

インラインサジェストを実現するjQueryプラグイン「jQuery.suggest」:phpspot開発日誌

2011/12/08 70 users jQueryプラグイン phpspot開発日誌 サジェスト

jQuery.suggest plugin インラインサジェストを実現するjQueryプラグイン「jQuery.suggest」 サジェストといえば、ドロップダウンが現れて表示されるのがよく見るサジェスト方式ですが、今回紹介するプラグインを使えば、次のようにインラインでオシャレに内容を補完することができます 入力途中にEnterキーを押せばそのまま補完されます 配列でデータを定義しておいて、次のよ... 続きを読む

ドロップダウン実装を簡単にサポートしてくれるDorp.js*ホームページを作る人のネタ帳

2015/09/10 68 users ネタ帳 実装 ドキュメントファイル ソース ホームページ

ドロップダウン実装を簡単にサポートしてくれるDorp.js 2015/09/10 ツイート スポンサーリンク 手軽にドロップダウンの実装をサポートしてくれるjsのご紹介。 サンプルページのソースを見ればほとんどわかりますが、ドキュメントファイルは一度目を通しておくといいかもしれません。 ドロップダウンに関する動作 サイズバーもお手軽実装。 各種動作設定も可能。 一番上のシェアボタンはクリックしてメ... 続きを読む

ウェブデザイン用の各エレメントをフラット・ソリッドなど複数のスタイルに展開させたPSD素材 -3in1 UI Elements | コリス

2013/10/10 67 users コリス elements ソリッド PSD素材 UIエレメント

ナビゲーション、パンくず、ドロップダウン、ボタンなど、UIエレメントのデザインをそれぞれフラットとソリッドと立体感のあるバルキーの3パターンに展開させたPSD素材を紹介します。 フラットが好き、ソリッドが好きでそのまま使うもよし、比較して勉強するのにもよし、のちょっといつもとは趣向の違った素材となっています。 3 in 1 User Interface Elements Kit Part 1 (F... 続きを読む

Google＋風のボタンUIセット＆ドロップダウン:phpspot開発日誌

2011/10/03 50 users phpspot開発日誌 Google＋風 Buttons

Google Styled UI Buttons, Icon Buttons & Dropdown Menu Buttons Google＋風のボタンUIセット＆ドロップダウンの素材が入手できるサイトが公開されています。 まさにGoogle＋っぽい感じが出せるのとドロップダウンなんかもアイコン付きで綺麗に実装されています。 シンプルなデザインであるので普通にサイトで使ってもよさそうです。 アイコン... 続きを読む