1

より正確に言えば、jQuery が通常機能するように、UL 要素をスライドアウト (およびスライドイン) する純粋な CSS3 ドロップダウン ナビゲーションを探しています。

不透明度と可視性で動作させようとしましたが、正しく動作していないようです: 歪んでいるか、スライドしないか、マウスが間違った場所にあるときにスライドするなど.

現時点での私のCSSクラスは次のとおりです。

    #nav li ul {
    left:-20000px;
    position:absolute;
    z-index:1;
    top:42px;
    width:140px;
    opacity:0;
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}
#nav li ul:hover {
    opacity:1;
}
#nav li ul li {
    float:none;
    background-color:#fff;
    padding:9px 0 0 10px;

    height:0;
    overflow:hidden;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
#nav li ul li:hover {
    height:40px;
    overflow:visible;
}
#nav li ul li a {
    font-size:12px;
}

#nav li:hover ul {
    left:0;
}

HTML は、Wordpress からのものです。テーマを作成するためのものです。これがコード スニペットです。コードがどこにも表示されないため、これ以上投稿することはできません。これは、Wordpress に熱心な人も答えなければならないと思います。

<div id="nav-wrapper">
<ul id="nav">
<?php wp_nav_menu( array( 'container' => false, 'theme_location' => 'primary-menu' ) ); ?>
</ul>

私はこの行をよく理解していませんが、次のようなものかもしれません：

<ul id=\"%1$s\" class=\"%2$s\">%3$s</ul>

PS HTML 部分の詳細が不足していて申し訳ありません。私が持っている知識と見つけることができる最善を尽くしています。

編集＃2：提案されているように、印刷されたソースをコピーします。ただし、「メニュー項目」クラスや「サブメニュー」クラスはありません」。以前に提供された CSS クラスから外見上の変更 (色、境界線、サイズなど) を行うことができます。

                <ul id="nav">
<li id="menu-item-1565" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1565"><a href="http://localhost/" rel="nofollow" title="" target="_blank">Home</a>
<ul class="sub-menu">
<li id="menu-item-1456" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1456"><a href="http://localhost/category/news/games-news/">Games</a></li>
<li id="menu-item-2324" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2324"><a href="http://localhost/category/news/internet-news/">Internet</a></li>
<li id="menu-item-1876" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1876"><a href="http://localhost/category/news/hardware-news/">Hardware</a></li>
<li id="menu-item-1786" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1786"><a href="http://localhost/category/news/software-news/">Software</a></li>
</ul>
</li>
<li id="menu-item-1432" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1432"><a href="http://localhost/test1/">TEST #1</a></li>
<li id="menu-item-1653" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1653"><a href="http://localhost/test2/">TEST #2</a></li>
            </ul>
4

1 に答える 1