http://www.cssplay.co.uk/menus/concertina.html


このアドレスに使われているCSSを使ったアコーディオン風の表示のやり方を
解説してください。
ソースを見ているのですが、いまいちわかりません

素晴らしい回答の方にはポイントをはずみます

お願いします。

回答の条件
  • 1人5回まで
  • 登録:2009/06/25 04:15:55
  • 終了:2009/07/02 04:20:02

ベストアンサー

id:i4ooon No.1

regnif回答回数56ベストアンサー獲得回数202009/06/25 16:15:18

ポイント60pt

アコーディオン風に見えるだけで、CSSを使ったよく目にするロールオーバー処理です。

通常はブラウザの見えない領域(-9999px)に配置しておき、対応するエリアがマウスオーバーされたときに、見える領域(0px)に移動するといった処理です。

少し解説しますと、

1.まずベースとして1~7までの縦長の短冊上の画像(レイヤ)があります。

  <ul id="concertina"> の中の <li class="top one"> の中の <a class="main" href="#nogo1"></a> だと思います。

2.この1をマウスオーバして表れるのが下記のレイヤです。(164~174行目)

  通常は横位置(left)を「-9999px」に設定しています。(71行目)

<div>

<h4>The Concertina Corporation Inc.</h4>

<ul>

<li><a href="#nogo1a">Who we are</a></li>

<li><a href="#nogo1b">What we do</a></li>

<li><a href="#nogo1c">Where to find us</a></li>

<li><a href="#nogo1d">How to contact us</a></li>

<li><a href="#nogo1e">Why you should use us</a></li>

</ul>

<p>This is the menu most requested by visitors to CSSplay. It has been a little while coming but better late than never.</p>

</div>

3.この1がマウスオーバーされる(86行目の「:hover」が肝です)と横位置を0に設定し、表れます。

あまりわかりやすくない説明ですね・・・すみません。

id:real-spoon

わかるようなわからないような、、、

すいません

2009/06/26 14:14:15

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません