[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]次々にボックスがアニメーションでスライドするナビゲーションを実装するチュートリアル
次々にボックスがスライドする三つのアニメーションを組み合わたナビゲーションを実装するチュートリアルを紹介します。 Slide Down Box Menu with jQuery and CSS3 デモページ デモではナビゲーションの各項目をマウスホバーすると、アニメーションでラベルが下にストンと落ち、サムネイル画像が拡大表示されます。更に、下位階層のある項目は左右にスライド表示されます。 実装は割とシンプルです。 ナビゲーションはリスト要素で配置されています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <ul id="sdt_menu" class="sdt_menu"> <li> <a href="#"> <img src="images/1.jpg" alt=""/> <span class="sdt_act
jQuery+CSSで実装するナビゲーションメニュー総集編
cssやプログラミングcss+jQuery jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Do
jQueryを使った、動きのあるナビゲーションメニューチュートリアル集 – creamu
スムーズな動きのナビゲーションメニューを作りたい。 そんなときにおすすめなのが、『Excellent jQuery Navigation Menu Tutorials』。jQueryを使った、動きのあるナビゲーションメニューチュートリアル集です。 いい感じのものが揃っていますね。 How to Make a Smooth Animated Menu with jQuery マウスオーバーすると、すとんとメニューの説明を表示 Animated Drop Down Menu with jQuery クリックすると、すっとドロップダウン型で表示されるメニュー How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery HTML5,CSS3でのドロップダウンメニューの作り方 How to Build a Lava-Lamp Styl
[JS]シャボン玉のようにふんわりと膨らんだり縮んだりするナビゲーション
マウスのホバーで、ふんわりと膨らんだり縮んだりするアニメーションがかわいらしいナビゲーションを実装するチュートリアルをCodropsから紹介します。 Awesome Bubble Navigation with jQuery デモページ デモでは円状に配置された各カテゴリにマウスをホバーすると、それぞれの配下コンテンツが配置される仕組みになっています。 アニメーションには緩急がつけられており、とても気持ちいいです。 実装方法は、HTML, CSS, JavaScriptのパートごとに丁寧に解説されており、画像を含む全ファイルがダウンロードできます。
ボタン、ナビゲーション、タブなどのPSD素材集 -Button Project
シンプルなもの、繊細なもの、メタリックなものなど多彩なデザインが揃ったボタン、ナビゲーション、タブなどのPSD素材を紹介します。 Button Collection: 250 psds 上記は、Button Projectの総まとめとも言うべき250個のボタンがセットになったものです。 インデックスは下記ページになります。 Button Project ボタンの素材はPSDで提供されており、レイヤーが保持された状態となっています。
かっこいい水平メニュー20 – creamu
水平メニューをかっこいいデザインにしたい。 そんなときに参考になるのが、『20 Stunning Examples of Horizontal Navigation Menus』。かっこいい水平メニュー集です。 いい感じのものが揃っているのでご紹介します。 David Hellmann タイポグラフィーをうまく使ったデザイン。サイトもかっこいいです Sarah Longnecker カレント表示時のコントラストが高くわかりやすいメニュー Project Vino よく見るメニュー。コンテンツの背景とカレント時の色がつながるイメージ Benjamin Christie 吹き出しをうまく使ったデザイン MacRabbit 無彩色ですが、マウスオーバー時にカラーになるのがかっこいいメニュー 水平メニューを作るときの参考に、見てみてください。 20 Stunning Examples of Hor
コンテンツスライダーとツールチップナビゲーションを実装するチュートリアル
ウェブサイトのトップページなどにぴったりなコンテンツスライダーやツールチップナビゲーションなどを実装したページを作成するチュートリアルをAcrisDesignから紹介します。 Create Portfolio Website With CSS/jQuery デモページ チュートリアルのポイントはダイナミックなアニメーションでスライドするコンテンツスライダーと補足情報がツールチップ表示されるナビゲーションです。 ツールチップナビゲーション マウスオーバーで補足情報を表示。 スクリプトのベースにはjQueryが使用されており、プラグインはそれぞれ下記のものが使用されています。 コンテンツスライダー Automatic Image Slider ツールチップナビゲーション Create A Floating Navigation チュートリアルではそれらのHTML/CSS/JavaScriptだ
[JS]アニメーションのタイミングが絶妙なナビゲーションのスクリプト
マウスオーバーすると、下からパネルとアイコンをアニメーションでスライド表示するナビゲーションを実装するチュートリアルをCodropsから紹介します。 A Fresh Bottom Slide Out Menu with jQuery デモページ ナビゲーションのインタラクションにはjQueryが使用されており、シャドウや角丸のエフェクトにはCSS3が使用されています。 パネルやアイコンの表示位置、アニメーションのタイミングは変更が可能です。 パネルとアイコンのタイミングを異なる値にするのがポイントです。 チュートリアルではHTML、CSS、JavaScriptのコードが解説付きで紹介されており、全ソースをダウンロードすることもできます。
MacのStackの動きを実装するjQuery – creamu
洗練されたインターフェースを実装したい。 そんなときに参考になるのが、『”Outside the Box” Navigation with jQuery』。MacのStackの動きを実装するjQueryです。 MacのDock風の動きはよく見られますが、Stackの動きを作っていますね。動きが軽快でかなり気持ちいいです。HTMLはul, liでクリーンに書かれていますね。 デモは以下から。 Demo – see it in action 一度見てみてください。 “Outside the Box” Navigation with jQuery いろいろぱつぱつだったけどようやく少し落ち着いた。一つリリースできて、もう一つリリースできそうで、いい感じです。クライアントに喜んでもらえるとがんばった甲斐がありますね。
アイコンがふわっと拡大するjQuery – creamu
マウスオーバー時に気持ちのいい効果をつけたい。 そんなときにおすすめなのが、『BubbleUP』。アイコンがふわっと拡大するjQueryです。 アイコンにマウスオーバーすると、ふわっとサイズが大きくなりますね。動きが滑らかで気持ちいいです。 デモは以下から。 jQuery Menu Plugin: BubbleUP 実装方法も詳しく解説されているので、ぜひ見てみてください。 Learning jQuery: Your First jQuery Plugin, “BubbleUP” ブログ遅くなりました。。昨日は書けなかった。すんまへんm(_ _)m 急いで作業しているところでOSが起動しなくなり、ここ数年で一番大変な日を過ごしました。。。 セキュリティーについて深く考えさせられたので、心機一転してがんばります。
10 Creative Website Navigation Designs - 1stWebDesigner
While most websites use similar navigation structures and placements, there are small proportions that break free of the traditional layouts. These websites often do so to present a unique design, while also to experiment with alternate and often improved solutions. Every website is different, and the one-size-fits-all approach can often be outdated – particularly for websites which are more visua
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
[CSS]商用サイトでもそのまま利用できるCSSのナビゲーション集
[JS]丁寧に解説された、LavaLampナビゲーションを作成するチュートリアル | コリス