一歩先を行く QHMユーザのためのTips

FrontPage

3_biz_blue

当画面のデザインは、 3_biz_blue を使用しています。

スクロールしても追従するメニュー (改良版)

 スクロールしても追従するメニューを作成しましたが、ちょっと気に入らない仕様だったので、改良版を作成してみました。この方法は、北研のQHM Proのサイトと同じような動きをします。
 通常、画面をスクロールすると、メニューも一緒にスクロールしますが、メニューだけ常に表示する方法です。下までスクロールしてフッターが表示されると、フッターがすべて表示されるまでスクロールしますが、そのときメニューは固定しているのではなく、上にスクロールし自然な感じで見やすくしてくれます。文章での説明は難しいので、画面サイズを小さくして実際の画面で確認してください。
2カラムと3カラムの両方に対応しています。CSSとjQueryを使用します。
3カラムの場合、どちらか長い方のメニューに合わせてスクロールします。
どのデザインを使用してもOKのはずです。4つのデザインでは確認済み。
以下のサイトを参考にさせてもらいました。
Cyokodog :: Diary http://d.hatena.ne.jp/cyokodog/20120427/exflexfixed01

【作成手順】

  1. 以下のURLを開く(参考にしたサイト)
    http://d.hatena.ne.jp/cyokodog/20120427/exflexfixed01
  2. 画面下部にある ダウンロード から jquery.ex-flex-fixed.zip をダウンロードする
  3. ファイルを解凍し、以下のファイルをFTPで QHMの js フォルダにアップする。
    jquery-1.7.1.min.js
    jquery.exflexfixed-0.2.0.js
  4. 以下のスクリプトをメニューナビ2にコピペする。
    たったこれだけです。CSSはこのスクリプト内に記述してあります。

【解説】

  • jQueryの Ex Flex Fixed を使用してメニューを必要に応じて固定位置に表示します。
  • QHMの メニュー1、メニュー2、コンテンツの各IDに対し表示位置を操作します。

【コード】

#beforescript{{
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.exflexfixed-0.2.0.js"></script>
<script>
jQuery(function(){
  $('#sidebar,#sidebar2').exFlexFixed({
    container : '#main',
  });
});
</script>

<style type="text/css">
/* clearfixでwrapperに高さを出す */
#main,
div.contents-wrapper{
  /zoom : 1;
}
#main:after{
  content : '';
  display : block;
  clear : both;
}
/* メニュー1(左メニュー) */
#wrap_sidebar{
  position : relative;
  z-index:1;
}
/* メニュー2(右メニュー) */
#wrap_sidebar2{
  position : relative;
  z-index:1;
}
</style>
}}

ご意見箱

