2012-05-10 10 views
2

ページ番号を示します。これは純粋なCSSを使ってどのように達成できますか、またはほとんどのサイトでdivの背景イメージを使用してbackground-position属性を使用する位置を設定していますか?これはかなり一般的なテクニックだと思われますので、前述のことは考えにくいようです。矢印インジケータCSSまたはその他

herehereの例があります。ソリューションが水平方向と垂直方向の両方で回転するといいですね。

ご協力いただきまして、ありがとうございます。

+1

Hm、 'background-image'です。はい。 – VisioN

+0

2つのcssクラスを 'li'(または' div'や*現在のマーカーである要素)に割り当てることができます。 1つは通常のスタイルで、もう1つは背景画像や好きな装飾を設定します。 – MilkyWayJoe

+1

これは参考になるかもしれません:http:// css-tricks。com/snippets/css/css-triangle/ – undefined

答えて

11

これをCSS3で作成したい場合は、最近必要なCSSが付いたWebサイトが公開されました。

を見ている:あなたは、あなたがが、クロスブラウザのソリューションを探している場合は、純粋なCSSのソリューションをしたい場合、それは以前の回答:)

+0

すばらしいリンク!クールなデモ:) – mtk

1

矢印はほぼ常にイメージですが、これは通常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> 

にこれは、両方のメニュー項目にフォントを与えるだろうが、一つだけはあなたにもコンテナにこれらのすべてを置くことができ 矢印の背景を取得し、スタイル内のすべての子要素にスタイルを適用し、現在のページにclass = "current"を追加するだけで済みます。このページ http://dynamicinteractions.com/home

ため

ソースを表示すべてのコードの上にキャップを修正する自動自分の携帯電話を許しなさい。

+0

答えをいただきありがとうございます。このような例でどのように動作しますか:http://dribbble.com/shots/553791-Web-App-UI?list=tags&tag=ui – jacktheripper

+0

これはJavaScriptを使用したポップアウトメニューです。 CSSを使うことはできますが、JavaScriptを使用する方がずっと簡単です。 –

2

これを達成するために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/

を説明する素晴らしいチュートリアルです
関連する問題