- 2010-10-29 (金) 5:24
- CSS | JavaScript | ナビゲーション
グローバルナビゲーションのコーディングはどういうものが最適なんだろうと思い考察メモ。
CSSの背景画像で作っていたけど印刷すると表示されないので、最近は<img>で表示したいなと思っています。
色々な情報を見つけたので記載。
◆◆◆ 【CSS編】 ◆◆◆
text-indentのマイナスを使わなくて良いもの2点をピックアップ。
▼ピュアCSSで実装するDKIRを応用した画像ボタンのロールオーバー効果
http://css-eblog.com/css-only/dkir-rollover.html
<img>でロールアウトの画像、<a>の背景画像にロールオーバー用の画像を敷き、ロールオーバー時に<img>をz-index: -1;にするというもの。<li>をfloatさせて<a>をdisplay: inline-block;にすることでwidthを指定しなくても良いというところ。魅力的な記述だな。
▼Appleサイトに見るグローバルメニューの画像置換手法
http://fixture.jp/blog/141
<li>をdisplay: inline-block;させて<a>をfloatとheight: 0; padding-top: 任意px; 。3年前の記述だから最新テクではないけど良いかもしれない。
◆◆◆ 【JavaScript編】 ◆◆◆
▼クロスフェードするロールオーバー処理をお手軽に実装するJavaScript rollover2.js
http://d.hatena.ne.jp/KAZUMiX/20071017/rollover2
ロールアウト画像からロールオーバー画像へフェードして切り替わってくれるもの。美しい。
_rollout _rollover という画像ファイル名の命名規則だけつければ良いもの。classとか付けなくていいのがお手軽。
▼綺麗なソースで画像をロールオーバーJavaScript
http://www.yomotsu.net/lab/javascripts/rollover
フェードはないですが上記と似たような画像ファイル名の命名規則だけつければ良いもの。
どれがいいか今度検証しようかな。
Popularity: 10% [?]
関連記事
タグ: CSS, JavaScript, ナビゲーション
- Older: CSS初期設定
Comments:2
- きのこ＠このき 11-04-05 (火) 22:43
-
こんばんはーそれと初めまして！
デイリーミュージック DailY@MusiC 管理人のきのこ＠このきといいます。返事遅くなりましたがフォローありがとうございます！
返事をどこに書けばよいかわからなかったのでコメント欄を利用させていただきました。Webデザインは奥が深いですよね。
自分も色々と試してみたりするんですけどごちゃごちゃしたり重くなってしまったりでなかなかです（；-ω-）ただ近々グローバルナビゲーションは入れたいと思っていたのでコチラの記事を参考にさせていただきます♪
長くなってしまいましたがこれからよろしくお願いいたしますm(_ _)m
- delivermilk 11-04-07 (木) 23:51
-
きのこ＠このき さん はじめまして！
忍者サイトマスターでフォローさせていただきました。コメントありがとうございます。
きのこさんのサイトではyoutubeを利用して面白いことされているなーと思いフォローさせていただきました。
今後ともよろしくお願いしますm(_ _)m
Trackbacks:0
- Trackback URL for this entry
- http://www.web-milk.com/articles/css/%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%8a%e3%83%93%ef%bc%88%e7%94%bb%e5%83%8f%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%ef%bc%89%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%87.html/trackback
- Listed below are links to weblogs that reference
- グローバルナビ（画像ロールオーバー）のコーディング方法の考察 from Webデザイナーメモ｜Webmilk
