掲示板/総合質問板/過去ログ/一覧/ ポップアップメニュー

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/