皆様のご意見をお待ちします。

  • 先日は、QHMフォーラムでお世話になりました。追従するメニューも素晴らしいですね!早速、導入してみましたが不具合が・・・3カラムにて右メニューにアコーディオンを使用しています。そうしたら、アコーディオンが開かなくなりました。もうひとつ、編集画面にて更新ボタンを押したときに、そこから先が進まないなどありました。ご報告まで・・・。 -- アーロン 2012-10-15 (月) 23:39:10
  • アーロンさん  こんにちは。 右メニューにアコーディオンを入れてみましたが、正常に動作しています。更新ボタンでの不具合もこれではおきていません。QHMのバージョンにより不具合がおきるかもしれません。QHM4.91でおかしなことがおきていて北研に問い合わせ中です。 -- tomzo 2012-10-17 (水) 08:37:28
  • こんにちは。何がどうしたのか不具合が、いつの間にか起きなくなっっていて???状態です。お騒がせしました。 -- アーロン 2012-10-19 (金) 00:49:57
  • QHMを始めて2ヶ月ほどですが、こちらのサイトを参考にさせていただいております。有用な情報を公開していただきありがとうございます。追従するメニューを使わせていただき素晴らしい!と感動しました。ところが、&lightbox2()で画像を表示させるページで問題が起きました。「追従するメニュー(改良版)」を導入してから、写真の表示がlightbox2の動作と異なり単純な写真表示ページが開くだけになってしまいました。画像の説明も前後の画像に切り替える矢印も表示されません。QHM Pro会員専用サイトの「lightbox2機能を使って表示する」ページの解説に「(※同じページでbeforescriptプラグインを使用している場合は、beforescriptよりも後に、おまじないを書いてください。)」とあることが影響していると思われますが、回避策はないでしょうか? (QHM Pro 4.91です。) -- 林 2013-01-11 (金) 09:16:26
  • ひとつ上の投稿に補足です。デザインは g_flower01 と biz_lime で確認しました。どちらも同じ現象です。また画像の表示方式では lightbox2 と colorbox の両方で同じ現象となりました。 -- 林 2013-01-11 (金) 17:38:21
  • 林さん 確認してみました。確かに lightbox2で表示が変です。たぶん、両方ともjQueryを使用しているため、それが影響していると思われます。 他にもjQueryを使用したときおかしくなったことがあり、その解決にとても時間がかかりました。結局は、後から入れたjQueryをやめたら正常に戻りました。 今回の件もそれと同じと思われますので、申し訳ありませんが、どちらかのjQueryを やめるしかなさそうです。 -- tomzo 2013-01-17 (木) 23:49:25
  • お忙しい所、ご確認と回答ありがとうございます。心より感謝申し上げます。当面メニューは標準に戻して、lightbox2 を優先させます。QHMのプラグインでない方法で画像をカッコ良く表示する方法が見つかったら、このメニューの方法を使わせていただきます。 -- 林 2013-01-18 (金) 23:37:25
  • フォーラムでは何時も見させて頂いております。 今回はg_wblue01のテンプレートを使っての「スクロールしても追従するメニュー」を取り入れたく挑戦してみましたが、このテンプレート(g_wblue01)では不具合があるのでしょうか?ニュー部分が一緒に下がりナビ2が欠けて表示されます。その原因が特定できずに苦慮しております。 サイト幅は900px メニュー幅23%  コンテンツ幅77%です。 作業としては 二つのjqueryファイルをjpフォルダにアップしました。そして貴サイトのコードをそのままメニューに貼りつけさせて頂きました。 また、違うテンプレート(テストサイト)ではその様な事がありません。出来れば採用したく思い、大変に恐縮ですが、大変にお忙し中ですが、ご指導をどうぞ宜しくお願いします。 -- hiro 2013-03-07 (木) 16:29:04
  • hiroさん こんにちは。g_wblue01のデザインをメニューに追加してみました。 試してみてください。特に問題なく動作しているように思いますが、どうですか? g_wwhite01 も似たようなデザインなので、もし不具合が起きるならこちらもおかしくなると思います。 サイトのURLを教えていただけると解決するかも知れません。 -- tomzo 2013-03-08 (金) 00:28:12
  • tomzo 様 -- hiro 2013-03-08 (金) 11:15:33
  • スクロールしても追従するメニュー を作ろうと思います。【js フォルダ】とは何でしょうか?よろしくお願いします。 -- 和泉周平 2013-07-07 (日) 09:46:16
  • 出来ました。感激です。ありがとうございます。http://rdm1995.co.jp/index.php 今後もよろしくお願いします。 -- 和泉周平 2013-07-07 (日) 10:11:11
  • urlはhttp://rdm1995.co.jp/ -- 和泉周平 2013-07-07 (日) 10:12:32
  • 今日はありがとうございました。設定後、編集支援ツールボタンが表示されなくなってしまいました。復帰方法があれば教えて下さい。よろしくお願いします。 -- 和泉周平 2013-07-07 (日) 18:29:12
  • 和泉周平さん
    こんにちは。多分jQueryがバッティングしておかしな現象になっていると思われます。 私も同様な現象になったことがあり、とても悩みました。 後から、設定したjQueryをやめると正常になると思われます。 今回の場合は、この追従するメニューのjQueryをやめるしか対策はないと思われます。 申し訳ありませんが、このような現象になった場合は、元に戻してください。 -- tomzo 2013-07-08 (月) 00:59:41
  • さっそく、使わさせていただきました。いいですね。ありがとうございました。 -- 丹下佳昭 2013-07-12 (金) 07:39:48
  • jQueryのバッティングですが、当方のサイトでも起きました。QHM4.91です。当面の回避策としては、#beforescript内の「<script src="js/jquery-1.7.1.min.js"></script>」の記述を削除することで正常に動作するようになりました。jQuery1.7.1でなくとも動くようです。一応、当方で使っている他のjQuery関係のツールは正常に動作していますが、使ってないもので正常に動作しないものもあるかもしれません。 -- 浅田 2013-11-15 (金) 15:23:53
  • 度々すいません。「<script src="js/jquery.exflexfixed-0.2.0.js"></script>」は0.3.0にバージョンアップしているので「<script src="js/jquery.exflexfixed-0.3.0.js"></script>」のほうがいいかもしれません。挙動がすこし改良されているようです。当方は0.3.0のほうがしっくりくるので、0.3.0で運用しています。参考まで。 -- 浅田 2013-11-15 (金) 15:27:02
  • 浅田さん
    こんにちは。貴重な情報ありがとうございます。jQueryはいろんなことができておもしろいのですが、何でもかんでも入れたりすると、たまにおかしな現象がおきることがあります。
    最近、当サイトの更新が滞っていますが、今後ともよろしくお願いします。 -- tomzo 2013-11-16 (土) 10:41:33
  • 初めまして。 -- 松田 豊 2014-01-13 (月) 16:44:43
  • 先程は失礼致しました、QHMでホームページを立ち上げてから一年が過ぎましたが、これまでのデザインを一新すべく孤軍奮闘しています。このサイトを見つけて、奥の深さに驚いています。出来れば追従するメニューを設置したいのですが全く分かりません。指定されたファイルをサーバーにupしましたがCSSとjQの関係が理解で来ません。CSSはどこに入るのでしょうか。本当に初心者で申し訳ありません。 -- 松田 豊 2014-01-13 (月) 16:56:06
  • 初めまして、このスクロールして追従するメニューにちなんで、QHMでいうナビ部分を追従する設定をしたいのですが、まったくもってうまく設定ができません。よかったら教えてもらえませんか?お願いします。 -- yamamoto 2015-07-04 (土) 17:13:58
  • 松田さん
    こんにちは。返事が大変遅くなってしまい申し訳ありません。 CSSはスクリプト内に記述してあるので、これをコピーしてそのまま、ナビ2に入れてください。 JavaScriptは jsフォルダに入れてください。 (参考) http://qhmtips.com/index.php?QHM%E3%81%AE%E6%A7%8B%E9%80%A0 -- tomzo 2015-07-29 (水) 23:43:58
  • yamamotoさん
    こんにちは。返事が大変遅くなってしまい申し訳ありませんナビは横に長く、メニュー、メニュー2と被ってしまうので固定にしないと見にくいと思います。 ナビの固定化はやったことがないので難しいですね。すみません。 -- tomzo 2015-07-29 (水) 23:44:26

認証コード(2868)

当ページは役に立ちましたか?

選択肢 投票
たいへん役に立った 29  
ちょっとだけ役に立った 1  
普通 0  
あんまり 0  

powered by QHM 6.0.9 haik
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional