与wp_nav_menu和基础的下拉菜单将不会显示

时间:2014-12-30 15:38:05

标签: php drop-down-menu zurb-foundation

我正在尝试使用顶栏(基础)和 wp_nav_menu 制作菜单。我之前已经完成了它并且它工作正常,但这次我需要它是一个下拉菜单

问题是它显示菜单下面的子菜单/下拉菜单元素,好像它是一个完全不同的菜单。我该如何解决这个问题?

我的代码

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="toggle-topbar menu-icon"><a href="#" ><span></span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="left">
    <?php
      wp_nav_menu( array('menu' => "Top Menu" ) ); 
    ?>
    </ul>

    <ul class="right" id="social-media">
      <li><?php dynamic_sidebar( 'search-1' ); ?></li>
      <li><a href="#"><img src=""></a> Social Media 1 </li>
      <li><a href="#"><img src=""></a> Social Media 2 </li>
      <li><a href="#"><img src=""></a> Social Media 3 </li>
    </ul>
  </section>        
</nav>

当我有一个小/移动屏幕时,它也不会显示菜单图标。在此决议中,它根本不会改变为下拉模式。

编辑:

我弄清楚如何仅显示我的下拉菜单。我只需使用 walker 并设置我的菜单:

Parent 1
  Child 1-1
  Child 1-2
  Child 1-3
Parent 2
  Child 2-1
  Child 2-2
  Child 2-3

但我的菜单项仍有问题。我的菜单图标不会隐藏在媒介中,我的父母不会躲在小的地方。

新wp_nav_menu:

wp_nav_menu( array(
  'theme_location' => 'main',
  'menu' => 'Top Menu',
  'container' => false,
  'depth' => 0,
  'items_wrap' => '<ul class="left">%3$s</ul>',
  'walker' => new reverie_walker( array(
    'in_top_bar' => true,
    'item_type' => 'li',
    'menu_type' => 'main-menu'
  ) )
) ); 

CSS:

#navigation-menu {
    background-color: $primary-color;
    h2 {
        display: none;
    }
    nav {
        li{ 
            display: inline-block;
        }
    }   
    .top-bar-section {
        .left{
            li {
                float: none;
            }
        }
        .divider {
            width: 0%;
        }
        .dropdown:hover {
            background-color: $white !important;
            color: $primary-color !important;
        }
        .dropdown {
            .parent-link {
                display: none;
            }
            :active {
                background-color: $white !important;
                color: $primary-color !important;
            }
        }
        #social-media-top {
            margin-right: rem-calc(10);
            margin-left: rem-calc(-30);
            padding-left: rem-calc(0);      
            li {
                margin-right: rem-calc(-15);
            }
            #searchform {
                margin-top: rem-calc(-5);
                margin-bottom: rem-calc(5);
                #searchvalue {
                    display: inline;
                    margin-left: rem-calc(-40);
                    opacity: 0.6;
                }
                #searchsubmit {
                    margin-bottom: rem-calc(-15);
                    width: rem-calc(25);
                    height: rem-calc(40);
                }               
            }
            .social-top {
                width: rem-calc(60);
                height: rem-calc(45);
                img {
                    opacity: 0.6;
                }
                :hover {
                    opacity: 1; 
                    background-color: $primary-color !important;                
                }               
            }
        }       
    }       
}

0 个答案:

没有答案