Wordpressドロップダウン - 矢印を追加

-2

（CSS？） -arrowをWordpressによって生成されたドロップダウンサブメニューにこのように追加したいと思います。Wordpressドロップダウン - 矢印を追加

これを実行する方法はありますか？

さらに詳しい情報が必要な場合は、お願いします。

よろしくお願いします。

出典

2016-04-06 Johannes

これを実行するために何を試みましたか？特定の問題は何ですか？これはあなたにコードを書かせるだけの場所ではありません。これはあなたが書いているコードの助けを得る場所です。 – CaldwellYSR

私の問題は、ここから始める方法がわからないことです。私のwp_nav_menu（）関数は私のためにすべてを行い、画像に表示されているようなものを実現するために何を変えるべきか分かりません。 – Johannes

'wp_nav_menu'関数はすべてを行うわけではありません。それがあなたに与えるのは、構造と内容だけです。レイアウト、色、サイズ、位置などを変更するには、CSSを使用する必要があります。私は、良い出発点としてドロップダウンメニューのスタイルを設定する方法についてグーグルに提案します。 – CaldwellYSR

CSS3では形状を作ることができます。すべてのブラウザですべてのシェイプが正しくレンダリングされるわけではありませんが、現時点ではCSS3をサポートするWebブラウザのみが動作します。

ここにマークアップがあります。

<ul class="sub-menu"> 
    ... 
</ul>

ここはスタイルです。

.sub-menu { 
    position: relative; 
} 
.sub-menu:after { 
    content: ''; 
    width: 0; 
    height: 0; 
    border-bottom: 120px solid blue; 
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent; 
    position: absolute; 
    top: 0; 
    left: 25px; 
    transform: translate(0, -100%); 
}

あなたにもこれが役に立つかもしれません - http://www.cssportal.com/css3-shapes/

出典

2016-04-06 18:45:36 jarmerson

私はあなたの答えをより多くのWP特有に編集し、擬似要素を使用しました。 – CaldwellYSR

@CaldwellYSRありがとうございます。 – jarmerson

-1

を私はワードプレスについてあまりよく分からないが、CSSであなたはこのような何かを設定することができます。

.buttonArrow:hover 
    { 
    background: url(blue-arrow.png); 
    }

アイデアがその上で（またはドロップダウンをクリックすると）、矢印画像がポップアップします。 WordPressで簡単にやる方法があるかどうかはわかりません。矢印の色とドロップダウンの色（この場合は青色）を一致させる必要があります。

/u/jarmersonの回答も良いです。また、より多くの形のためにW3SchoolsのSVGを見てみることもできます。

出典

2016-04-06 18:56:08 Wolfrum

そして、誰かがドロップダウンの色を変え、何が起こるのですか？ CSSの三角形を持つ擬似要素がはるかに優れています。 – CaldwellYSR

ええ、私は、良い（もっと良い）解決策として擬似要素の/ u/jarmersonの答えを含めました。 – Wolfrum

Wordpressドロップダウン - 矢印を追加

答えて

関連する問題