即日上位表示サービスです
3日以内にトップ・ページに上がってこなければ全額返金致します。 ワードプレスのカスタマイズの 20万円相当のホームページを 全て差し上げます。 ドメイン無料 サーバー代無料 あり得ないサービス

グローバルメニューをクリックするとグローバルメニュー以下へ飛ぶ方法

                                        ご訪問有難うございます。

Stop the world

ユーザビリティーを考えて

私が、作っているワードプレスのホームページなんですが、

         ⇓

http://landmark758hils.info/

 

店内写真を全面に大きく出してスライドショーをすることによって、IMPACTがあるホームページになりました。

しかし、ホームページ訪問者の方はグローバルメニューをクリックするたびに店内画像を目にすることになりますので、そのたびにスクロールしていただくのは申し訳ないですね。それはいけません。

そこで、グローバルメニューやフッターリンクをクリックするとすべてグローバルメニュー以下が表示されるようにしたいと思います。

カスタムメニューを使い「#global-nav」へリンクする方法でも可能ですが、修正が多岐に渡るため、header.php の「」の後に、下記のソースを追記して、対応することにしました。

 

<?php if (!is_front_page()) { ?>
<script type=”text/javascript”>
$(function() {
var n = window.location.href.slice(window.location.href.indexOf(‘?’) + 4);
var p = $(“#global-nav”).offset().top;
$(‘html,body’).animate({ scrollTop: p }, ‘slow’);
return false;
});
</script>
<?php } ?>


 

これで、グローバルメニュー以下に飛んでくれますので、良いかと思います。

ついでに、グローバルメニューの背景色を黒色#000から青色#0000ffに変更して目立たせるようにしました。

変更場所はdesign.phpの以下の箇所になります。

/*——————————————————–
グローバルナビ
——————————————————–*/

#global-nav{
background: url(./images/common/bg-menu.png) center bottom repeat-x #0000ff;
border-bottom: 1px solid #6a5734;
}

 

 

以上です。

photo by: dollen
» «

コメントを残す

サブコンテンツ

飯沼祐志

 

 

  飯沼祐志: 株式会社マルク代表

 

あなたの疑問に即時対応致します。

チャットで問い合わせ

お気軽にどうぞ。

 

自己紹介はコチラ

全記事一覧

Twitter でフォロー

変更後

このページの先頭へ