0

フォーマットされた HTML を動的メニューに変換する小さなスクリプトを開発しています。これは、フォーム作成者が JavaScript をあまり知らなくても動的メニューを作成できるようにするために行われています。セマンティック マークアップを記述するだけで、javascript コードがメニューを作成するという考え方です。

この fiddleでデモを見ることができます。

基本的に、次のような HTML を使用します。

<ul data-menu-horizontal="true" data-menu-width="500px">
   <li><a href="index.html">Home</a></li>
   <li><a href="index.html">Blog</a></li>
   <li><a href="index.html">News</a></li>
   <li><a href="index.html">Code</a></li>
   <li>
      <ul data-menu-horizontal="true" datamenu-header="Sub-Menu 1" data-menu-width="500px">
         <li><a href="index.html">Home</a></li>
         <li><a href="index.html">Computer Blog</a></li>
         <li><a href="index.html">More News</a></li>
      </ul>
   </li>     
   <li>
      <ul data-menu-vertical="true" data-menu-header="Sub-Menu 2" data-menu-width="500px">
         <li><a href="index.html">Home</a></li>
         <li><a href="index.html">Computer Blog</a></li>
         <li><a href="index.html">More News</a></li>
      </ul>
   </li>
</ul>

...そしてこれを次のように変換します:

<ul id="13575820577141" class="menu-horizontal" style="width: 500px;">
   <li><a href="index.html">Home</a></li>
   <li><a href="index.html">Blog</a></li>
   <li><a href="index.html">News</a></li>
   <li><a href="index.html">Code</a></li>
   <li>
          <h2 class="menu-horizontal-header">Sub-Menu 1</h2>
      <ul id="13575820577142" class="menu-horizontal" style="display: none; position: absolute; width: 500px;">
         <li><a href="index.html">Home</a></li>
         <li><a href="index.html">Computer Blog</a></li>
         <li><a href="index.html">More News</a></li>
      </ul>
   </li>     
   <li>
      <h2 class="menu-vertical-header">Sub-Menu 2</h2>
      <ul id="13575820577143" class="menu-vertical" style="display: none; position: absolute; width: 500px;">
         <li><a href="index.html">Home</a></li>
         <li><a href="index.html">Computer Blog</a></li>
         <li><a href="index.html">More News</a></li>
      </ul>
   </li>
</ul>

makeMenus()各メニューに表示/非表示機能を割り当てるjQuery (関数で始まる) と、適切なサブメニューを表示/非表示にする mouseover/mouseout ul( としてマークされている) メニュー ヘッダーがあります。h2

表示/非表示機能は、これまでにテストしたすべてのブラウザーでうまく機能します。li問題は、IE7 では、要素間であっても「マウスオーバー」機能が空白に当たるたびに機能しなくなることです。メニューを「きれいにする」ために空白が必要になるため、余分な空白をすべて単純に削除したくありません。

4

1 に答える 1

0

はぁ…何が問題だったのか、あなたにはわからないでしょう。「ul」要素に背景色を設定する必要がありました。IE7 は、少なくともマウスオーバーに関する限り、要素のボックスの一部として透明な背景を考慮していないと思います。メニュー要素に明確な背景色を選択せざるを得なくなりました。なんという引きずり！

見てくれた人ありがとう。うまくいけば、これは将来誰かを助けることができます。

于 2013-01-09T01:59:42.460 に答える