Wordpress многоуровневое выпадающее меню

Question

Я создал пользовательскую тему для своего сайта. Здесь я хочу создать раскрывающееся меню многоуровневого уровня, и я сделал это с помощью панели инструментов, но появляется только раскрывающееся меню.

Answer 1

Это, как вы пишете ваше меню должно быть написано в коде:

<div id="top-menu"> 
    <ul> 
     <?php wp_nav_menu(array('theme_location'=>'top-menu','container'=>'', 'items_wrap' => '%3$s')); ?> 
    </ul> 
</div> 

выше код будет переведен на что-то похожее на это:

<div id="top-menu"> 
      <ul> 
       <li><a href="#somelink">Some Text</a></li> 
       <li><a href="#somelink">Some Text</a></li> 
       <li> 
        <a href="#somelink">Some Text</a> 
        <ul> 
         <li><a href="#secondLevel">Second Level Text</a></li> 
         <li><a href="#secondLevel">Second Level Text</a></li> 
         <li> 
          <a href="#secondLevel">Second Level Text</a> 
          <ul> 
           <li><a href="#thirdLevel">Third Level Text</a></li> 
           <li><a href="#thirdLevel">Third Level Text</a></li> 
           <li><a href="#thirdLevel">Third Level Text</a></li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 

вам нужно добавить f ollowing код, если не добавлены уже в вашем functions.php:

add_theme_support('menus'); 
if (function_exists('register_nav_menus')) { 
    register_nav_menus(
     array(
      'top-menu' => 'Top Menu' 
      ) 
     ); 
} 

тогда файл CSS должен содержать следующее:

#top-menu { 
    background:#F4F4F4; 
    height:50px; 
    width:100%; 
} 
#top-menu ul { 
} 
#top-menu ul li { 
    display:inline-block; 
    float:left; 
    position:relative; 
} 
#top-menu ul li a { 
    color:#929292; 
    display:inline-block; 
    height:50px; 
    text-align:center; 
    text-decoration:none; 
    font-weight:bold; 
    width:130px; 
    line-height:50px; 
    border-right:#E4E4E4 1px solid; 

} 
#top-menu ul li ul li a { 
    width:200px; 
} 
#top-menu ul li.current-menu-item > a, #top-menu ul li:hover > a { 
    color:#000; 
} 
/*===>multi level menu */ 
#top-menu li ul { 
    display:none; 
    position:absolute; 
    left:0; 
    border:1px solid #ccc; 
    z-index:300; 
    width:200px; 
    background:#f0f0f0; 
} 
#top-menu li:hover > ul { 
    display:block; 
} 
#top-menu li ul ul { 
    left:140px; 
    top:10px; 
} 
#top-menu li li a { 
    border:0; 
    border-bottom:1px solid #ccc; 
    width:150px; 
} 

, конечно, нужно, чтобы сделать свои собственные изменения.