javascriptとCSSを使ってのドロップダウンメニュー作成

締切済

質問者：takah1r0
質問日時：2006/08/04 12:59
回答数：4件

CSSとJavaScriptを使って
ドロップダウンメニューを作ろうと思っているのですが
JavaScriptがうまく作動していないためか
FireFoxでは表示されるのですが
IE6では動きません。

ご教授お願い致します。

■index.html

<head>
<script src="javascript/menu.js" type="text/javascript"></script>
</head>

<div id="nav">
<ul>
<li id="category"><a href="～">category</a>
<ul>
<li><a href="～">Overview</a></li>
<li><a href="～">Overview</a></li>
</ul>
<ul>
<li id="category"><a href="～">category</a>
<ul>
<li><a href="～">Overview</a></li>
<li><a href="～">Overview</a></li>
</ul>
</div>

■menu.js

function menuHover() {var menuItems = d.getElementById("nav").getElementsByTagName("li");

for (var i = 0, miL = menuItems.length; i < miL; i++) {
menuItems[i].onmouseover = function() {
this.className = "mnhover";
}
menuItems[i].onmouseout = function() {
this.className = "";
}

window.onload = menuHover();

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： nipox
回答日時：2006/08/05 22:43

関係なくて申し訳ありませんが、

FireFoxというブラウザはありません。

Firefoxです。

これは、公式Webにも書いてあります、

- 0
- 件

通報する

この回答へのお礼

わかりました。以後気をつけます。

通報する

お礼日時：2006/08/07 09:08

No.3

回答者： yambejp
回答日時：2006/08/04 16:31

とりあえず、javascriptのユーザー関数menuHover()

は}の数がおかしいですね？
それとdとか宣言してないオブジェクトつかっているし
ケアレスミスが目立ちます。以下でどうでしょうか？
よくよくご自身でチェックなさることをお勧めします。

function menuHover(){
var menuItems = document.getElementById("nav").getElementsByTagName("li");
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].onmouseover = function() {
this.className = "mnhover";
}
menuItems[i].onmouseout = function() {
this.className = "";
}
}
}

- 0
- 件

通報する

この回答へのお礼

わかりました。
ありがとうございます。
もういちど見てみます。

通報する

お礼日時：2006/08/05 17:21

No.2

回答者： yambejp
回答日時：2006/08/04 14:11

css自体が記載されていないですが・・・

この回答への補足

申し訳ありません。
CSSになります。
#nav {
position:absolute;
height:30px;
width:710px;
top:40px;
border:1px solid red;
z-index:100;
}
#nav ul {
background: url() no-repeat left top;
height: 30px;
margin: 0 auto;
position: relative;
width:100%;
}
#nav li {
float: left;
height: 30px;
}

#search{
width:150px;
background:url(../img/search.jpg) no-repeat left top;
text-indent:-3000px;
border:1px solid blue;
}

#category {
width: 150px;
border:1px solid #ccc;
}
#maker {
width: 150px;
border:1px solid #ccc;
}
#worry {
width: 150px;
border:1px solid #ccc;
}

#nav a {
border: none;
color: #666;
display: block;
font-weight: normal;
height: 47px;
padding: 0 5px;
}
#nav a {
background:url(../img/category_off.jpg) no-repeat;
}
#nav #category a {
background-position: left top;
}
#nav #maker a {
background-position: left top;
}
#nav #worry a {
background-position: left top;
}

#nav a:hover,
#nav li:hover a,#nav li.mnhover a {
background: none !important;
}

#category a {
background-position: left top;
}
#maker a {
background-position: left top;
}
#worry a {
background-position: left top;
}
#nav li ul {
background: transparent url(../i/bgsubmenu.png) repeat-x;
border-bottom: 5px solid;
border-top: 2px solid;
border-color: #777;
height: auto;
left: -9999px;
margin: -5px 0 0 8px;
padding: 1px 0;
position: absolute;
z-index: 3;
}
#nav li:hover ul,#nav li.mnhover ul {
left: auto;
}
#nav li#worry:hover ul,#nav li#worry.mnhover ul {
left: auto;
right: 100px;
}
#nav li ul li,#nav li ul li a {
height: auto;
margin: 0;
padding: 0;
text-indent: 0;
}
#nav li ul li a {
border: 1px #fff;
border-style: none solid;
}
#nav li ul,#nav li ul li {
width: 150px;
}
#nav li:hover ul li a,#nav li.mnhover ul li a,#nav li ul li a {
background: none;
display: block;
font-size: .9em;
padding: 8px 22px 8px 29px;
color: #444;
}
#nav li li {
background: url(../i/blsubmenu.gif) no-repeat left top;
}
#nav li li.mnhover,#nav li li:hover {
background: #5079C5 url(../i/bgsubmenu_h.gif) repeat-y 100% 0;
}
#nav li ul li a:hover {
background: url(../i/blsubmenu_h.gif) no-repeat left top !important;
color: #666;
}

補足日時：2006/08/04 14:32

通報する

- 0
- 件

通報する

No.1

回答者： partita
回答日時：2006/08/04 13:05

タグの構造がおかしいですよ。

- 0
- 件

通報する

この回答へのお礼

すいません。
修正する際に削除しておりました。
もう一度お願い致します。

<div id="nav">
<ul>
<li id="search">商品を探す</li>

<li id="category"><a href="*" title="*">カテゴリーから探す</a>
<ul>
<li><a href="*" title="*">カテゴリー一覧</a></li>
<li><a href="*" title="*">Web Applications</a></li>
<li><a href="*" title="*">Websites</a></li>
<li><a href="" title="*">eCommerce</a></li>
<li><a href="*" title="*">Standards Compliance</a></li>
<li><a href="*" title="*">Search Engines</a></li>
</ul>
</li>

<li id="maker"><a href="*">maker</a>
<ul>
<li><a href="*" title="*">Overview</a></li>
<li><a href="*" title="*">Hosting Accounts</a></li>
<li><a href="*" title="*">Domain Management</a></li>
</ul>
</li>

<li id="worry"><a href="*" title="*">worry</a>
<ul>
<li><a href="*" title="*">Overview</a></li>
<li><a href="*" title="*">eMail Marketing</a></li>

<li><a href="*" title="*">Document Management</a></li>
<li><a href="*" title="*">Lead Management</a></li>
<li><a href="*" title="*">Raffle Applications</a></li>
<li><a href="*" title="*">Call Centre Apps</a></li>
<li><a href="*" title="*">Sample Tracking</a></li>
</ul>
</li>

</ul>

</div>