Javascript（jQuery）によるドロップダウンメニューが機能しない

分類:[その他]

はじめまして、こんにちは。

いつか自身でHPを作成できるようにと、先日からhtml/cssをかじり出した者です。

開発環境は【MAC OS X 10.7.5】【safari】で行っています。


現在、以下の２点をしてみたいと思い、（）内のサイトを参考に試みています。
１．スライドショー
　　（http://makasete-web.net/bxslider）超簡単！jQueryスライドショーを10分で実装する方法
２．ドロップダウン形式のメニューバー
　　（http://makasete-web.net/dropdown-menu） 誰でも出来る！jQueryでドロップダウンメニューをわずか7行で完成させる方法


しかし、以下のようにコードを書いてみたところ、スライドショーは何とか動いたのですが、メニューバーが機能しません。
（※複数ファイルの投稿の仕方が分からなかったので下記にコード内容を記述しました。
　　タグが使えないのでタグは【】で記載しています。）

スライドショーを制作するにあたり、参考サイトの通り、『filejquery.bxslider.css』『filejquery.bxslider.min.js』をダウンロードしました。理解が乏しくてお恥ずかしい限りですが、htmlのhead内にて、scriptタグでjQueryを使うよと確認させ、linkタグにてcssを参照していると認識しています。

次にメニューバーの作成にあたっては、別のcssファイル（下記記述）を作り読み込むようにしました。
これは、スライドショーが上手く機能したため、いらぬことをしてスライドショーまで動かなくなったら嫌だな、、と考えたからです。

これが原因（１つのcssファイルしか読み込めない？）かと思い、スライドショーのために落としたcss内にメニューバー用のcssを書き、１つのファイルに統合してみましたがやはり動かずでした。

ブラウザで表示すると、メニューバーに色がついていることから、cssを読み込んでない訳ではない？ということかと思うのですが、その場合、htmlやcssのコードに不備があると言うことになります。
となると、どの部分が原因なのかが何度試しても分からず、という状況です。

パソコンの知識が乏しいことから、皆様方にとりまして非常にお粗末な質問になっていれば申し訳ないのですが、ご助言頂きたく思います。

---【HTML】----------------------------------------------------------------
【!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
　"http://www.w3.org/TR/html4/loose.dtd"】
【html lang="ja"】
【head】
【meta http-equiv="Content-Type" content="text/html; charset=utf-8"】
【script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"】【/script】
【script src="js/jquery.bxslider.min.js"】【/script】
【link href="css/jquery.bxslider.css" rel="stylesheet" /】
【link href="css/style.css" rel="stylesheet" /】

【script type="text/javascript"】
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
});
});

$(function(){
$('#menu li').hover(function(){
$("ul:not(:animated)", this).slideDown();
}, function(){
$("ul.child",this).slideUp();
});
});
【/script】
【/head】

【body】
【ul id="menu"】
【li】トップ【/li】
【li】ニュース
【ul class="child"】
【li】【a href="#">プレスリリース【/a】【/li】
【li】【a href="#">お知らせ【/a】【/li】
【/ul】
【/li】
【li】採用情報
【ul class="child"】
【li】【a href="#">新卒採用 【/a】【/li】
【li】【a href="#">中途採用 【/a】【/li】
【/ul 】
【/li 】
【li class="menu" 】会社案内
【ul class="child" 】
【li 】【a href="#" 】会社概要【/a 】【/li 】
【li 】【a href="#" 】沿革【/a 】【/li 】
【li 】【a href="#" 】アクセスマップ【/a 】【/li 】
【/ul 】
【/li 】
【/ul 】

【div align="center" 】
【ul class="bxslider" 】
【li 】【img src="images/photo1.jpg" title="1" /】【/li 】
【li 】【img src="images/photo2.jpg" title="2" /】【/li 】
【li 】【img src="images/photo3.jpg" title="3" /】【/li 】
【li 】【img src="images/photo4.jpg" title="4" /】【/li 】
【li 】【img src="images/photo5.jpg" title="5" /】【/li 】
【/ul 】
【/div 】
【/body 】
【/html 】

---【CSS（style.css）】----------------------------------------------------------------

ul{
list-style-type: none;
margin: 0;
padding: 0;
color: #fff;
}
ul#menu li{
float: left;
position: relative;
margin: 0;
padding: 5px;
width: 200px;
background-color: #555555;
display: block;
}
ul.child{
display: none;
position: absolute;
margin-left: -5px;
padding: 0;
}
ul.child li a{
padding: 5px 10px;
margin-left: -5px;
margin-right: -5px;
margin-bottom: -5px;
display: block;
color: #fff;
}
li a:hover{
background: #ff0000;
}

コードの問題ではありません。
メニュー部と、スライドショー用の外枠（div align="center"）とが完全に重なり合っているせいで
おかしくなっているだけです。
例えばメニュー部をdivに突っ込んでやってそのdivに高さ100px程度を指定したりすると
その範囲内でちらっとメニューが反応して開いている状況が見えます。

画面も一応…。
画像なしでやったのでスライドがみっともないですがちゃんと左に流れてます。

■No32827に返信(とん。さんの記事)
> 画面も一応…。
> 画像なしでやったのでスライドがみっともないですがちゃんと左に流れてます。


ご助言ありがとうございます！

一度JQueryのメニューバーを外してCSSのみでメニューバーを装備してみてたのですが、それでもメニューが動かず悩んでいたところ、とん。さんのメニューとスライダーが重なっているでスッキリしました！

(div)でメニューバーとスライダーの部分を分けて、z-indexでメニューを優先にすることでメニューのアニメーションが上手く動きました。

ただ、次は(div)内のスライダーの画像を上下中央揃えにしたいのですが、うまくいかず困っていますが、
これはまた別スレで質問するよう致します。

ありがとうございました！

■No32828に返信(てぃーおーさんの記事)

失礼しました。解決済みにするのを忘れていました。