[CSS]IE6, 7も考慮した、CSS3で実装するドロップダウンメニュー
IE6, 7でもドロップダウンとしての機能を損なうことなく、そしてCSS3対応ブラウザでは更に見栄えをよくし、ユーザビリティも向上させるスタイルシートのチュートリアルを紹介します。 CSS3 dropdown menu デモページ [ad#ad-2] CSS3非対応のIE6, 7ではCSS3の角丸などは適用されてませんが、ドロップダウンとしての機能は損なわれずに実装されています。 デモページ：IE6での表示 下記は各ポイントを意訳したものです。 HTML HTMLはシンプルで、ドロップダウンはリストの入れ子で実装されています。 <ul id="menu"> <li><a href="#">Home</a></li> <li> <a href="#">Categories</a> <ul> <li><a href="#">CSS</a></li> <li><a href="#">Graphi
[JS]シャボン玉のようにふんわりと膨らんだり縮んだりするナビゲーション
マウスのホバーで、ふんわりと膨らんだり縮んだりするアニメーションがかわいらしいナビゲーションを実装するチュートリアルをCodropsから紹介します。 Awesome Bubble Navigation with jQuery デモページ デモでは円状に配置された各カテゴリにマウスをホバーすると、それぞれの配下コンテンツが配置される仕組みになっています。 アニメーションには緩急がつけられており、とても気持ちいいです。 実装方法は、HTML, CSS, JavaScriptのパートごとに丁寧に解説されており、画像を含む全ファイルがダウンロードできます。
javascriptライブラリ「jQuery」でドロップダウン型メニューを作る
twitter facebook hatena google pocket メニューにはさまざまありますが、ドロップダウン型のsuckerfishと呼ばれるスタイルは使い勝手がいいかもしれません。 今回はJavaScriptライブラリjQueryを用いてドロップダウン型のメニューを作成します。 via : jQuery suckerFish sponsors 使用方法 jQueryからjquery.jsをダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#nav-one li").hover( function(){ $("ul", this
» CSSでドロップダウンメニュー
このブログを作るに当たって、いろいろと試行錯誤をした記録です。すぐ忘れてしまうので、覚書として書き留めています。今回はヘッダーのメニュー編。 DEMO 01 S 02 短く 02 ても 02 幅一定 01 middle 02 Mサイズ 02 真ん中 03 長い文章も折り返さずに表示 03 一番長い横幅にそろいます 04 menu-aaaaaaaa 04 menu-bbbbbbb 04 menu-cccccccc 05 menu-a 05 menu-b 05 menu-c 03 ただしIEを除く 02 Mサイズ 01 For a long sentence 02 基本の 02 横幅は 02 94pxに 02 設定 03 文字数が多くなると 03 IE以外は 03 最大の横幅に 03 合わせて広がります CSSのドロップダウンメニューです。テストバージョンのオリジナルWordPress The
jQueryを使ったドロップダウンメニューの作り方 – creamu
woorkで、jQueryを使ったドロップダウンメニューの作り方が紹介されています。 ↑のようなシンプルで必要充分なメニューですね。マウスオーバーするとメニューの背景色が変わったり、レイアウトもかっちりしているので使いやすそうです。 HTML / CSSとjQueryのコードが公開されていますね。 デモは以下から。 » demo here 参考にしてみてはいかがでしょうか？ » How to implement a perfect multi-level navigation bar ブログのデザインリニューアルしたくなってきたぞ。MT5にするタイミングで、とか考えてたけど、ささっとやっちゃおうかな。
[JS]配置済みのリンクにドロップダウンを簡単に追加できるスクリプト
ページ内に配置したリンクに、リストで作成したドロップダウン型のナビゲーションを簡単に追加できるスクリプトをDynamic Driveから紹介します。 ナビゲーションに追加したデモ 配置できるナビゲーションは、オプションで不透明度、ディレイ時間、表示位置を調整することができます。 スクリプトの設置方法は、「anylinkcssmenu.js」「anylinkcssmenu.css」を外部ファイルで指定し、リンク要素のclassに「anchorclass」を記述します。 配置するナビゲーションは、divで括りclassに「anylinkcss」を記述し、任意のid（例：submenu1）を記述します。そのidと同じものをリンク要素のrelに記述します。 <textarea name="code" class="html" cols="60" rows="5"> <p><a href="http
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]商用サイトでもそのまま利用できるCSSのナビゲーション集
[CSS]複数行にも対応したシンプルでスタイリッシュなナビゲーション
[CSS]ドロップダウンを利用して詳細情報を表示するスタイルシート
Loading...
Loading...
[JS]ユーザビリティに配慮したドロップダウン型のナビゲーションを実装するチュートリアル