現状ではまったく役に立たないコネタである。だけど、おもしろそうだったので紹介してみる。
IE7またはFirefoxでサンプルを見てほしい。ウインドウのサイズを小さくしていくと、メニューのボタン部分が適当に動いてくれる。
もともと、position: fixedを使うと、モバイル端末では画面がその部分に占領されてしまうし、横幅固定のデザインでは右のほうのメニューが使えなくなってしまう、という致命的な欠陥をどうやってかわそうか、と思ってこれを考えたわけだ。だが、あるNetFrontではposition: fixedはちゃんと適用するくせにmax/min-widthはろくに解釈しない（正しくは、解釈するけれどほかの実装面の都合によりはまる、あたりか）。全部調べたわけではないが、結局意味がない。
いちおう説明。
メニュー部分は、ul, li, aで構成されている。ulはposition: fixedとwidth: 760pxとmax-width: 100%（heightも同様）を指定し、ウインドウの横幅が小さくなったときにはulも自動的に縮むようにする。liには、width: 100%とmin-width: 200pxを指定し、基本的にはulと同じ幅だが、200px未満にはならないようにする。最後に、aはposition: absoluteでliの右下にwidth: 200pxのブロックを書くようにする。
これで、画面が小さくなれば横幅が自動的に縮むし、メニューも自動的に左によってくるが、200px未満にはならない、というボタンができる。max/min-widthを解釈しないIE6では、ウインドウのサイズを変えてもびくともしない。
ま、もう少したったらNetFrontももっとよくなって、意味がでてくるかもね。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/598