かっこいいナビゲーション

html5

Large Drop Down Menu Demoというのを見つけた。かっこいい。
これをdesktop、mobile、print用のデザインにも応用させたい。
（注意：最後には挫けています。）　

簡単な分析

自分用のメモ、他人への理解は気にしない。

<body> 
<h1>さんぷる</h1> 
<div class="box"> 
<h2>おおきな摘んで落とす項目なり</h2> 
<ul id="ldd_menu" class="ldd_menu"> 
<li> 
<span>常に表示される</span><!-- Increases to 510px in width--> 
<div class="ldd_submenu"> 
<ul> 
<li class="ldd_heading">一つ目</li> 
<li><a href="#">ああああ</a></li> 
<li><a href="#">いいいい</a></li> 
<li><a href="#">うううう</a></li> 
<li><a href="#">ええええ</a></li> 
<li><a href="#">おおおお</a></li> 
</ul> 
<ul> 
<li class="ldd_heading">二つ目</li> 
<li><a href="#">かかかか</a></li> 
<li><a href="#">きききき</a></li> 
<li><a href="#">くくくく</a></li> 
<li><a href="#">けけけけ</a></li> 
<li><a href="#">ここここ</a></li> 
</ul> 
※閉じるタグを適宜

<!-- The JavaScript --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() {
/**
* the menu
*/
var $menu = $('#ldd_menu');

/**
* for each list element,
* we show the submenu when hovering and
* expand the span element (title) to 510px
*/
$menu.children('li').each(function(){
var $this = $(this);
var $span = $this.children('span');
$span.data('width',$span.width());

$this.bind('mouseenter',function(){
$menu.find('.ldd_submenu').stop(true,true).hide();
$span.stop().animate({'width':'510px'},300,function(){
$this.find('.ldd_submenu').slideDown(300);
});
}).bind('mouseleave',function(){
$this.find('.ldd_submenu').stop(true,true).hide();
$span.stop().animate({'width':$span.data('width')+'px'},300);
});
});
});
</script>

ここからが、魔改造なところ。
headerに記述する「スタイルシート切替」に応じて、こっちの表示も切り替えたい。

  • style_desktop：このビュー
  • style_mobile：スクリプトの動作なし、画面最下部で全て表示
  • style_print：画面に表示しない

どうしよう？
Switch stylesheets with jQueryと組み合わせ方を考え中･･･
　

結果

jQueryの挙動に悩むので止める。「動作なし」が出来なかった･･･
　

次の手

Create a cool CSS-based drop-down menuというCSSだけで動作するプルダウンメニューを見つける。CSS切替でも活躍するだろうと考えて実装中･･･