私が、実際ばんばん作るようになると、Pixel Perfectでサイズはかりながら、画像を作りつつサクラエディター一本でCSSとJavaScriptとか書いて作るようになるねん。 ドリームウェーバーなんて立ち上げるのもめんどくさくなるねん。
と、言うたら、とても怯えた顔をして、じゃどうやってフォバーで画像変わるメニューとか作れるんですか？と言われて、
私としては明るく「すごく便利なJavaScriptがあって、CSSで適当に変えたらいいだけよ！！」と、言ったのですが、本当に困ったような表情になってしまいました。（ごめんよ～）
なんか、専門学校？みたいなところで、ドリームウェーバー一本で勉強してきたらしい。私がドリームウェーバーの達人とかだったらよかったのだが…。期待を裏切って申し訳なかった。 いや、私もJavaScriptなんて意味なんかわかってないから安心しろ、とか言うたのも不安になったらしい。
悪いことをしてしまった…。
気持ちわからなくはない。この道に入る時に、私もここまで勉強の連続で技術のマスターには独自にいろいろ調べることが非常に重要だということを知りませんでした。
英語が多少できるので、海外のサイトを見ながら独自でゲットした技術も多く、私のやり方はもしかしたらアウトローなのかもしれません…。
さて、メニューでございます。写真のようなサブメニューですが、自分で言うのもなんですが、よくできていると思います。
ページの多い会社の内容をスッキリ整理して見せたいときに、このようなサブメニューは私は重要だと思っていたので、調べぬきました。 ここにすっかりやる気がなくなった彼のためにも公開したいと思います。
サブメニューのサンプルって結構ありますが、文字だけで見せて味気ないのでいやだったんです。最近はjqueryとかでも簡単にできるみたいですが…
横抜きのjqueryも簡単そう と思ってやってみたけど、どうしてこれにjQueryいるのかわからなかった。すべてCSSでできると思うけど。ただ反対色ではつくれなかった。文字の色まで変えられないので…。そこにjQuery使うのかな？ 疲れてやめました。 だいたいCSSだけでメニューはそこそこできるはずなんです。 これとか内容多いところによさげ 縦型のチェースするの
このsexyな動きのメニューもいい動きはjqueryはいいと思います。
ま…なかなか画像でやってるのは見たことがない。
写真のように作れるようになるのは私的には結構大変でこの記事なんか相当古いです。 最初の頃はCSSももひとつわかってなかったし。
まず元ネタ１はこちらのJavaScriptの技術のページから拾ってきた結構古い記事です。
この文字だけの無味乾燥なメニューに使われているエフェクトが実はフェードがあったり、動きがブルブルしたりと結構凝ってるんです。
で、元ネタ２がマウスオーバーすると画像が変わるという便利なJavaScriptです。
この２のスクリプトはものごつ優秀で、こちらのサンプルを見たらよりわかると思いますが、body要素にidで画像名と同じものを使うことにより、簡単に表示されているページに応じてメニューの色を変更することができます。また、CSSいじることなく簡単にマウスオーバーボタンができる優れものです。
この２つを組み合わせて書いたのが 人事担当者や社内のリーダー研修にオススメな「おもしろ心理学教室」に採用されたメニューなのであります。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
- 元ネタからJSを落としてきます。 元ネタ１ 元ネタ２
- 作り方は、まずメニューを書きます。おなじみのul と liの組み合わせです。
- メニューに合わせて画像を作ります。名前をきちんとつけてhoge_on.jpg と hoge_off.jpgで切り替えて作ります
- サブメニューになるところはliで閉じるところに入れ子でulとliが続きます
- 画像を表示させてそれにリンクをはるという形です。 <li><a href="リンク先"><img src="./images/menu/sinri_off.jpg" alt="画像について" /></a></li>
- <div id="navbar" class="mlmenu horizontal bluewhite fade"> とdivでメニュー囲みます。
- id にnavbar というのと、classで 横の場合はhorizontal などと設定を入れる仕様です。 下の方に書いてます
- 一生懸命にCSSをいじります こちらにおもしろのCSSがあります。メニュー部分というところを参考にしてください
- #menu{width:800px;height:60px;}
#navbar {width:800px;height:49px;float:none;} と場所もしっかり書きます。画像もabsoluteが多いみたいです。 - 私の場合はとりあえずironでキレイに見えることとめざして第一弾完成。次にIEで確認する
- たいていIE７とIE6でサブメニューが右に大きく離れていますのでhuckで調整するものを書きます。
IE8になると妙にハックかけないほうがいいので、分岐は
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="
./css/ie.css" />
と入れますが、ie.cssの中で細かくie6 * html ie7 *+htmlで加工します。
ちなみに、IronについているIEタブはIE7を表示します。（おそらくChromeも同じと思われる）
私はIEテスターを愛用してます。
でも、IE6は微妙に違いますね。実際に見たのとでは…。まぁ。最近はIE7に対応をしっかりしておけばいいかなと…。IE８とIE7は匹敵するほど多いので、きっちりチェックはしておくべきでしょう。
尚、オマケ情報で、精神分析が必要な悩める若者にもピッタリな心理教室で勉強する意味を私と奥野先生が深夜放送タッチでしゃべっているmp3をはりつけましたが、これがアメリカのブログではりつけて使っていたグーグルのプレイヤーでもらってきたものです。 音声の調整もあってとても便利だと思います。
<embed type="application/x-shockwave-flash" wmode="transparent" src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://絶対パスで書く/hogehoge.MP3" height="27" width="320"></embed>
このメニューが作れたら、後だいたいちょろっとjqueryかましたら仕事できるじゃないですかなぁ。
縦メニューはこちらです。
このフラッシュのmp3プレイヤーも設置が簡単でカスタマイズもできるみたい。(IEでは表示されませんでしたorz)
jquery のこのドロップダウンメニュー いいかも。
0 コメント :
コメントを投稿
コメントありがとうございます。