人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

横並びのナビゲーションメニューをマウスオーバーすると、その下にサブメニューが出てくるようにしたいのですが、方法を教えてください。
ひと昔まえによくあったのですが、ページがセンター配置でしかもメニュー部分がCSSでレイアウトされています。参考サイトなどでもOKです。お願いします。

●質問者: izumi6878
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS サイト センター マウスオーバー レイアウト
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● sodapop_peepshow
●50ポイント

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

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

cssとjsだとおもいます。


2 ● Yota
●50ポイント

こんなのですか。

<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/


3 ● indiana
●50ポイント

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

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

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


4 ● Q-A
●50ポイント

http://www.k5.dion.ne.jp/~i-araki/css/pulldown.html

http://www.stylish-style.com/csstec/ultimate/css-roll-4.html

サンプル付きで説明されています。日本語です。


5 ● Highstar
●50ポイント

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です。)

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