6個のスタイル規則だけで作るナビゲーションバー

f:id:tenman:20091024103413p:image


ナビゲーションバーは、ホームページの上部や、サイドバーに、リンクを並べたものです。


ナビゲーションバーは、階層構造になっていて、ホルダとファイルのように、ひとつの項目にマウスカーソルを置くと、そのカテゴリに含まれるファイルや、ホルダのリストを表示するようになっています。


表示する必要のないリストをうまく隠し、マウスカーソルをのせるとそのリストを表示するという仕組みなのですが、そのような機能を簡単に実現するためには、スタイルの指定が細かく正確に出来なければなりません。


新しいブラウザは、そのあたりの機能がきちんとしていて、CSSだけで簡単に作ることが出来ます。


インターネットでは、IE6などのブラウザがいまだに現役でかなりの数が使われています。


古いブラウザで表示できないHTMLがいいとは思いませんが、新しいブラウザでも、古いブラウザでも、とにかく、視覚的な同一性を追求しすぎることは、WEB制作コストを跳ね上げることになります。




インターネット上での「表現とはなにか」ということについて、考えるべき時期なのかもしれません。


ナビゲーションバーは、ブログなどを使っていると、自動的に作成されるので作ることはない。


だから、ナビゲーション用のリンクは、複雑で、CSSだけじゃいろいろと問題があって、出来れば、触りたくないという、気持ちもある。


しかし、IE6の頃からずいぶん経ち、IE6には、HTMLのリストスタイルで見せればいい。
と決めて書いてみることにした。


作る過程では、いろいろ考え込んで、時間もかかったが、出来上がると、


いいのかなこれでと思うほど、シンプルすぎて

※ せっかくなのでボタンらしく、色の指定も追加してみました:-)