0

opencart サイトに左側のカテゴリ メニューがあります。

コードの一部は

<div id="menu_box">
    <div class="box-heading">Categories</div>
        <ul>
            <li>
                <a href="http://localhost/makeatech/index.php?route=product/category&amp;path=224">Game Cd's</a> 
                <ul class="second-level" style="position: absolute; left: 166px; top: -2px; padding: 5px; margin: 0px; width: 350px; background-color: rgb(245, 245, 245); border: 1px solid rgb(236, 236, 236); z-index: 10; display: block;">
                    <li id="third-li">
                        <a href="http://localhost/makeatech/index.php?route=product/category&amp;path=224_226"> SONY Playstations</a>                            
                    </li>
                    <li id="third-li">
                        <a href="http://localhost/makeatech/index.php?route=product/category&amp;path=224_225"> Xbox</a>
                    </li>
                </ul>
            </li>
            <li>.......</li>                     
        </ul>
    </div>   

3 つのレベルのサブカテゴリを持つカテゴリの膨大なリストがあります。したがって、以下のカテゴリは画面に表示されます。

に問題があることはわかっていfixed top cssます。Flipkart.comのような jquery を使用して、画面内にすべてのカテゴリを表示する方法はありますか

あなたの提案を教えてください。

ありがとう。

4

1 に答える 1

0

Flipkart.com のようなメニューを実現するには、親と子の間にrelative->absolute関係が必要です。例を挙げると:

  • メインメニュー(親)にposition: relative;(のUL 後の要素<div class="box-heading">)を持たせる
  • サブメニュー要素 (子) を作成しますposition: absolute;(これは既にオンになっています<ul class="second-level">)
  • また、子供たちを画面から外す必要があります(使用するleft: -999em;か、使用してdisplay: none;

基本的な CSS スタイルは次のようになります。

.box-heading > ul {
  position: relative;
}

.box-heading .second-level {
  position: absolute; 
  left: -999em; 
  top: -2px; 
  padding: 5px; 
  margin: 0px; 
  width: 350px; 
  background-color: rgb(245, 245, 245); 
  border: 1px solid rgb(236, 236, 236); 
  z-index: 10; 
  display: block;
}

.box-heading li:hover .second-level {
  left: 166px;
}
于 2012-11-27T13:38:38.730 に答える