ナビメニュー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に対応させる場合は矢印を画像にす... 続きを読む

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

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

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

タブやスクロール、ツールチップなど、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属性の代替となる機能で... 続きを読む

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

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

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

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

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

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

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

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

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