web-dev-qa-db-ja.com

ulにul子がある場合に矢印を追加するCSSの方法はありますか？

私のナビゲーション構造は次のようになります。

<div class="menu">
    <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page with Subpages</a>
            <ul class="children">
                <li><a href="#">Page with another subpage</a>
                    <ul class="children">
                        <li><a href="#">subsubpage</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
    </ul>
</div>

私は全て欲しい <li>にはサブナビゲーションの子があり、少し下向きの矢印が適用されているため、ユーザーはこのページにサブページがあることがわかります。

純粋なCSSで<li>の子はul.children？上記の私の例では、「サブページのあるページ」に下矢印を適用し、「別のサブページのあるページ」も適用する必要があります。

現在、私はこの問題を解決するためにjqueryを使用しています：

$(function() {
    $('.menu a').each(function() {
        if ( $(this).parent('li').children('ul').size() > 0 ) {
            $(this).append('<span class="dwn">▼</span>');
        }           
    });
});

簡単な純粋なCSSの方法はありますか？

ありがとうございました。

cssdrop-down-menu
27
matt

これはCSSで完全に実行可能です-

あなたの構造はこれです：

 <ul class="menu">
      <li>
           <a href="#">Has arrow</a>
           <ul><li><a href="#"></a></li></ul>
      </li>
      <li>
           <a href="#">Has no arrow</a>
      </li>
  </ul>

CSSは次のようになります-

   //this adds an arrow to every link
  .menu li > a:after { content: '>'; } 

  // this removes the arrow when the link is the only child
  .menu li > a:only-child:after { content: ''; }

さらに一歩進んで、トップレベルのアイテムの上に下矢印があり、サブメニューに右矢印があるドロップダウンメニューが必要な場合、CSSは次のようになります

   // set up the right arrows first
   .menu li > a:after { content: '>'; }

   //set up the downward arrow for top level items
   .menu > li > a:after {content: 'v'; }

   //clear the content if a is only child
   .menu li > a:only-child:after {content: ''; }

動作中のjsfiddleを次に示します- http://jsfiddle.net/w9xnv/2/

89
David

あなたはできましたこれを行います：

ul.children:before {
    content:  "▼";
}

例

これはすべてのブラウザでサポートされていません、 サポートのリストはこちら

[〜＃〜] edit [〜＃〜]

上記の私の例に欠陥があり、矢印が間違った位置にあることに気づきました。それでも-これが大通りである場合、矢印を正しく整列させる可能性を追求したいと思います。

7
Stuart Burrows

最善の方法は、サーバー上のlisにクラス（または使用しているスパン）を追加することだと思います。

別の解決策は、おそらく簡単ではなく、きれいでもないので、すべてのulsに矢印を追加し、ul.childrenで（cssを使用して）のみ表示することです。その後、親liの前または後ろに矢印を配置してみてください。これが機能するかどうかは、設計次第です。

1
GolezTrol

シンプルにするために、使用したいソリューションを以下に示します。

  1. ドロップダウンメニューとして機能するアイテムの名前の周りにタグを配置します。

    <div class="menu">
    <ul>
        <li><a href="#"><span>Page with Subpages</span></a>
            <ul class="children">
                <li><a href="#"><span>Page with another subpage</span></a>
                    <ul class="children">
                        <li><a href="#">subsubpage</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

  2. CSSを使用して矢印を追加します。

    #menu span:after /* DropDown Arrow */
{
   border: 0.313em solid transparent; /* 5 pixels wide */
   border-bottom: none;  /* helps the drop-down arrow stay in the vertical centre of the parent */
   border-top-color: #cfcfcf;   /* colour of the drop-down arrow */
   content: ''; /* content of the arrow, you want to keep this empty */
   vertical-align: middle;
   display: inline-block;
   position: relative;
   right: -0.313em; /* 5 pixels right of the menu text*/
}

これがあなたのために働くことを望みます！私が遭遇した最も簡単な方法であると信じています！

1
Arcanewinds

将来の読者のために！私も不思議に思っていたので、自分で考え出した

要素に子があるかどうかは確認できませんが、空かどうかは確認できます

li:not(:emtpy):after {
    content: "V";
    color: black;
    position: relative;
    left: 120%;
    /* Well those styles are not best but you get the idea */
}
1
user3870546

古い質問ですが、これは私がそれを行う方法です：

.menu li > a:not(:only-child):after { content: '▼'; }

次のように見栄えを良くすることもできます。

.menu li > a:not(:only-child):after { 
    content: '\00a0\00a0▼'; /* add a little spacing so it's not right next to the text */
    font-size: 0.8rem; /* adjust font size so it looks better */
    vertical-align: middle; /* vertical align to middle */
}
1
rotaercz

CSS「親セレクター」はありません。

しかし、ここに短いjqueryコードがあります：

$('.children').prev('li').append('<span class="dwn">▼</span>');

あなたの質問はこれに似ています：

アクティブな子の親の複雑なCSSセレクター

0
ipim.com

垂直メニューの場合：このjs、すべてで動作= nav.vertical li

$("nav.vertical li:has(ul)").find("a:first").append('<img src="" alt="" class="">');

<nav>
   <ul>
     <li><a href="">Page</a>
         <ul class="children">
           <li><a href="">Post</a></li>
         </ul>
     </li>
   </ul>
</nav>
0
Farzin Seyfollahi

これは、 rotaercz sの答えの単なる改良です。 CSS Tricks の助けを借りて

#cssmenu li > a:not(:only-child)::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    float: right;
}
0
TecBrat

例えば

$(function() {
$('.menu a').each(function() {
    if ( $(this).parent('li').children('ul').size() > 0 ) {
        $(this).append('<span></span>');
    }           
  });
});

cSS

.menu li a span {
display: -moz-inline-stack;
display: inline-block;  
zoom: 1;
*display: inline;
vertical-align: middle;
background: url(arrow.png) 0 0 no-repeat;
width: 5px;
height: 3px;
margin-left: 5px;
0
Cristopher

Wordpress以下を使用してください

<?php
/**
* Add arrows to menu items
* @author Bill Erickson
* @link http://www.billerickson.net/code/add-arrows-to-menu-items/
* 
* @param string $item_output, HTML output for the menu item
* @param object $item, menu item object
* @param int $depth, depth in menu structure
* @param object $args, arguments passed to wp_nav_menu()
* @return string $item_output
*/
function be_arrows_in_menus( $item_output, $item, $depth, $args ) {
if( in_array( 'menu-item-has-children', $item->classes ) ) {
    $arrow = 0 == $depth ? '<i class="icon-angle-down"></i>' : '<i class="icon-angle-right"></i>';
    $item_output = str_replace( '</a>', $arrow . '</a>', $item_output );
}
return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'be_arrows_in_menus', 10, 4 );

おかげで https://www.billerickson.net/code/add-arrows-to-menu-items/

0
Zaid_Sameer