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手機菜單設計

回答

相關問題