jQueryとCSSを使って可変メニューを作成してみました。ウィンドウのサイズが670pxより小さい時は、クリックで表示するプルダウンメニューに、ウィンドウのサイズが670pxより大きい場合は横並びのメニューになります。JavaScriptがオフの場合、プルダウンメニューはせずにメニューは最初から表示されます。
スクリプトとサンプル①
jQueryは、Google Hosted Libraries の バージョン1.11.1 を使用。★バージョン2.1.1でも動作確認。
$(function(){
$("#nav ul").prepend("<li class=\"navi\"><a href=\"#\">メニューを選択</a></li>");
$("#nav li:first").click(function(){
$("#nav li:first").siblings().slideToggle("fast");
});
function kahen(){
var haba = $(window).width();
if (haba < 670){
$("#nav li").hide();
$("#nav li:first").show();
}
else{
$("#nav li").show();
$("#nav li:first").hide();
}
}
$(window).on("load", function() {
kahen()
});
$(window).resize(function(){
kahen()
});
});
スクリプトの処理内容①
$(function(){
/* コンテンツを #nav ul の先頭に挿入する。*/
$("#nav ul").prepend("<li class=\"navi\"><a href=\"#\">メニューを選択</a></li>");
/* #nav li:first がクリックされた際の処理 */
$("#nav li:first").click(function(){
/* #nav li:first 要素以外を slideToggle */
$("#nav li:first").siblings().slideToggle("fast");
});
function kahen(){
/* ページ表示領域（横幅）をピクセル単位で取得して変数 haba に代入 */
var haba = $(window).width();
/* 変数 haba が 670より小さい場合、以下の処理 */
if (haba < 670){
/* #nav li を非表示 */
$("#nav li").hide();
/* #nav li:first を表示 */
$("#nav li:first").show();
/* 変数 haba が 670より大きい場合、以下の処理 */
} else {
/* #nav li を表示 */
$("#nav li").show();
/* #nav li:first を非表示 */
$("#nav li:first").hide();
}
}
/* ウィンドウが読み込まれた時、kahen() を実行 */
$(window).on("load", function() {
kahen()
});
/* ウィンドウの大きさが変更された時、kahen() を実行 */
$(window).resize(function(){
kahen()
});
});
追記：スクリプトとサンプル②
上記①の使い辛い箇所を改良をしてみました。改良箇所は以下になります。
jQueryは、Google Hosted Libraries の バージョン2.1.1 を使用。※IE8非対応。
jQueryは、Google Hosted Libraries の バージョン2.1.1 を使用。※IE8非対応。
- 選択中のメニューの背景色を指定
- プルダウンメニューの項目を選択すると閉じるように変更
- プルダウンメニューのタイトル部分に選択中のメニュー名を表示
$(function(){
$("#nav ul").prepend("<li class=\"navitop\">ページ1を選択中</li>");
var nav = $("#nav li");
var navfst = $("#nav li:first");
nav.click(function(){
if ($(this).hasClass("navi")) {
navfst.siblings().slideToggle("fast");
}
if ($(this).hasClass("hit")) {
} else if ($(this).hasClass("navitop")){
} else {
nav.removeClass("hit");
$(this).addClass("hit");
navfst.text($(this).text()+"を選択中")}
});
function kahen(){
var haba = $(window).width();
if (haba < 670){
nav.hide().siblings().addClass("navi");
navfst.show();
}
else{
nav.show().siblings().removeClass("navi");
navfst.hide();
}
}
$(window).on("load", function() {
kahen()
});
$(window).resize(function(){
kahen()
});
});