人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

お願いします。

●質問者: real-spoon
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS いまいち アコーディオン アドレス ソース
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● regnif
●60ポイント ベストアンサー

アコーディオン風に見えるだけで、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に設定し、表れます。

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

◎質問者からの返答

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

すいません

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