メニュー on qwerty.work

【jQuery】メガメニュー内の子要素のリンクでページにジャンプ（移動）できないとき

Wed, 13 Jul 2022 17:27:21 +0900

メニュー内のリンクをクリックしても反応しない

先日、jQueryを使用して↓メガメニューを作成しました。

https://qwerty.work/blog/2022/07/jquery-megamenu.php https://qwerty.work/blog/2022/07/jquery-megamenu.php

しかし、メニューを開閉はいいのですが、メニューにあるリンクをクリックしてもアンカーリンクで設定したURLのページに遷移しませんでした。どうもクリックの動作をjQueryで捕まえていて邪魔しているような感じがします。

window.location.hrefで解決

以下のページに解決方法がありました。

https://designsupply-web.com/media/programming/2995/ https://designsupply-web.com/media/programming/2995/

原因

原因はevent.preventDefault();でした。メガメニュー開閉の二重クリックを防ぐために使っていたこのコードがリンクを無効にしていたようです。

例えば以下のようなコード。

$("a").on('click',function(event){
     event.preventDefault();
  });

このような場合、window.location.href = $(this).attr('href');を加えて、JSからジャンプするようにしたら解決できました。

解決したソース例

メガメニュー（.menu_contents）内にあるアンカーリンク（a）をクリックまたはタップしたら、メガメニューを閉じて、リンク先へジャンプするといった内容です。

$(function () {
  var clickEventType = ((window.ontouchstart !== null) ? 'click' : 'touchstart');
  $('.menu_contents a').on(clickEventType, function () {
    $('.menu_contents').hide();
    window.location.href = $(this).attr('href');
  });
});

【jQuery】シンプルで理想的なメガメニューのサンプル

Wed, 06 Jul 2022 09:27:53 +0900

jQueryで実現するメガメニューはたくさんありますが、挙動が合わない、コードが複雑、実装の難易度が高いということがあります。そこで、簡単でいいものを見つけましたのでメモ。

少ないコードでできるサンプルコード

参考サイト

以下のページにあるサンプルコードを試したところ、あっさり実現できました。

https://www.flatflag.nir87.com/megamenu-2106 https://www.flatflag.nir87.com/megamenu-2106

試しに作ってみたテストページ

https://qwerty.work/test/test-megamenu.php

マウスオーバーとタッチ（クリック）の両対応したいとき

パソコン用のサイトはマウスホバーで開いてくれるのはいいのですが、スマホやタブレットなど、タッチパネルの場合はタッチまたはクリックで開くようにしなければなりません。私は以下の方法で両対応しました。

JSのソース例

メニューが開いている状態と閉じている状態をflagで判別してjQueryによる開閉動作を行うようにしています。

$(function() {
  var flag = 'close';
  //PCの場合はマウスオーバーで開閉
  $('#menu li').hover(function() {
    $(this).find('.menu_contents').stop().slideDown();
    flag = 'open'; 
  }, function() {
    $(this).find('.menu_contents').stop().slideUp();
    flag = 'close';
  });
  //タブレットの場合はタップで開く
  var clickEventType=((window.ontouchstart!==null)?'click':'touchstart');
  $('#menu li').on(clickEventType,function() {
   if (flag =='close') {
    flag = 'open'; 
    $(this).find('.menu_contents').stop().slideDown();
    event.preventDefault();
   } else {
    flag = 'close';
    $(this).find('.menu_contents').stop().slideUp();
    event.preventDefault(); 
   }
  });
});

クリックで開閉する部分については、以下の書き方でも動きました。

$('.menu_contents').hide();
 $('.menu_list a').click(function(e){
     e.preventDefault();
     // hide all span
     var $this = $(this).parent().find('.menu_contents');
     $('.menu_list .menu_contents').not($this).hide();
     // here is what I want to do
     $this.toggle();
 });

補足

clickとtouchstartイベントが二重に実行されないようにする

clickまたはtouchstartどちらかのイベントで動作させたいとき、以下のように指定することがあります。

