美しい横メニューの作り方
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
[CSS]CSS3アニメーションを効果的に使ったResponsiveコンテンツ用のナビゲーション
Demo 5 上から順に回転します。 実装 Demo 1を例に、実装方法を紹介します。 HTML パネルにはh2要素、リンク、パラグラフを配置しており、一番上に各パネルへのリンクをnav要素で配置します。 <section class="cn-container"> <div class="cn-slide" id="slide-main"> <h2>Explore this</h2> <nav> <a href="#slide-1">Philosphy</a> <a href="#slide-2">Science</a> <a href="#slide-3">Literature</a> </nav> </div> <!-- Slide 1 and sub-slides --> <div class="cn-slide ts-slide-sub" id="slide-1"> <h2>Ph
[CSS]ウェブページのメニューにCSS3を使ってワンランクかっこよくするチュートリアル
Demo 3 背景のカラーがアイテムごとに異なります。 実装 HTML メニューはリスト要素で実装されており、二つのspan要素を内包したa要素とimg要素がアイテムに含まれています。 <ul class="mh-menu"> <li> <a href="#"> <span>Art Director</span> <span>Henry James</span> </a> <img src="images/1.jpg" alt="image01"/> </li> <!-- ... --> </ul> CSS Demo 1では、「.mh-menu li」には背景カラーとして「rgba(255,255,255, 0.8)」が割り当てられています。ホバー時にはこれが淡いブルー「rgba(225,239,240, 0.4)」になります。 .mh-menu li:hover a{ backgroun
これはちょっと使いたくなる、キーフレームを使った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
Seattle Business Consulting | Accelerate, Launch, Storytell
I have a love affair with growth. I’m also involved in a steamy romance with entrepreneurship and all things startup related. I believe everyone is born a creator and that everyone should launch and grow a venture. That’s why I do what I do. Trust me… even if you’re as stuck as a front wheel drive vehicle in three feet of mud…we can get you moving… You are here to grow. Now let’s get you moving… H
jQuery+CSSで実装するナビゲーションメニュー総集編 - かちびと.net
jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Down Menu Fly-out Menu with jQuery and CSS3 カッコいいですねー。反対側からスライドするフライアウトメニュー。css3を使っています。 Fly-out Menu with jQuery and CSS3 Rocking and Rol
Circle Navigation Effect with CSS3 | Codrops
Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. The effect is done with CSS3 transitions. Today we want to show you how to create a beau
ページ下部で折りたためるメニュー実装サンプル:phpspot開発日誌
Creating a Toggle CSS3 Bottom Navigation Bar ? Script Tutorials ページ下部で折りたためるメニュー実装サンプル。 次のように、クリックで開閉して折りたためるメニューを実装するCSS3+jQueryなサンプルが公開されています サンプルのダウンロードも出来るので実装は簡単にできます。 スタイルもCSSで変えられるということで独自デザイン調整は簡単ですね。 サイトに収まり切らないようなメニューを入れておくと使いようによってユーザビリティ向上に繋げられそうです。 関連エントリ CSSのナビゲーションメニューサンプル５５ ミニマムで場所を取らないCSSメニューの実装例
確実に進化している！CSS3アニメーションで実装する10種類のナビゲーション
Example 10 エレメントのサイズとカラーを変更し、重なり順も変更。 実装 HTML HTMLの構造は、アイコン、メインテキスト、サブテキスト、3つをli要素に含めます。 <ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon">A</span> <div class="ca-content"> <h2 class="ca-main">Exceptional Service</h2> <h3 class="ca-sub">Personalized to your needs</h3> </div> </a> </li> ... </ul> [ad#ad-2] CSS アイコンに使用しているのは画像ではなく、シンボルフォントを使用します。 @font-face { font-family: 'WebSymbolsRegul
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
