1. ホーム
  2. 質問と答え
  3. デュアルノーマルメガメニュー

デュアルノーマルメガメニュー

2017-09-16 3 views
1

メガメニューとノーマルメニューのnavbarを作成しようとしていますが、問題は私のメガメニューにあります。liとすべてのul要素を一緒に表示したいのですが、 要素は、liがホバーする場合にのみ表示されます。デュアルノーマルメガメニュー

そして、私は二番目に干渉する最初の1のCSSを回避するために管理することはできません。

html,body,nav, ul, li, a, span{ 
 
    margin:0; padding:0; 
 
} 
 
body{ 
 
    font-family:helvetica; 
 
    font-size:16px; 
 
} 
 
nav ul { 
 
    background-color:#444; 
 
    display:flex; 
 
    flex-direction:column; 
 
} 
 
nav ul li{ 
 
    list-style-type: none; 
 
} 
 
nav ul li a{ 
 
    padding:.8rem 1rem; 
 
    display:block; 
 
    text-decoration: none; 
 
    color:#f9f9f9; 
 
} 
 
nav ul li:hover{ 
 
    background:rgba(0,0,0, .25); 
 
} 
 

 

 
nav ul li:hover div.sf-mega { 
 
    top: 100%; 
 
} 
 

 

 
nav div.sf-mega ul { 
 
    width: 25%; 
 
    margin-bottom: 40px; 
 
    color: #000; 
 
    box-shadow: none; 
 
} 
 

 
nav div.sf-mega h4 { 
 
    margin-bottom: 15px; 
 
    text-transform: uppercase; 
 
} 
 

 
nav div.sf-mega ul li { 
 
    display: block; 
 
} 
 

 
nav div.sf-mega ul li a { 
 
    margin-top: 10px; 
 
    transition: 0.5s; 
 
    color: #000; 
 
} 
 

 
nav div.sf-mega ul li a:hover { 
 
    color: #4096ee; 
 
} 
 

 
@media only screen and (max-width:480px){ 
 
    .has_children ul li a{ 
 
    padding-left:2rem; 
 
    } 
 
    
 
    .has_children ul .has_children ul a{ 
 
    padding-left:3rem; 
 
    } 
 
    .arrow-down::after{ 
 
    content:"\f107"; 
 
    } 
 
} 
 

 
@media only screen and (min-width:480px){ 
 
    nav ul{ 
 
    flex-direction:row; 
 

 
    } 
 
    nav ul li{ 
 
    position:relative; 
 
    flex:1 0 auto; 
 
    text-align:left; 
 
    } 
 
    .has_children ul, .has_children ul .has_children ul{ 
 
    display:none; 
 
    width:100%; 
 
    position:absolute; 
 
    } 
 
    .has_children ul .has_children ul{ 
 
    left:100%; 
 
    top:0; 
 
    } 
 
    nav ul li:hover ul, .has_children ul .has_children:hover ul{ 
 
    display:flex; 
 
    flex-direction:column; 
 
    } 
 
    
 
}
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Menu supérieur"> 
 
<ul id="top-menu" class="menu"><li a="" id="nav-menu-item-2105" class="main-menu-item menu-first menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children mega2"><a href="http://localhost/wordpress/commande/" class="menu-link main-menu-link"><span>Commande</span></a><div class="sf-mega"><div class="sf-mega-inner clearfix"> 
 
<ul class="navi first menu-depth-1"> 
 
\t <li a="" id="nav-menu-item-2106" class=" menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/panier/" class="menu-link sub-menu-link"><span>Panier</span></a> 
 
\t <ul class="navi navi menu-depth-2"> 
 
\t \t <li a="" id="nav-menu-item-2107" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/boutique/" class="menu-link sub-menu-link"><span>Boutique</span></a></li> 
 
\t \t <li a="" id="nav-menu-item-2108" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/blog/" class="menu-link sub-menu-link"><span>Blog</span></a></li> 
 
\t \t <li a="" id="nav-menu-item-2109" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/about/page-markup-and-formatting/" class="menu-link sub-menu-link"><span>Page Markup And Formatting</span></a></li> 
 
\t </ul> 
 
</li> 
 
\t <li a="" id="nav-menu-item-2113" class=" menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/panier/" class="menu-link sub-menu-link"><span>Panier</span></a> 
 
