Lava Lampの設定にハマる(未解決)

 ページ上部のメニューをちょっと変更してみた。ちなみに、デザインの参考にしたのは、「MITRABLOG」。WordPressのテーマとしても公開されているデザインなのだが無理矢理このブログに移植しようと試みた。ソースは一切見ずにキャプチャして画面データからレイアウトサイズや使われている色を割り出すという、レシピがあるにもかかわらずそれを見ずに分子構成からオリジナルの味を再現するような愚挙に走っているわけです。ほっとけ。

 しかし、ただ真似するだけでは芸が無いので、jQueryのプラグイン「Lava Lamp」を使って、無駄にリッチなメニューを付けてみようと画策してみた。この「Lava Lamp」、実際ののデモ画面を見ていただけると、一目瞭然なのだが、メニューにマウスカーソルを合わせると、ミュイーンとフォーカス部分が動くのである。一見、Flashのようにも見えるが、CSSとJavaScriptだけで行っている。

 実際に当ブログに入れてみると、ミュイーンと動きはするのだがクリックできない。クリックしても該当のページに移動できないので、全く見掛け倒しのメニューとなってしまった。というわけで、現在はJavaScriptは外して、Lava LampのCSSだけでメニューを構成している。

 あと既知の問題として、トップページと各記事のメニューは問題なく表示されるのだが、カテゴリー別ページや月別ページでは表示がずれる。ほんとCSSってめんどくさい。メニューだけTableで組んでしまおうか、なんてことも考えたくなる。

#風邪を引いたらしく昨日から伏せっている。体の節々が痛くて、楽しみにしていた「ピューと吹く!ジャガー THE MOVIE」も見に行けず、冴えない連休となりそう。

  1. 私も同じ問題で苦しんでいてここに辿り着きましたが、自力で解決しました。
    最初はz-indexの問題かと思いましたが違いました。
    サンプルからコピーしたJavaScriptコードで下記のような部分があると思いますので、click以下の3行を削除して下さい。こーいうの見落としがちですね。。。


    $("#navi").lavaLamp({
    fx: "easeOutBack",
    speed: 400,
    click: function(event, menuItem) {
    return false;
    }
    });

    • くまくま
    • 2009年 7月17日

    私もハマりました。
    ここに解決策が記載されています。http://allabout.co.jp/internet/javascript/closeup/CU20080415A/

    ちなみに大元のサイトにもコメントで解決方法が載っています。
    http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

    コメント欄の「703. Stefanさん」
    I just found the solution in post No. 41.
    The keyword is to replace the return false to true.

    ようは「false」を「true」にすればOKです。

  1. トラックバックはまだありません。