- 締切済み
javascriptとCSSを使ってのドロップダウンメニュー作成
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();
- takah1r0
- お礼率60% (3/5)
- JavaScript
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- nipox
- ベストアンサー率32% (10/31)
関係なくて申し訳ありませんが、 FireFoxというブラウザはありません。 Firefoxです。 これは、公式Webにも書いてあります、
- yambejp
- ベストアンサー率51% (3827/7415)
とりあえず、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 = ""; } } }
お礼
わかりました。 ありがとうございます。 もういちど見てみます。
- yambejp
- ベストアンサー率51% (3827/7415)
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; }
- partita
- ベストアンサー率29% (125/427)
タグの構造がおかしいですよ。
お礼
すいません。 修正する際に削除しておりました。 もう一度お願い致します。 <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>
お礼
わかりました。以後気をつけます。