1

私はこれを約1週間グーグルしてきましたが、3つのブラウザーすべてで機能する解決策を見つけることができません。クロスプラットフォームのcssを使用して、ネストされた順序なしリストを水平方向に出力する方法を見つけようとしています。

ここで私がやろうとしていることのモックアップをまとめました：http：//jsfiddle.net/gNqJb/ Tier1およびTier2ブロックをクリックすると（メニューが展開され始めるので、次のことを行う必要があります）最初にこれを実行してください）、必要な機能が表示されます。メニューヘッダーをクリックすると、ヘッダーの横にあるサブメニューが水平方向に展開されます。このコードの問題は、サブメニューがリストアイテムブロック（<.li>）の外側に配置されることです。また、IEではまったく機能しません。この例では、名前に*が含まれているものはすべてヘッダーブロックです。

Drupalを使用しているため、次のように出力されるメニューに固執しています。

<ul class="menu">
    <li class="first expanded"><a href="#" class="active">Home</a>
        <ul class="menu">
            <li class="first last leaf"><a href="#" class="active">Test</a></li>
        </ul>
    </li>
    <li class="first expanded"><a href="#" class="active">Home</a>
        <ul class="menu">
            <li class="first last leaf"><a href="#" class="active">Test</a></li>
        </ul>
    </li>
    <li class="first expanded"><a href="#" class="active">Home</a>
        <ul class="menu">
            <li class="first last leaf"><a href="#" class="active">Test</a></li>
        </ul>
    </li>
    <li class="first expanded"><a href="#" class="active">Home</a>
        <ul class="menu">
            <li class="first last leaf"><a href="#" class="active">Test</a>
                <ul class="menu">
                    <li class="first last leaf"><a href="#" class="active">Test</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="last leaf"><a href="#" class="active">Test Outside</a></li>
</ul>

フォーマットを適用すると、次のようになります：http: //jsfiddle.net/C2eU4/

DrupalでIE/Chrome/FFで使用できるようにこのレイアウトを修正するのに助けていただければ幸いです。

あなたたちが与えることができるどんな助けにも前もって感謝します！

4

1 に答える 1

0

さて、少なくともこれがどのように機能するかを説明するための純粋な CSS ソリューションを用意しました。現時点では、アニメーションは Webkit ブラウザーでのみ機能することに注意してください。

ここでフィドル

CSS に関連する変更は次のとおりです。

li ul {
    width:0px;
    position: absolute;
    left:100%;
    top: -1px;
    overflow:hidden;
    -webkit-animation-name: slide;
   animation-name: slide;
   -webkit-animation-duration: .5s;
   animation-duration: .5s;
   -webkit-animation-timing-function: ease-in-out;
   animation-timing-function: ease-in-out;
   -webkit-animation-direction: reverse;
   animation-direction: reverse;
}
li + li{
   -webkit-animation-name: push;
   animation-name: push;
   -webkit-animation-duration: .5s;
   animation-duration: .5s;
   -webkit-animation-timing-function: ease-in-out;
   animation-timing-function: ease-in-out;
   -webkit-animation-direction: reverse;
   animation-direction: reverse;
}
li:hover ul {
   -webkit-animation-name: slide;
   animation-name: slide;
   -webkit-animation-duration: .5s;
   animation-duration: .5s;
   -webkit-animation-timing-function: ease-in-out;
   animation-timing-function: ease-in-out;
   -webkit-animation-direction: normal;
   animation-direction: normal;
   display:inline-block;
   width: 100px;
}
li:hover + li {
   -webkit-animation-name: push;
   animation-name: push;
   -webkit-animation-duration: .5s;
   animation-duration: .5s;
   -webkit-animation-timing-function: ease-in-out;
   animation-timing-function: ease-in-out;
   -webkit-animation-direction: normal;
   animation-direction: normal;
   margin-left: 100px;
}
@-webkit-keyframes slide{
   from {
     width: 0px;  
    }
   to {
     width: 100px;  
    }
}
@-webkit-keyframes push{
   from {
     margin-left:0px;}
   to {
     margin-left:100px;}
   }
}

編集：

よし、先に進んでjQueryでもやった。遅い日、私は推測します：

ここでフィドル

于 2013-03-07T21:04:50.140 に答える