グローバルナビゲーション用の下向き矢印をCSSのみで実現

2015/06/11

ナビメニューの横にちょこんとある下向き矢印。

これをCSSのみで実現したのでメモ。（IE7まで対応）

<ul id="g-nav">
    <li><a class="toggleBtn" href="#">会社情報<span class="triangle"></span></a>
        <ul>
          <li><a href="#">●●</a></li>
          <li><a href="#">●●</a></li>
          <li><a href="#">●●</a></li>
        </ul>
     </li>        
     <li><a href="#">●●</a></li>
     <li><a href="#">●●</a></li>
     <li><a href="#">●●</a></li>
</ul>

いろいろ余計な部分を省いているのでわかりにくいかもしれませんが…

<span class="triangle"></span>

この部分が下向きの三角形になります。

/* ------------------
下向き矢印 
-------------------- */
.toggleBtn{
	position:relative;
}
.triangle{
	position:absolute;
	top: 23px;
	margin-left: .3em;
	width: 0;
	height: 0;
	border: 4px solid transparent;
	border-top: 4px solid #eee;
}

こちらを参考にさせていただきました。

CSSのみで三角形を作る方法を解説するよ！｜ついでに扇型や吹き出しも作ってみる

- CSS, html, WEB