2

コード: http://jsfiddle.net/TwCLr/

私が達成しようとしていることを知りたい場合は、この投稿の下部にあるリンクにスキップしてください。

水平サブメニュー デザインで、配置の問題と z-index の問題が発生しています。

このプロセス全体はjqueryで処理できると思います（必要になるかもしれません）。誰かがここで動作するスクリプトを持っている場合は、それについての提案を聞いてうれしいです.

また、メニューの html は wordpress で生成されていることにも言及しておく必要があります。その部分を変更したい場合は、メニューを呼び出す関数を書き直す必要があります。

関数.php

function conceptx_setup() {
register_nav_menu( 'primary', __( 'Primary Menu', 'conceptx' ) );}
add_theme_support( 'menus' );

ナビゲーション html

<?php wp_nav_menu(); ?>

ここで、html 部分を変更する必要のない解決策があれば理想的です。投稿の上部にある jsfiddle リンクに、ワードプレスで生成された構造を書き出しました。

そして、それがどのように機能することになっているかの簡単で汚いgif: http://i.imgur.com/ptYeZDg.gif

誰かが助けてくれれば、本当に感謝しています。

4

1 に答える 1

0

これを探していますか:フィドル

CSSの追加・変更

.menu .menu-item:hover .sub-menu {
    top: 82px;
}

.menu .menu-item .sub-menu {
    position: absolute;
    left: 0;
    top: 16px;
    z-index: -1;
    width: 100%;
    transition: all .5s;
}

.menu .menu-item .sub-menu .menu-item a {
    opacity: 1 /* just remove opacity: 0*/
}

編集：メニューを中央に配置

ここでフィドル

フルスクリーンはこちら

于 2013-05-31T21:27:58.960 に答える