CSS手机菜单设计

我在Wordpress中设计我的页面移动友好菜单。我希望展开式子菜单在他们旁边有+号。我正在尝试使用内容在其旁边添加+，并使用填充浮动中间，但是我的问题是我在菜单上的所有内容旁边都加上了+。CSS手机菜单设计

PHP：

 <div class="store-menu"> 
      <div class="store-wrapper"> 
       <nav id="site-navigation" class="main-navigation" role="navigation"> 
        <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e('', 'eightstore-lite'); ?></button> 
        <?php wp_nav_menu(array('theme_location' => 'primary', 'menu_id' => 'primary-menu')); ?> 
       </nav><!-- #site-navigation --> 
       <div class="clear"></div> 
      </div> 
     </div>

CSS：

@media screen and (max-width: 990px) { 
    .sub-menu {display: none !important;} 

    .menu li a::after{ 
    content:'+' !important; 
    color:'white' !important; 
    float:middle !important; 
    font-size:14px !important; 
    padding-left: 10px !important; 

    } 
}

这就是我想要的

来源

2017-09-16 Moiez Malik

其中是html？ – mlegg

@mlegg因为Wordpress混合了一切，所以很难追踪所有单一代码。但我在我的文章中添加了PHP代码。 –

你能分享你的网站链接吗？ –

嘿所以第一个小撞你要碰上的是，有不是浮动中间属性。您可以使用Flexbox，就这一点，或者只是一个简单的文本对齐：中心

即时猜测你的另一个问题是，你只想要“+”图标，以表明对有孩子的菜单项？

在这种情况下你需要做的是利用Wordpress添加到菜单中的'menu-item-has-children'类。喜欢的东西：

.menu li.menu-item-has-children a::after{ 
    content:'+' !important; 
    color:'white' !important; 
    text-align: center; 
    font-size:14px !important; 
    padding-left: 10px !important; 
    }

别的东西要指出的是，被滥用的重要属性！你会想看看css的特异性CSS Tricks - css specificity

来源

2017-09-16 03:16:36 rhysclay

嘿，谢谢你的回复，菜单项目有儿童班确实有帮助，但我仍然在孩子旁边+。 –

CSS手机菜单设计

回答

相关问题