横並びのナビゲーションメニューをマウスオーバーすると、その下にサブメニューが出てくるようにしたいのですが、方法を教えてください。

ひと昔まえによくあったのですが、ページがセンター配置でしかもメニュー部分がCSSでレイアウトされています。参考サイトなどでもOKです。お願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/09/21 13:34:17
  • 終了:2007/09/21 23:17:23

回答(5件)

id:sodapop_peepshow No.1

sodapop_peepshow回答回数1ベストアンサー獲得回数02007/09/21 13:48:51

ポイント50pt

http://www.pixmax.jp/uranai_parts/index.html

「占い師プロフィール」のところみたいな感じしょうか。

cssとjsだとおもいます。

id:Yota No.2

Yota回答回数453ベストアンサー獲得回数282007/09/21 14:07:57

ポイント50pt

こんなのですか。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Navigation By JavaScript</title>

<style type="text/css">

#menubar {

list-style: none;

}

#menubar li {

display: block;

float: left;

margin: 0;

padding: 0.1em 1em 0em 1em;

border-style: solid;

border-width: 1px;

border-color: #fff #330066 #330066 #fff;

background: #9966FF;

color: #fff;

height: 1.5em;

line-height: 1.5em;

text-decoration: none;

cursor: pointer;

}

.menu {

position: absolute;

visibility: hidden;

border-style: solid ;

border-width: 0px 1px 1px 0px;

/* border-color: #ddd #555 #555 #ddd;*/

border-color: #330066 ;

background: #9966FF ;

}

.menu div a {

display: block;

margin: 0;

padding-left: 1em;

border-bottom: #555 1px solid ;

width: 9em;

height: 1.5em;

line-height: 1.5em;

text-align: justify;

white-space: nowrap;

color: #fff;

text-decoration: none;

}

.menu div a:hover {

background: #663399;

}

div.contdiv {

position:absolute ;

top : 160px;

left : 100px ;

font-size : 18px ;

display : none ;

}

#m0 {

display : block ;

}

</style>

<script type="text/javascript">


window.onload = function () {

var serviceMenu = document.getElementById("lm1");

var service = document.getElementById("m1");

setEvent(lm1, m1);

var downloadMenu = document.getElementById("lm2");

var download = document.getElementById("m2");

setEvent(lm2, m2);

var docsMenu = document.getElementById("lm3");

var docs = document.getElementById("m3");

setEvent(lm3, m3);

/*

var faqMenu = document.getElementById("lm4");

var faq = document.getElementById("m4");

setEvent(ml4, m4);

*/

// if(location.search != '' )

// document.getElementById(location.search.replace('?','')).style.display = 'block' ;

}

function setEvent ( menu, item ) {

menu.onmouseover = function() { showMenu(item) };

menu.onmouseout = function() { hideMenu(item) };

item.onmouseover = function() { showMenu(item) };

item.onmouseout = function() { hideMenu(item) };

}

var menuIsVisible = false;

var visibleItem = null;

function showMenu( item ) {

if( visibleItem == item ) {

return;

} else if( visibleItem != null ){

hideMenu( visibleItem );

}

visibleItem = item;

menuIsVisible = true ;



var menu = document.getElementById('l' + item.id );

menu.style.backgroundColor="#663399";

if( document.all ){

item.style.left = menu.offsetLeft + document.body.offsetLeft + "px";

item.style.top = menu.offsetTop

+ document.body.offsetTop + menu.offsetHeight + "px";

} else{

item.style.left = menu.offsetLeft + "px";

item.style.top = menu.offsetTop + menu.offsetHeight + "px";

}

item.style.visibility = 'visible';

}

function hideMenu( item ) {

if(!menuIsVisible) {

return ;

}

visibleItem = null;

menuIsVisible = false ;

var menu = document.getElementById( 'l' + item.id );

menu.style.backgroundColor = "#9966FF";

item.style.visibility = "hidden";

}

var cont = 'm0' ;

function disp(contdiv) {

if(cont != contdiv) {

document.getElementById(cont).style.display = 'none' ;

document.getElementById(contdiv).style.display = 'block' ;

cont = contdiv ;

// window.location.search = contdiv ;

} else {

return ;

}

}

</script>

</head>

<body>

<ul id="menubar">

<li id="lm1">洋食

<div class="menu" id="m1">

<div><a href="javascript:disp('m1_1');">オムレツ</a></div>

<div><a href="javascript:disp('m1_2');">ステーキ</a></div>

<div><a href="javascript:disp('m1_3');">ハンバーグ</a></div>

</div>

</li>

<li id="lm2">和食

<div class="menu" id="m2">

<div><a href="javascript:disp('m2_1')">鍋焼きうどん</a></div>

<div><a href="javascript:disp('m2_2')">焼き魚</a></div>

</div>

</li>

<li id="lm3">中華

<div class="menu" id="m3">

<div><a href="javascript:disp('m3_1')">チャーハン</a></div>

<div><a href="javascript:disp('m3_2')">ギョーザ</a></div>

<div><a href="javascript:disp('m3_3')">冷やし中華</a></div>

</div>

</li>

</ul>

<div class="contdiv" id="m0">

メニューをお選びください。

</div>

<div class="contdiv" id="m1_1">

おむれつですか。

</div>

<div class="contdiv" id="m1_2">

すてーきですか。

</div>

<div class="contdiv" id="m1_3">

ハンバーグ。

</div>

<div class="contdiv" id="m2_1">

nabeyaki。

</div>

<div class="contdiv" id="m2_2">

焼き魚。

</div>

<div class="contdiv" id="m3_1">

ちゃーはん。

</div>

<div class="contdiv" id="m3_2">

餃子。

</div>

<div class="contdiv" id="m3_3">

ひやし。

</div>

</body>

</html>

http://dummy.com/

id:indiana No.3

indiana回答回数59ベストアンサー獲得回数32007/09/21 14:23:20

ポイント50pt

以下のURLのものはCSSだけで作られており、センター配置です。

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

英語はよくわからないのですが、ソースを参考にすればいけると思います。

id:Highstar No.5

Highstar回答回数2ベストアンサー獲得回数02007/09/21 23:01:38

ポイント50pt

http://bizcaz.com/archives/2007/05/18-225651.php

http://blog.faro.main.jp/?eid=369489

JavaScriptによるIE対策もされているようなので、参考になると思います。

http://www.aplus.co.yu/adxmenu/

上記サイトのものを使用するのもありかと。

(ちなみにライセンスはCreative Commons Attribution Licenseです。)

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません