ポップアップメニュー
-
0 名前： ねね ： 2006/02/19 08:44
- レンタルサーバー〈ロリポップ〉のトップページ
ヘッダーの下にある、ポップアップメニューがとてもシンプルで
気に入ってるのですが、あれはどのように作っているのでしょうか？
fireworksで作っているのでしょうか？
http://lolipop.jp/
基本的な構造（？）と、大まかな作成手順を
教えていただけませんでしょうか。
どうぞよろしくお願いします。
-
1 名前： カヅサツ ： 2006/02/19 08:44
- ・基本的な構造
この手の動的なテクニックは、十中八九 JavaScript を使います。
ところが、JavaScript は環境によってオフにしていたり、そもそも使えなかったりしますので、まず JavaScript のことを忘れて構造を作ります。
良い HTML文書のコツは、まずテキストを書き、次にテキスト構造に従ってマークアップします。
--
ホーム
トップページ
サイトマップ
お知らせ
ユーザー要望対応
--
上記のテキストは「各箇条書きの下に別の箇条書きがそれぞれぶら下がっている」と見なすのが自然です。
また、画像にしたければテキストの代わりに img要素を置き、元テキストを alt属性値にします。
--
<ul>
<li><img src="" alt="ホーム">
<ul>
<li>トップページ</li>
<li>サイトマップ</li>
</ul>
</li>
<li><img src="" お知らせ">
<ul>
<li>ユーザー要望対応</li>
</ul>
</li>
</ul>
--
・見栄え
CSS で見栄えを整えます。
・ul要素の余白を無す
・li要素のマーカを消す
・「外側のli要素」を横に並べる
・JavaScript
最後に動作を与えます。
・「ページが読み込まれたら」あるいは「『外側のli要素』からポイントが外れたら」すべての『内側のli要素』を非表示にする
・「『外側のli要素』がポイントされたら」、「その内側のli要素のみ」を表示する
という塩梅でしょうか。
-
2 名前： カヅサツ ： 2006/02/19 08:44
- <li><img src="" お知らせ">
↓
<li><img src="" alt="お知らせ">
-
3 名前： ねね ： 2006/02/19 08:44
- カヅサツさん、ご丁寧に教えていただきありがとうございました。
もう一つ教えていただきたいのですが、カヅサツさんが
書かれていたＨＴＭＬと、スタイルの指定についてです。
<ul>
<li><img src="" alt="ホーム">
<ul>
<li>トップページ</li>
<li>サイトマップ</li>
</ul>
</li>
今まで、私は<ul>は、間に更に<ul>を入れることはできないと
理解しておりました。
以前にも、上記ＨＴＭＬのように、<ul>と</ul>の間に
更に<ul>が入った、コードを見たことがありましたが
その時は、そのコードは間違って入力されたコードだと
思いました。
<ul>と</ul>の間に、更に<ul>を入れる点、
また<li>と</li>の間に、さらに<li></li>を入れる点、
この2つの点に関して、よくわかりません。
タグを書く上でのルールや、どのようにスタイルを指定するのか、
とても興味があります。
できれば、教えていただきたいのですが、どこか
情報を参照できるサイトを教えていただくだけでも結構ですので、
教えて下さい。
お願いします。
-
4 名前： カヅサツ ： 2006/02/19 08:44
- > 今まで、私は<ul>は、間に更に<ul>を入れることはできないと理解しておりました。
ul要素直下に ul要素は置けませんが、li要素直下に ul要素を置くことは可能です。
<ul><ul></ul></ul> ←文法違反
<ul><li><ul></ul></li></ul> ←文法上問題なし
> どのようにスタイルを指定するのか
ul{
margin: 0px;
padding: 0px;
}
li{
list-style-type:none;
width: 80px;
float: left;
border: 1px solid;
}
li li{
float: none;
}
-
5 名前： S ： 2006/02/19 08:44
- >>タグを書く上でのルールや、どのようにスタイルを指定するのか、
下記が参考になるとおもう。
http://www.scollabo.com/banban/
http://www.nextindex.net/
http://bakera.jp/html/hatomaru.html
http://homepage.mac.com/toda/html/
