擬似要素とCSS3を使ってリストメニューを楽しくデザイン
画像を使わずに擬似要素を使ってリストメニューをデザインしてみました。CSS3のtransitionを使った動きのあるメニューも作ってみました。 まずはHTMLから <ul class="rist-menu" id="list1"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Ruby</a></li> </ul> classでリストとリンクに関することを指定して、これはすべてのサンプル共通になっています。idで擬似要素に関する内容を指定して、サンプルごとで変わっています。 1つのページに複数のサンプルを設置するためこのようにしましたが、実際設置するときは1つだと思い
CSS アーカイブ - Toro_Unit
CSSプリプロセッサを使い始めてだいぶ長いこと経ったような気がします。 最初に触ったのは、LESS でした。そ…
スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ライブラリ「stickyMojo」:phpspot開発日誌
スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ライブラリ「stickyMojo」 2012年09月10日- stickyMojo contained fixed position sticky sidebar jquery plugin スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ライブラリ「stickyMojo」。 一昔まえだとスクロールする度にアニメーションして酔ってしまうようなナビゲーションが通常でしたが、FacebookのPC版右カラムのようにposition:fixedをうまく使ってページに固定されるナビゲーションを簡単に実装できます。 スクロール位置に応じてナビゲーションを固定するため、シームレスに固定されるのが特徴。 ページを開いた所 ページをスクロールした所。ページの左上に常に固定されるので、途中で移動し
レスポンシブなナビゲーションの見本やチュートリアル:phpspot開発日誌
10 Responsive Navigation Solutions and Tutorials - Speckyboy Design Magazine レスポンシブなナビゲーションの見本やチュートリアル。 ナビゲーションなんかは最初から幅を取ったものをデザインしたりするためレスポンシブなWEBデザインにした時にいかに縮小するか、というテクニックを知っておくといざ作る時に便利。 通常のナビゲーションをいっそドロップダウンリストに動的に変更してみたり、単純にブロックをフロートで横並びにしてみたりと見本が色々。 一度見ておけば、ああ、こういう縮小の方法もあるよな、というネタ帳になりそうです こういったレスポンシブなテクニックも2,3年前には具体的な名前や方法としては、なかったような気がするので、本当にこの業界は覚える事が多いですね 関連エントリ タッチ可能でレスポンシブなスライダー実装「Roy
確実に進化している！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
これはちょっと使いたくなる、キーフレームを使った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
ユニークなボックスタイプのナビゲーションメニューを実装するjQueryプラグイン・BoxyMenu - かちびと.net
いろいろとアイデアが参考になった ので備忘録。ボックスタイプのナビ メニューで、ユニークなUIです。こ ういうアイデアというか、発想が出 てくるようになりたいです。 というわけでただのメモ。僕では思い浮かばないアイデアで素敵だったので衝動的に書き留めておきます。 一見変哲も無いコンテンツですけど・・・どうもドロップダウンメニューにして当然、みたいな流れが自分の中にあったのでいい刺激になりました。 こんな感じ。ドロップダウンも子要素を隠すものですし、同じように隠すならこういう形もありだなぁと思いました。子要素が少ないことが条件ですけど・・・ 手抜きですけどサンプル用意しました。 Sample ピンを押すとマウスを離しても戻らず固定できます。cookie使うのもありですね。これはいいユーザビリティかもしれない。 ただ、最初はピンを押せるって分かりませんでした。もう少し分かりやすく明示してあげた
[CSS]ナビゲーションを実装するスタイルシートのテクニックのまとめ | コリス
CSS3をはじめとする、スタイルシートのさまざまなテクニックを使って実装するナビゲーションを紹介します。 ※一部、jQueryを併用するものもあります。
Beautiful JQuery Navigation for Free Download | Blogger's Path
"JQuery the Backbone of every web application and website. JQuery fills a new life in web applications and websites and makes websites faster, multifunctional and easy to upload. When people see flash websites they create a view in their mind that flash websites are beautiful but there are several drawbacks of flash websites, they take so much time to load and if you need to make any changes in yo
SimpleBits®
Hi, I’m Dan Cederholm. SimpleBits® is my tiny design studio, type foundry, and goods shop. We make letters and numbers (and goods with those letters and numbers on them) for people like you. Handmade in Salem, Massachusetts. SimpleBits has been my design studio and hypertext home for over 20 years. At times, I’m available for select logo design projects. Previously, I co-founded Dribbble. I also i
[CSS]スクリプト無しで、リスト要素をプルダウンにするスタイルシート
IE6などクロスブラウザ対応の、リスト要素をプルダウンにするスタイルシートのチュートリアルをPro Blog Designから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="blogroll"> <p>Blogroll</p> <ul> <li><a href="http://www.site.com/">Example Site</a></li> <li><a href="http://www.site.com/">Example Site</a></li> <li><a href="http://www.site.com/">Example Site</a></li> <li><a href="http://www.site.com/">Example Site</a></li> </u
手軽に導入しやすい特徴的な14のドロップダウンメニューサンプル
なかなか素敵なまとめ記事がありました。 大規模なサイトに最適なリンク案内として、ドロップダウンメニューの導入が使われる事がありますが、今回のエントリーは、こうしたメニューの導入を簡単にしてくれるものとなるでしょう。 CSS、jQuery、MooTools、JavaScript WEBサイトのメニューはシンプルであるべきと考えます。大規模なWEBサイトでは、ドロップダウンメニューを設置することで、ユーザーが容易に移動できるようになる。時にそれらの設置が難しい時は以下を開いてみると良い。 14 Easy to Implement Drop Down Menu Solutions | Web Design Ledger 14ある中で今回触った感触としてお勧めが5つ。 現れ方がカッコいいドロップダウンメニュー ClarkLab ? Animated Drop Down Menu with jQue
[CSS]サムネイル画像を表示するドロップダウン型ナビゲーション
タブ形式のドロップダウンの子要素にサムネイル画像を表示するナビゲーションのスタイルシートをCSSplayから紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressをCMSとして利用する際、固定ページの親ページと子ページに共通のナビゲーションを作るTips
Coding Methodology | CFニュース | CODING FACTORY - コーディング専門サービス
[JS]入れ子のパネルをスライドさせるアコーディオンの超軽量スクリプト
http://www.designwalker.com/2009/02/jquery-dropdown.html
[CSS]軽快に動作するタブコンテンツを実装するスタイルシート
ユーザーフレンドリーな優れたナビゲーション集
http://www.csstea.com/css-gallery-news-and-resources/264-120-excellent-examples-of-css-horizantal-menu.html