IEでは異なる要素でも同じ名前はダメ。

表題の通りです。

 DIV要素とUL要素で同じ名前にしてやられました。

以下のように指定したとします。

<div id="menu">
<ul id="menu">
<li>
Click Here
</li>
</ul>
</div>

それで、クリック時に呼び出す関数を指定したとします。

    $(document).ready(
 function()
 {
     $("ul#menu > li").click(function(){
     alert("here");
     });
 });

これだと、Firefoxは意図を察して動いてくれるのですが、IEだとだめだめです。

あちゃー　という本日の発見でした。

jQuery: クリックして止まるドロップダウンメニュー

jQuery を使うとメニューを比較的エレガントに実装できます。

slideDown() / slideUp() などの関数を利用すると任意のコンポーネントを表示または非表示に設定できます。

さらに、マウスクリックでメニューを固定するなどいう指定が可能です。

固定されたメニューは画面いずれかの場所でクリック数すると解除されます。

以下、jQueryの部分です。

$(document).ready(function(){
    // 1 when any menu is shown
    var menuOn=0;

    $("ul#menu > li").click(function(){
        // hide all menu items
        $("ul#menu > li").each(function(){
            $(this).find('ul').css("display","none");
          });
        $(this).find('ul').css("display","block");
        menuOn=1;
      });
              
    // hide/show menu items
    $("ul#menu > li").hover(function(){// show menu when the cursor is over
        if(menuOn==0)
          {
            $(this).find('ul').css("display","block");
          }
      },      
      function(){// hide menu when the cursor is off
        if(menuOn==0)
          {
            $(this).find('ul').css("display","none");
          }
      });

    // hide all menus and clear the flag
    $("#canvas").click(function(){
        if(menuOn==1)
          {
            $("ul#menu > li").each(function(){
                $(this).find('ul').css("display","none");
              });
          }
        menuOn=0;
      });
  });

スタイルシートです。

ul#menu,
ul#menu ul
{
    list-style:none;
    z-index:1;
    position:relative;
}
ul#menu ul li 
{
    line-height:25px;
    width:100px;
    height:25px;
    background:#2D435A;
}
ul#menu ul li a
{
    text-decoration:none;
    color:#cccccc;
    margin-left:10px;
    font-size:14px;
    text-align:none;
}
ul#menu ul li#heading a,
table#submenu a#heading
{
    color:white;
    font-size:16px;
    margin-left:0px;
}
ul#menu ul
{
    display:none;  
}
ul#menu,
ul#menu li,
ul#menu ul,
ul#menu ul li
{
    margin:0px;
    padding:0px;
}
ul#menu li, 
ul#menu ul li 
{
    color:white;
}

div#menubar
{
    width:100%;
    background-image:url('../../../../images/topNav_bkgd.jpg');background-repeat:x-repeat;
}

ul#menu
{
    width:960px;
    margin:0px auto;
    padding:0px;
}
ul#menu li
{
    height:25px;
    line-height:25px;
    display:inline-block;
    vertical-align:top;
    color:white;
    text-align:center;
    width:130px;
    border:0px;
    *display:inline;
    *zoom:1;
}
ul#menu li ul
{
    width:400px;
    height:400px;
    background:#2D435A;
    opacity:.9;
    filter:alpha(opacity=90);
    -ms-filter:"alpha(opacity=90)";
    -moz-opacity:.9;
    -khtml-opacity:.9;
    text-align:left;
}
ul#menu li ul li
{
    text-align:left;
    border:none;
    padding-top:10px;
    padding-left:10px;
}
table#submenu
{
    margin:0px;
    margin-top:10px;
    margin-left:10px;
    border:0px;
    border-collapse:collapse;
    width:400px;
}
table#submenu td
{
    text-align:left;
    vertical-align:top;
}
div#canvas
{
    width:100%;
    text-align:center;
}
div#position
{
    width:960px;
    margin:0px auto;  
    text-align:left;
}

HTMLの部分を示します。

<div id="menu">
<ul>
<li>Home
    <ul>
<li><a href="http://www.blogger.com/default.htm" title="Noritake VFD">Home</a>
      </li>
</ul>
</li>
</ul>
</div>

z-index はpositionを指定しないと意味がない。

表題の通りです。 z-index はpositionを指定しないとならないんですね。

さらに、IE では clear:both を指定しないと z-index が指定できない。

気をつけましょう。

縦型メニューをjQueryで作る

縦型メニューをjQueryで書いたら簡潔かつ論理的にできたのでここにメモっときます。

    $(document).ready(function()
        {
     $('ul#menu > li').click(function(){         
         $(this).next().slideToggle();
     });
        }); 

これだけです。いくつかポイントがあって、まずは next() で後続の要素を指定します。

入れ子の要素を指定しているわけではないので、サブメニューを記述する時には注意してください。

あとはどのような関数でも呼べばいいわけですが、ここでは slideToggle()で表示を切り替えています。

既出かもという気もするのですがなかなかエレガントなのでここに置いておきます。

    <ul id="menu">
      <li>Homepages</li>
      <ul>
   <li><a href="http://easai.web.fc2.com/biology/">Biology</a></li>
   <li><a href="http://easai.web.fc2.com/travel/">Travel</a></li>
   <li><a href="http://easai.web.fc2.com/phyla/">Phyla</a></li>
   <li><a href="http://easai.web.fc2.com/homepage/">Homepage</a></li>
   <li><a href="http://easai.web.fc2.com/biochemistry/">Biochemistry</a></li>
   <li><a href="http://easai.web.fc2.com/neuroscience/">Neuroscience</a></li>
      </ul>
      <li>Lignuistics</li>
 <ul>
            <li><a href="http://easai.web.fc2.com/linguistics/">Linguistics</a></li>
 </ul>
      <li>Nature series</li>
 <ul>
   <li><a href="http://easai.web.fc2.com/aves/">Aves</a></li>
   <li><a href="http://easai.web.fc2.com/eutheria/">Eutheria</a></li>
   <li><a href="http://easai.web.fc2.com/lepidoptera/">Lepidoptera</a></li>
   <li><a href="http://easai.web.fc2.com/odonata/">Odonata</a></li>
 </ul>
    </ul>

スタイルシートもあげておきます（２０１３－１２－０５）。

body
{
display:box;display:-moz-box;display:-webkit-box;display:-ms-flexbox;
}
ul#menu
{
width:180px;
font-family:sans-serif;
font-size:18px;
color:gray;
margin-left:10px;
margin-right:60px;
}
ul#menu,
ul#menu ul
{
  list-style:none;
  padding:0px;
}
ul#menu li
{
    border:1px solid #e0e0e0;
    background:#ececec;
    height:50px;
    padding:10px;    
}
ul#menu ul
{
    display:none;
}
ul#menu ul li
{
    background:#fafafa;
    font-size:16px;
    height:30px;
}
ul#menu ul a
{
    text-decoration:none;
    color:gray;
}