ホームページのプルダウンについて

質問

ホームページのプルダウンについて

自分のホームページにプルダウンのようなもので表示させてたいのですが、どうすれば出来るのでしょうか。

サイトなどがございましたら、教えて下さい。

因みに自分が理想のプルダウンは以下のURLのイベントカレンダーみたいな形にしたいです。
幕張メッセ　http://www.m-messe.co.jp/

回答No.2

dark_kappa · ベストアンサー

連投失礼します。

実際のスタイルは行頭記号付リストでスタイルを作っていましたので、サンプルを改編します。

<!-- イベントカレンダーのコンテンツ部分 -->
<div class="eventbox">
<ul>

<li class="event1">
<a href="リンク先">
<span>●年●月●日（●）-●年●月●日（●）</span>
<br>イベント名
</a>
</li>

<li class="event2">
<a href="リンク先">
<span>●年●月●日（●）-●年●月●日（●）</span>
<br>イベント名
</a>
</li>

<!-- 必要な数だけ、li class="event~"を作る -->

</ul>
</div>

参考URL先では
・<li>～</li>　は４パターン
・行頭記号はイメージを使い表示させている
…という状態でした。

<div class="event1">～</div>でも似たイメージになりますが、divで分けるよりは上記のようにリスト形式にした方が、方法としては宜しいかと思います。
（リンクメニューのように同じスタイルでリンクを並べる場合、リストを使う事がデフォルトになっているので）

どちらの方法を使うにしても、CSSでうまく見せる工夫をすれば、「らしく」なるはずです。
頑張って作ってみて下さい。

お礼

回答ありがとうございます。

色々と挑戦してみます。

回答No.3

もこ猫ミクにゃん（@miku-chi）

プルダウンではなくJavaScriptのツリーリンクの応用でそれらしいものが出来ますよ。
http://plusone.jpn.org/javascript/sample/acc/treemenu.html#treemenu
http://himajin.moo.jp/menu/menu6_1.html
リンクを入れるところに表を入れればいいだけです。

幕張メッセのサイトでは隠し部分を外部呼出しになっていて、ちょっと複雑になっていますが・・・

お礼

回答ありがとうございます。

早速、試してみます。

回答No.1

dark_kappa

「プルダウン」というものがお解りではないのか、それとも理想像として挙げられたURLが間違っておられるか…かな、という感じがします。

理想像として挙げられたURL先、３段組みカラムスタイルの真ん中、「お知らせ」の下にある「イベントカレンダー」の欄のように、タイトルが一番上にあって、その下に似たような感じでコンテンツを並べていきたい、という事でしょうか。

この「イベントカレンダー」の箇所のスタイルだと…

・段組みスタイルが理解できること
・DIV分け、idやclassの意味が解ること
・ul li という、行頭文字付リスト表示の仕方が解ること
…という条件で、スタイルを作る事ができます。

・マウスカーソルを重ねた時に背景の色を変えたい
…というのは、CSSまたはJavaScriptが解れば可能です。

・中の色をランダムに配置したり、記事を自動的に変化させたい
…というのは、PHPが解れば可能です。

このため、スタイルを作る事ができる条件３つをご理解されている、という前提で記載します。
（解らなければ、例えテンプレートがあっても「何処をどう変えればいいの？」という所で止まりますから、理解してなきゃいじれません）。

Firebugsでスタイルを覗き見してみたら、案外と単純なスタイルで作られていました。
JavaScriptも入っているのですが、この部分は抜いて考えます。

<!-- イベントカレンダーのタイトル画像部分 -->
<div>
<a href="リンク先"><img width="390" height="30" alt="イベントカレンダー" src="画像.gif"></a>
</div>

<!-- イベントカレンダーのコンテンツ部分 -->
<div class="eventbox">

<div class="event1">
<a href="リンク先">
<span>●年●月●日（●）-●年●月●日（●）</span>
<br>イベント名
</a>
</div>

<div class="event2">
<a href="リンク先">
<span>●年●月●日（●）-●年●月●日（●）</span>
<br>イベント名
</a>
</div>

<!-- 必要な数だけ、div class="event~"を作る -->

</div>

.eventbox のスタイルは、幅指定くらいでしょうか。
.event1 .event2 …（参考URLではevent4まで作ってランダム配置しています）のスタイルは、高さと背景の色。
spanタグのスタイルで、文字サイズを下げています。
また、クラスごとに行頭記号を画像に変更させて色を変えた同じ形の画像を当てはめているようです。

.event1 .event2 …のCSSで:hover時に背景の色を変えれば、それらしくなりますね。

どこかからスタイルだけもらうにしても、これと同じものはかなりじっくり探さないとないかもしれません。
表示としてはあまり一般的ではないので…。

JavaScriptやPHPの部分を除き、それらしく作る事はWebページ制作の中級者くらいならば自前でサクサクッと組めます。
文字以外の範囲部分にマウスカーソルを置いた時もリンクに反応させたい、ということも、display:block;で出来る事も、中級者ならばお手の物のハズです。

そこまでの知識がない、というのであれば、身の丈に合うスタイルと方法で作るしかないですね。
テーブルを使うなどで代用する、とか。