jquery - さまざまなタブの矢印インジケーターCSS

Question

多くのWebサイトが、次のようなものを使用して、現在のページまたはタブを示していることに気付きました。

ご覧のとおり、ページ番号を示す小さな矢印があります。純粋なCSSを使用してこれをどのように実現できますか、またはほとんどのサイトは、background-position属性を使用して位置を設定するdivの背景画像を使用しますか？これはかなり一般的な手法のようですので、前述の方法はかなりありそうにありません。

こことここで他の例を見ることができます。ソリューションが水平方向と垂直方向の両方で回転して機能する場合は便利です。

Answer 1

CSS ボーダーを使用してこれを実現することもできます。次の構造がある場合

<div class="menu">home</div>
<div class="menu current">about</div>
<div class="menu">Contact</div>

次に、次の css を使用して、アクティブなメニューの下に吹き出しまたは矢印を描画できます。

.current:after {
  content: '';
  position: absolute;

  width: 0;
  height: 0;

  border: 15px solid;
  border-top-color: #292929;

  top: 100%;
  left: 50%;
  margin-left: -15px; /* adjust for border width */
}

これは、テクニックを説明する素晴らしいチュートリアルですhttp://net.tutsplus.com/tutorials/html-css-techniques/css-refreshers-borders/

Answer 2

純粋な CSS ソリューションが必要な場合は、:after疑似要素を使用してこのようなことを行うことができます。

span {
position: relative;
padding: 15px;
color: white;
background: black;
}

.current:after {
content: "";
position: absolute;
bottom: -10px;
left: 18px;
border-width: 15px 15px 0;
border-style: solid;
border-color: black transparent;
}

<span class="current">Home</span>
<span>Other</span>
<span>Etc</span>

Answer 3

矢印はほとんどの場合イメージですが、これは通常 CSS クラスで行われます。

CSS での例

.menu {
Font: whatever;
Background:url("image/parallel.PNG");
}
.current {
Background:URL("image/arrow.PNG");
}

そしてHTML

<div class="menu">home</div>
<div class="menu current">about</div>

これにより、両方のメニュー項目にフォントが与えられますが、矢印の背景を取得するのは 1 つだけです。これらすべてをコンテナーに入れて、スタイル内のすべての子要素にスタイルを適用し、現在のページに class="current" を追加するだけで済みます。 .

このページのソースを表示 http://dynamicinteractions.com/home

コード全体に私の電話の自動修正キャップが含まれていることをお許しください。