$('#menu li').on('click touchstart',function(){

場合によっては1クリックしかしていないに、clickとtouchstartが同時に実行され、メニューが一瞬だけ表示され、正常に表示できない場合があります。これを以下のコードでデバイスによってどちらか方法に固定します。

var clickEventType=((window.ontouchstart!==null)?'click':'touchstart');
  $('#menu li').on(clickEventType,function() {

この方法は以下のページを参考にしました。

https://sakura.monte-verita.biz/3409 https://sakura.monte-verita.biz/3409

event.preventDefault();で一時停止させる

ワンクリックや1回のタッチしかしていないのに、どうしてもイベントが多重発生してしまう場合に、以下のコードで一時停止させることができました。

event.preventDefault();

または

eevent.stopPropagation();

この方法は以下のページを参考にしました。

https://spyweb.media/2017/12/25/js-touch-click-event-twice-at-the-same-time/ https://spyweb.media/2017/12/25/js-touch-click-event-twice-at-the-same-time/

https://blog.fenrir-inc.com/jp/2011/06/ios_android_pc_touchevent.html https://blog.fenrir-inc.com/jp/2011/06/ios_android_pc_touchevent.html

その他のメガメニュー

多段で表示できるもの。

https://github.com/kamens/jQuery-menu-aim https://github.com/kamens/jQuery-menu-aim

https://qiita.com/nnipsii/items/c707dd721f502b0a732b https://qiita.com/nnipsii/items/c707dd721f502b0a732b

http://jsfiddle.net/BGSyS/3/ http://jsfiddle.net/BGSyS/3/

https://coder-memo.com/drop_menu/ https://coder-memo.com/drop_menu/

Excelで右クリックメニューが表示されなくなったときの修復方法とマクロ

Wed, 02 Sep 2020 00:08:34 +0900

右クリックメニューが表示できない！？

最近職場で**「エクセルで右クリックしてもメニューが出ない」とか「右クリックできない」**という相談を受けました。何も設定を変更していないのに急になったそうです。

原因はマクロ！？

色々調べていくに内になんとなく以下のことが原因のように感じました。

右クリックメニューを無効化するマクロを組まれたエクセルファイルを使用して、何らかの原因で強制終了してしまい、右クリックメニューが無効化されたままになっている？
.xlbファイルが壊れた？

対処方法

方法1. マクロで右クリックを有効化してみる

以下のマクロのソースで有効化することで右クリックメニューが復活します。次回エクセルを起動したときに修復されていなかった場合は、「方法2」を試してください。

Application.CommandBars("Row").Enabled = True　' 行選択時、右クリック有効
Application.CommandBars("Column").Enabled = True　' 列選択時、右クリック有効
Application.CommandBars("Cell").Enabled = True　' セル選択時、右クリック有効

方法2. xlbファイルを削除してみる

xlbファイルには、エクセルのツールバーやメニューバーに関する情報が保存されています。これを削除すれば、次にエクエルを起動したときにメニュー関連が初期化された状態で右クリックメニューが復活する可能性があります。xlbファイルは削除しても自動で再作成されます。心配な場合はファイル名変更でもOKです。

.xlbファイルのある場所

C:/Users/[ユーザー]/AppData/Roaming/Microsoft/Excel

ここにエクセルのバージョンによって**Excel14.xlb**とか**Excel15.xlb**とかあるので、該当バージョンのファイルを削除します。

修復用エクセルファイル作ってみた

手っ取り早く、マクロを仕込んだ右クリックメニュー修復（復活）用のエクセルファイルを作ってみました。以下のZIPファイルをダウンロードして解凍すれば、**「右クリックメニュー修復.xlsm」**というのが現れるので、使ってみてください。

**ExcelMenuRrecovery.zip（16KB)

右クリックメニュー修復.xlsmのスクリーンショット

xlbファイルのリカバリに関してはExcel15.xlbを対象にマクロを組んでいますので、お使いのバージョンによってExcel14.xlbであったり、Excel16.xlbであったりするので環境に合わせてマクロ内のパス（ファイル名）を変更してください。

マクロのソース

上記では以下のコードでマクロを書いています。**『マクロが組み込んであるファイルをダウンロードして使うなんて何が仕込まれているかわからなじゃないか』**と不安な場合は、このソースを参考にマクロを実行してみてください。

Sub 右クリックメニュー有効化()
  Application.CommandBars("Row").Enabled = True '行選択時のメニュー
  Application.CommandBars("Column").Enabled = True '列選択時のメニュー
  Application.CommandBars("Cell").Enabled = True 'セル選択時のメニュー
End Sub

Sub 右クリックメニュー無効化()
  Application.CommandBars("Row").Enabled = False '行選択時のメニュー
  Application.CommandBars("Column").Enabled = False '列選択時のメニュー
  Application.CommandBars("Cell").Enabled = False 'セル選択時のメニュー
End Sub

Sub xlbファイルリカバリ()
  Dim target As String
  target = Environ("USERPROFILE") & "\AppData\Roaming\Microsoft\Excel\Excel15.xlb"
  Name target As target & "_" & Format(Now, "yyyyMMddhhmmss") 'ファイル名リネーム
  Application.Quit 'エクセルを閉じる
End Sub

Sub フォルダを開く()
  CreateObject("Shell.Application").explore Environ("USERPROFILE") & "\AppData\Roaming\Microsoft\Excel"
End Sub

jQueryのslideToggleを使ったアコーディオンメニューのメモ

Wed, 04 Jun 2014 15:54:52 +0900

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" async></script><br><script type="text/javascript">
  $(function(){
    $('.accordion-List').hide();
    //
    $('#accordion-Title').click(function(){
      $('+.accordion-List',this).slideToggle();
    });
  });
</script><br>
<style type="text/css">
  #accordion-Title { cursor:pointer; }
</style><br>
<h3 id="accordion-Title">リストタイトル（サンプル）</h3><br>  <ul class="accordion-List">
    <li>リスト1</li>
    <li>リスト2</li>
  </ul>

コードはこんな感じでjQueryを読み込み**slideToggle()**を指定するだけ、下のサンプルがちゃんと動けばタイトルをクリックするとリストが現れ、もう一度クリックすると閉じるはず…。

$(function(){
	$('.accordion-List').hide();
	//
	$('#accordion-Title').click(function(){		
		$('+.accordion-List',this).slideToggle();
	});
});



#accordion-Title { cursor:pointer;}

リストタイトル（サンプル）

  - リスト1
  - リスト2

隠れているはずのリストが始めから表示されていたり、クリックしても動作しない場合は失敗です…。

独立した複数のアコーディオンがある場合

accordion-List1,accordion-List2など、idやclassを分けないと最初のアコーディオンしか動かないので注意が必要です。

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" async></script><br><script type="text/javascript">
  $(function(){
    $('.accordion-List1').hide();
    //
    $('#accordion-Title1').click(function(){
      $('+.accordion-List1',this).slideToggle();
    });
  });
  $(function(){
    $('.accordion-List2').hide();
    //
    $('#accordion-Title2').click(function(){
      $('+.accordion-List2',this).slideToggle();
    });
  });
</script><br>
<style type="text/css">
  #accordion-Title1,#accordion-Title2 { cursor:pointer; }
</style><br>
<h3 id="accordion-Title1">リストタイトル（サンプル1）</h3><br>  <ul class="accordion-List1">
    <li>リスト1-1</li>
    <li>リスト1-2</li>
  </ul>
<h3 id="accordion-Title2">リストタイトル（サンプル2）</h3><br>  <ul class="accordion-List2">
    <li>リスト2-1</li>
    <li>リスト2-2</li>
  </ul>

以下がサンプル

$(function(){ $(’.accordion-List1’).hide(); // $(’#accordion-Title1’).click(function(){ $(’+.accordion-List1’,this).slideToggle(); }); }); $(function(){ $(’.accordion-List2’).hide(); // $(’#accordion-Title2’).click(function(){ $(’+.accordion-List2’,this).slideToggle(); }); });

#accordion-Title1,#accordion-Title2 { cursor:pointer; }

リストタイトル（サンプル1）

    - リスト1-1
    - リスト1-2

リストタイトル（サンプル2）

    - リスト2-1
    - リスト2-2

この方法以外にもたくさんやり方はあるみたいなので、グーグルで「jQuery slideToggle」とか「jQuery アコーディオン slideToggle」と検索してみるといいかもしれません。

その他参考

http://jqueryui.com/accordion/ http://jqueryui.com/accordion/

Windows Vista/7に神モード『GodMode』が存在！

Mon, 10 Sep 2012 22:04:43 +0900

Windows Vista/7には、**『GodMode（ゴッドモード）』**と呼ばれる隠し機能が存在するしているそうです。

GodeModeを使うと、省略されすぎてわかりにくいコントロールパネルの内容が説明付きでリスト表示され、非常にわかりやすくなります。

GodModeの使い方

デスクトップ等にマウスの右クリックメニューから**[新規作成]-[フォルダー]**を選択。
「新しいフォルダー」の名前を以下に変更する。

GodMode.{ED7BA470-8E54-465E-825C-99712043E01C}
フォルダアイコンがGodModeアイコンに変身するのでダブルクリック。

[![](images/WS000001.jpg)](/blog/2012/09/10/WS000001.jpg)

Windows Vistaと7でできるいうことは今から発売されるWindows8でもGodModeが存在するかもしれません。

2013/02/09追記

ウィンドウズ8でもできました！