コメントありがとうございます。
CSSを編集すれば可能ですが、さらにドロップダウンを展開することが難しくなると思われます。
ご教授ありがとうございます。ご指示の通りで解決できました。ぶら下がりメニュー上をhoverしていくと、若干ちらちらする感じですが、これは色の差のせいでしょうか。色を変えて試してみます。
DreamWeaverで編集していますがCSS内で探せず少し困っていました。ありがとうございました。
コメントありがとうございます。
色を変更するには、style.cssの行目
.Nav > ul > li a:hover::after {
background: #333;//ここを変える
-webkit-transform: scale(1);
transform: scale(1);
}
ふわっとする動きを止めるには、202行目
.Nav > ul > li a::after {
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(.5); //ここを削除
transform: scale(.5); //ここを削除
}
これでうまくいくと思います。CSSはブラウザのデベロッパーツールを使うとどこにどこのCSSが当たっているかわかりやすいですよ。ではでは。
ご返答頂き、本当にありがとうございます。
ご返答頂いた内容を元に、もう少し検証してみようと思います。
コメントありがとうございます。
>position fixed等を試してみたのですが、うまく固定することができません。
↑これについては、サイトの構造が分かりませんので、CSSを調べてみてください。
また、固定できた場合メニューが長すぎる場合ですが、メニューを開いたときにスクロールできるよう(コンテンツを隠すなど)工夫がいると思います。
参考サイト:https://sumai.panasonic.jp/sumai_create/
記述のある
timer = setTimeout(function() {
var ww = $(window).width();
if (windowWidth != ww) {
if (windowWidth > point) {
$(“body”).addClass(“pc”).removeClass(“spn”);
$(“.Nav > ul”).removeClass(“open close”).css(“display”, “block”);
$(“.Nav .navbtn a”).removeClass(“open close”).html(“メニューを閉じる”);
$(“.Nav ul li.parent a”).removeClass(“open”).addClass(“close”);
$(“.Nav ul.submenu”).slideUp(“fast”).removeClass(“open”).addClass(“close”);
} else { //画面サイズが1000px未満のときの処理
$(“body”).addClass(“spn”).removeClass(“pc”);
$(“.Nav > ul”).addClass(“close”).removeClass(“open”).css(“display”, “none”);
$(“.Nav .navbtn a”).addClass(“close”).removeClass(“open”).html(“メニューを開く”);
$(“.Nav ul li.parent a”).removeClass(“open”).addClass(“close”);
$(“.Nav ul.submenu”).slideUp(“fast”).removeClass(“open”).addClass(“close”);
}
} else {}
}, 50);
});
こちらを削除しますとメニューもきちんと開きハンバーガーメニューをタップするとバツ印になります。
しかし、ページを開いたときや更新したときにハンバーガーメニューをタップするとすべてのメニュー(タップしたら開くはずの子、孫まで)が開いてしまいます。
説明がわかりにくく申し訳ございません。
何かご教授いただければ幸いです。