2016-11-14 23 views
0

私はulにワードプレスのナビゲーションリストを表示しようとしていますが、表示されません。表示されているリストアイテムに別の単語を書き込むと、問題を特定できませんでした。Wordpressのナビゲーションリストが表示されない

ここ

は私のコードです: HTML

<div class="menu-toggle"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="three"></div> 
    </div> 
    <nav class="toggle-navg"> 
    <ul role="navigation" class="hidden"> 
     <li> <?php wp_nav_menu(array('theme_location' => 'extra-menu', 'container_class' => 'my_extra_menu_class')); ?></li> 
    </ul> 
    </nav> 
</div> 

とCSS

.menu-toggle { 
    width: 40px; 
    height: 30px; 
    position: absolute; 
    top: 20px; 
    left: 25px; 
    cursor: pointer; 
    z-index:99; 
} 
.menu-toggle.on .one { 
    -moz-transform: rotate(45deg) translate(7px, 7px); 
    -ms-transform: rotate(45deg) translate(7px, 7px); 
    -webkit-transform: rotate(45deg) translate(7px, 7px); 
    transform: rotate(45deg) translate(7px, 7px); 
} 
.menu-toggle.on .two { 
    opacity: 0; 
} 
.menu-toggle.on .three { 
    -moz-transform: rotate(-45deg) translate(8px, -10px); 
    -ms-transform: rotate(-45deg) translate(8px, -10px); 
    -webkit-transform: rotate(-45deg) translate(8px, -10px); 
    transform: rotate(-45deg) translate(8px, -10px); 
} 

.one, 
.two, 
.three { 
    width: 100%; 
    height: 5px; 
    background: white; 
    margin: 6px auto; 
    backface-visibility: hidden; 
    -moz-transition-duration: 0.3s; 
    -o-transition-duration: 0.3s; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
} 

.toggle-navg ul { 
    margin: 0; 
    padding: 0; 
    font-family: Open Sans; 
    list-style: none; 
    margin: 4em auto; 
    text-align: center; 
} 
.toggle-navg ul.hidden { 
    display: none; 
} 
.toggle-navg ul a { 
    -moz-transition-duration: 0.5s; 
    -o-transition-duration: 0.5s; 
    -webkit-transition-duration: 0.5s; 
    transition-duration: 0.5s; 
    text-decoration: none; 
    color: black; 
    font-size: 3em; 
    line-height: 1.5; 
    width: 100%; 
    display: block; 
} 
.toggle-navg ul a:hover { 
    background-color: rgba(0, 0, 0, 0.8); 
} 

.menu-section.on { 
    z-index: 10; 
    width: 100%; 
    height: 100%; 
    display: block; 
    background-color: rgba(0, 0, 0, 0.8); 
    position: absolute; 
    opacity: 0.7; 
} 



.menu-toggle { 
    left: 85%; 
    } 
+1

* HTMLレンダリングも私たちを表示します*。あなたのメニューは* empty *である可能性があります。その場合は何も表示されません。解決策は、メニューが構築されていることと、あなたの 'theme_location'が一致することです。 –

+0

あなたは要素を調べることができます、HTMLは来ましたか – Samyappa

答えて

0

ULクラス:.toggle-navg ul.hidden、あなたのメニューを非表示にし、このクラスを削除しよう:

.toggle-navg ul.hidden { 
    display: none; 
} 
+0

私はこれを試しましたが、まだ動作しません。このクラスはボタンをクリックするまでメニューを非表示にします – Jasmina

0

あなたはサブメニューを追加しようとしていますか?これで私はli要素内のメニューを意味するのですか?

このコード:

<ul role="navigation" class="hidden"> 
    <li> <?php wp_nav_menu(array('theme_location' => 'extra-menu', 'container_class' => 'my_extra_menu_class')); ?></li> 
</ul> 

はあなたのような何か与えるだろう:そうです

<ul role="navigation" class="hidden"> 
    <li> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2 </li> 
    </ul> 
    </li> 
</ul> 

は、子メニューが隠されている可能性がありますか?

メニューの外にwp_nav_menuを実行して、メニューが表示されているかどうかを調べるか、要素/開発ツール/ソースの参照を使用して、wp_nav_menu引数でHTMLが実際に出力されていることを確認します。

また、wp_nav_menu()の "menu"引数もありません。

(自分のメニュー名は「エクストラメニュー」であると仮定すると、そうでない場合 - に合うように調整)の代わりに上記のスタンドアロンとしてあなたのメニューの出力にこれを試してみてください:

wp_nav_menu(array(
     'menu' => 'extra-menu', 
     'theme_location' => 'extra-menu', 
     'menu_class' => 'hidden' 
    ); 
関連する問題