掲示板/JavaScript質問板/過去ログ/一覧/ サブカテゴリリンクが表示されるメニュー。

0 名前： ００８ ： 2005/06/06 19:48 ［URL］: ００８です。どうぞよろしくお願いいたします。

サンプルを参照URLに設置しました。一度ご覧ください。
このようなテキストをクリックすると下にパッとサブカテゴリメニューが
現れるようなものが欲しいんです。サンプルのものは市販のHP制作ソフトに
付属されているものでソフト上で編集するのですが編集部分が限られています。

参照先のものはソフト上の編集でテキストの色、リンク選択時のテキスト
バックの色、サブカテゴリメニューのバックの色、決められた中からの
文字タイプの選択、文字の大きさ、が編集できます。

私の希望は、
■コレと同じタイプのもので、文字タイプを自由に指定したいんです。
できたらメニュー部分とサブカテゴリ部分を、別々に文字の大きさと
文字の色と、文字タイプの指定が出来たらうれしいです。
■メニュー部分のテキストの下線はいらないです。

リンク先のサブカテゴリにワンステップで移動できるように使用したいんです。
使用感はサンプルのようなのがいいです。クリックするとパッとサブカテゴリが
現れて、マウスを乗せないとすぐに消えて、マウスを乗せても外すと
パッと消えるような感じで。

プログラムの知識が全くありませんので、小技集などのサイトで希望に
合うようなものを探しているのですがぴったり来るものが見つからず
こちらに質問させて頂きました。

説明がわかりづらい点があると思いますがどうぞよろしくお願いします。

1 名前： Pid ： 2005/06/06 19:48: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>ポップアップメニュー</title>
<script type="text/javascript">

// 【概要】
// ・ HTML のリスト形式で書かれたメニューをポップアップメニュー化します。
// ・デザインは CSS で好きなように調節して下さい。
// ・スクリプトが動作しない環境ではメニューが全部開いた状態になります。
// ・ body 要素を汚さないので外部ファイル化による一括管理が容易です。
//
// 【使い方】
// ・スクリプトの最後にポップアップ化したいメニューの id を並べて書きます。
// ・あとは head 要素内でこのスクリプトを呼び出すだけ。
//
// 【その他】
// ・http://www.wiredope.com/csstemp/?p_id=sample_dynamic_1
// ・http://inspire.server101.com/js/mb/
// ・http://kapu.iwoky.jp/rcug/popupmenu.htm

2 名前： Pid ： 2005/06/06 19:48: onload = function() {

function PopupView(id) {
if (!document.getElementById) return;
var node = document.getElementById(id);
if (node) PopupView.initializer.call(node.childNodes);
}

PopupView.initializer = function() {
for (var i = 0, I = this.length; i < I; i++) {
PopupView.switcher.call(this[i].childNodes, 'none');
this[i].onmouseover = function() { PopupView.switcher.call(this.childNodes, 'block'); }
this[i].onmouseout = function() { PopupView.switcher.call(this.childNodes, 'none'); }
}
}

PopupView.switcher = function(displayValue) {
for (var i = 0, I = this.length; i < I; i++) {
if (!this[i].nodeName.match(/^[OU]L$/)) continue;
this[i].style.display = displayValue;
this[i].style.position = 'absolute';
}
}

// ↓↓↓↓ ここに ul/ol 要素の id を指定する（いくつでも指定可能）
new PopupView('menu1');
// ↑↑↑↑ ここまで
}

</script>

3 名前： Pid ： 2005/06/06 19:48: <style type="text/css">

/* メニューデザインの一例 */

.menu {
padding: 0;
}

.menu li {
margin: 0;
padding: 0;
position: relative;
float: left;
width: 100px;
list-style: none;
}

.menu li ul {
margin: 0;
padding: 0;
}

.menu a {
display: block;
width: 100%;
color: #fff;
background: #003296;
text-decoration: none;
text-align: center;
line-height: 2em;
}

.menu a:hover {
background: #99f;
}

</style>
</head>

4 名前： Pid ： 2005/06/06 19:48: <body>
<h1>ポップアップメニュー</h1>

<ul id="menu1" class="menu">
<li><a href="menu1.html">メニュー 1</a>
<ul>
<li><a href="menu1-1.html">メニュー 1-1</a></li>
<li><a href="menu1-2.html">メニュー 1-2</a></li>
<li><a href="menu1-3.html">メニュー 1-3</a></li>
<li><a href="menu1-4.html">メニュー 1-4</a></li>
</ul>
</li>
<li><a href="menu2.html">メニュー 2</a>
<ul>
<li><a href="menu2-1.html">メニュー 2-1</a></li>
<li><a href="menu2-2.html">メニュー 2-2</a></li>
<li><a href="menu2-3.html">メニュー 2-3</a></li>
<li><a href="menu2-4.html">メニュー 2-4</a></li>
</ul>
</li>
</ul>

</body>
</html>

5 名前： ００８ ： 2005/06/06 19:48 ［URL］: Pidさん、ありがとうございます！
今帰ってきたばかりなので、試してみてから又ご報告させて頂きます。
もし、まだわからないことなどあればヨロシクお願いします。
頭に自信がないのですみません。

6 名前： ００８ ： 2005/06/06 19:48 ［URL］: わからないー　あほの私にはどこにどういう風に挿入してどういう風に設定
するのかなど解らないー　何が解らないのかも解らないー・・・

あ、すみません。取り乱しました。

スクリプトを勉強すれば基本的なことなんですよね？自信はないんですが
勉強してみます。

いちおうお情けを期待して設置したいページのURLを載せておきます。
このページの真ん中のメインメニューをこんなのにしたいんです。
みなさんから見れば勉強不足なんだよと思われるかもしれませんが
続いてのご指導をよければお願いしたいです。

どうか、どうしようもないこんな私に救いのお慈悲を！

お願いします。

7 名前： Pid ： 2005/06/06 19:48: JavaScript の知識は特に必要ありません。

-(1). HTML のリスト（ul/ol 要素）としてメニュ－を書く。
-(2). メニュ－に id 属性を割り振っておく。
-(3). ポップアップ化スクリプトを head 要素内で呼び出す。
-(4). スクリプトの最後尾で，ポップアップ化したいメニュ－の id を指定する。
-(5). あとは適当に CSS でデザイン調節。

ただ，もし HTML が分からないということなら，正直かなり厳しいです（リストの書き方は大丈夫ですよね…？）。

・http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
・http://www.kanzaki.com/docs/htminfo.html
・http://www.asahi-net.or.jp/%7Esd5a-ucd/www/

「ポップアップメニュー」「マウスオーバーメニュー」などで検索すれば他のサンプルも沢山見つかります。しかし，できれば「自分にとって簡単なスクリプト」ではなく「利用者が確実にメニューを辿れるスクリプト」を選んで下さい。

8 名前： ００８ ： 2005/06/06 19:48 ［URL］: がんばってます・・・

むつかしい・・