\t <ul class="navi navi menu-depth-2"> 
 
\t \t <li a="" id="nav-menu-item-2112" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/level-1/level-2/level-3a/" class="menu-link sub-menu-link"><span>Level 3a</span></a></li> 
 
\t \t <li a="" id="nav-menu-item-2111" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/level-1/level-2/level-3b/" class="menu-link sub-menu-link"><span>Level 3b</span></a></li> 
 
\t \t <li a="" id="nav-menu-item-2110" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/about/page-image-alignment/" class="menu-link sub-menu-link"><span>Page Image Alignment</span></a></li> 
 
\t </ul> 
 
</li> 
 
</ul> 
 
</div></div></li> 
 
<li a="" id="nav-menu-item-2114" class="main-menu-item menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/boutique/" class="menu-link main-menu-link"><span>Boutique</span></a> 
 
<ul class="navi first menu-depth-1"> 
 
\t <li a="" id="nav-menu-item-2115" class=" menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/page-d-exemple/" class="menu-link sub-menu-link"><span>Page d’exemple</span></a> 
 
\t <ul class="navi navi menu-depth-2"> 
 
\t \t <li a="" id="nav-menu-item-2116" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/page-b/" class="menu-link sub-menu-link"><span>Page B</span></a></li> 
 
\t </ul> 
 
</li> 
 
</ul> 
 
</li> 
 
</ul> 
 
</nav>

を明確にするために、私はcommande用メガメニューを持ってしようとBoutiqueの通常のメニューです。

enter image description here

出典

2017-09-16 michel lompret

+0

それはあなたがやろうとしているかを理解することは本当に難しいです正直に言うと。あなたの質問を少し書き直せますか？ –

+1

@ Dejan.S最後にまとめてみる。 –

+0

あなたのメニューにはどのような問題がありますか？私にとっては期待どおりに働いているようです。あなたは 'commande'にあなたがたどり着き、それが下がると、次のレベルに広がるpanierの上にホバーします。ですから問題は何ですか？ –

答えて

1

たぶん、あなたはスタイルが分離メガメニューと通常のメニューを保つためにスタイルを書き換えたいかもしれないが、私は示すために以下にmin-width:480pxメディアクエリをいくつかのデバッグを行って、コメントを追加していますホバー上のデスクトップビューでメガメニュー：

.has_children:hover .sf-mega ul { 
    display: flex; 
    width: 100%; 
    flex-direction: row; 
    } 
    .has_children:hover .sf-mega ul .has_children ul { 
    display: flex; 
    flex-direction: column; 
    top: initial; 
    left: 0; 
    }

はデモは、以下を参照してください：

html, 
 
body, 
 
nav, 
 
ul, 
 
li, 
 
a, 
 
span { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    font-family: helvetica; 
 
    font-size: 16px; 
 
} 
 

 
nav ul { 
 
    background-color: #444; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
nav ul li { 
 
    list-style-type: none; 
 
} 
 

 
nav ul li a { 
 
    padding: .8rem 1rem; 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #f9f9f9; 
 
} 
 

 
nav ul li:hover { 
 
    background: rgba(0, 0, 0, .25); 
 
} 
 

 
nav ul li:hover div.sf-mega { 
 
    top: 100%; 
 
} 
 

 
nav div.sf-mega ul { 
 
    width: 25%; 
 
    margin-bottom: 40px; 
 
    color: #000; 
 
    box-shadow: none; 
 
} 
 

 
nav div.sf-mega h4 { 
 
    margin-bottom: 15px; 
 
    text-transform: uppercase; 
 
} 
 

 
nav div.sf-mega ul li { 
 
    display: block; 
 
} 
 

 
nav div.sf-mega ul li a { 
 
    margin-top: 10px; 
 
    transition: 0.5s; 
 
    color: #000; 
 
} 
 

 
nav div.sf-mega ul li a:hover { 
 
    color: #4096ee; 
 
} 
 

 
@media only screen and (max-width:480px) { 
 
    .has_children ul li a { 
 
    padding-left: 2rem; 
 
    } 
 
    .has_children ul .has_children ul a { 
 
    padding-left: 3rem; 
 
    } 
 
    .arrow-down::after { 
 
    content: "\f107"; 
 
    } 
 
} 
 

 
@media only screen and (min-width:480px) { 
 
    nav ul { 
 
    flex-direction: row; 
 
    } 
 
    nav ul li { 
 
    position: relative; 
 
    flex: 1 0 auto; 
 
    text-align: left; 
 
    } 
 
    .has_children ul, 
 
    .has_children ul .has_children ul { 
 
    display: none; 
 
    width: 100%; 
 
    position: absolute; 
 
    } 
 
    .has_children ul .has_children ul { 
 
    left: 100%; 
 
    top: 0; 
 
    } 
 
    nav ul li:hover ul, 
 
    .has_children ul .has_children:hover ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 
    
 
    /* ADDED */ 
 
    .has_children:hover .sf-mega ul { 
 
    display: flex; 
 
    width: 100%; 
 
    flex-direction: row; 
 
    } 
 
    .has_children:hover .sf-mega ul .has_children ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    top: initial; 
 
    left: 0; 
 
    } 
 
    .sf-mega ul li a { 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
} 
 
}
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Menu supérieur"> 
 
    <ul id="top-menu" class="menu"> 
 
    <li a="" id="nav-menu-item-2105" class="main-menu-item menu-first menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children mega2"><a href="http://localhost/wordpress/commande/" class="menu-link main-menu-link"><span>Commande</span></a> 
 
     <div class="sf-mega"> 
 
     <div class="sf-mega-inner clearfix"> 
 
      <ul class="navi first menu-depth-1"> 
 
      <li a="" id="nav-menu-item-2106" class=" menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/panier/" class="menu-link sub-menu-link"><span>Panier</span></a> 
 
       <ul class="navi navi menu-depth-2"> 
 
       <li a="" id="nav-menu-item-2107" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/boutique/" class="menu-link sub-menu-link"><span>Boutique</span></a></li> 
 
       <li a="" id="nav-menu-item-2108" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/blog/" class="menu-link sub-menu-link"><span>Blog</span></a></li> 
 
       <li a="" id="nav-menu-item-2109" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/about/page-markup-and-formatting/" class="menu-link sub-menu-link"><span>Page Markup And Formatting</span></a></li> 
 
       </ul> 
 
      </li> 
 
      <li a="" id="nav-menu-item-2113" class=" menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/panier/" class="menu-link sub-menu-link"><span>Panier</span></a> 
 
       <ul class="navi navi menu-depth-2"> 
 
       <li a="" id="nav-menu-item-2112" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/level-1/level-2/level-3a/" class="menu-link sub-menu-link"><span>Level 3a</span></a></li> 
 
       <li a="" id="nav-menu-item-2111" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/level-1/level-2/level-3b/" class="menu-link sub-menu-link"><span>Level 3b</span></a></li> 
 
       <li a="" id="nav-menu-item-2110" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/about/page-image-alignment/" class="menu-link sub-menu-link"><span>Page Image Alignment</span></a></li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    <li a="" id="nav-menu-item-2114" class="main-menu-item menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/boutique/" class="menu-link main-menu-link"><span>Boutique</span></a> 
 
     <ul class="navi first menu-depth-1"> 
 
     <li a="" id="nav-menu-item-2115" class=" menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/page-d-exemple/" class="menu-link sub-menu-link"><span>Page d’exemple</span></a> 
 
      <ul class="navi navi menu-depth-2"> 
 
      <li a="" id="nav-menu-item-2116" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/page-b/" class="menu-link sub-menu-link"><span>Page B</span></a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

出典

2017-09-16 12:08:21 kukkuz

+0

ありがとう、それはまさに私が探していたものです。私は最後の質問kukkuzは、列の同じ高さを持つ方法があることがあります。 commandeの2つのコラムは、ここでは異なる高さを持っています：https://codepen.io/anon/pen/MEaaJr –

+0

私が話している高さを示すために質問に画像を追加しました –

+0

@michellompret yupはそれを得ました、現在のデザインのすべてのケースで同じ高さを保証するのは難しいようです...おそらく '.sf-mega ul li a { white-space：nowrap; テキストオーバーフロー：省略記号。 オーバーフロー：非表示。 } '編集された答えを参照してください... – kukkuz

 関連する問題

  • 関連する問題はありません^_^