読者です 読者をやめる 読者になる 読者になる

マウスオーバー時にナビに三角マークを表示させる

ナビゲーションボタンのマウスオーバーの状態として、ボタンの下に三角マークが表示されるものがあります。

CSSを使った方法を記述しておきます。

 

マウスオーバーしていない時のナビボタンの表示

f:id:develog:20161030183542p:plain

 

マウスオーバーしている時のナビボタンの表示(三角マークが下にでています)

 

f:id:develog:20161030183550p:plain

 

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>ナビボタンホバー時に三角マークを表示</title>
<link rel="stylesheet" href="css/style.css" media="screen, projection, print" />
</head>
<body>

<header>
  <nav id="gnav">
    <ul>
      <li id="products"><a href="#">ナビボタン</a></li>
    </ul>
  </nav>
</header>

</body>
</html>

 

CSS

@charset "utf-8";
/* Reset CSS
--------------------------------------*/
body, ul, li, nav, header {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
}

/* ナビゲーション
--------------------------------------*/
#gnav a {
display: block;
position: relative;
z-index: 1;
height: 30px;
padding-top: 20px;
text-align: center;
color: green;
background-color: greenyellow;
}
/* 疑似要素にborderを使った三角マークを記述 */
#gnav a:after {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: -10px;/*三角をボタンの下のラインに合わせます*/
left: 50%;/*三角を横方向中央にします*/
margin-left: -10px;/*border-leftの10px分左にずらして完全な中央にします*/
border-left: solid 10px transparent;/*border-rightと同じ幅にします*/
border-right: solid 10px transparent;/*border-leftと同じ幅にします*/
}
/* マウスオーバー時にborderを使った三角マークを表示 */
#products a:hover:after {
border-top: solid 10px green;
}

以上