システム利用できるWEBページメニューテンプレート

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

先日から、WEBページのメニューサンプルを何回かに渡ってアップしてきましたが、今回はその集大成として、実際にWEBページで使えるバージョンを完成形としてアップします。
 

少し改造すると、Wordpressのテーマとしても使える上、今回のソース内では、外部ライブラリを一切使っていないので、利便性は高い事間違いなしです。
 

注意点としては、ヘッダメニューとサブメニューで、ページ内の機能が多いWEBサイトに向いているテンプレートなので、シンプルにしたいホームページなどでは使わないほうがいいでしょう。
HTMLの箇所を部分的に削除して使ってもいいかもしれませんが、無駄なソースが結構残ってしまうので、ケースバイケースでの利用は自己判断でお願いいたします。
 

デモ

See the Pen
page-theme-1
by YugetaKoji (@geta1972)
on CodePen.

機能説明

ヘッダメニューとサイドメニュー

見た目通りですが、WEBページの画面上部と左部分は、「ファーストビュー」と言われる重要な箇所で、この位置に広告バナーなどを配置して、告知力をアップさせる領域なのですが、一般的にシステム領域では、この領域は、利用頻度の高いメニュー項目を配置します。
 

今回は、細かなレスポンシブシステムに対応させて、1000px以上のPC画面、700px以上の中クラスサイズのPC画面、500px以上のタブレット画面、500px以下のスマートフォン画面。
全部で4パターンのサイズ変更と挙動変更をcssで行っています。
 

アイコンは全てsvg

見た目にこだわりたいため、メニューに使うアイコンやロゴ画像は全てsvgで記述しています。
それもimgタグではなく、svgタグを直接書き込んでいます。
 

これは、cssで画像の色を動的に変更する為にこの仕様にしていますが、ブラウザキャッシュでデータ転送を軽く出来るimgタグを使う場合よりも、毎回ソースとしてデータ転送されてしまうので、出来る限りサイズを絞った形で記述しています。

細かなアニメーション

個別のメニューのマウスオーバーの背景色変更や、サブメニューが開く、閉じる場合の表示などには、アニメーションを付けています。
こうすることで、画面内で何が変わったのかを感覚的に認識することができ、迷子になりにくいメニュー構成ができます。

ソースコード

問題点

実は1点だけ問題が残っておりまして・・・
 

サブメニューが表示する際に、画面からはみ出してしまうものの一部で、はみ出した部分が表示されない箇所があります。
 

サイドメニューの中クラス表示の場合は、画面からはみ出した時にスクロールバーが出るようにしていますが、他の箇所はこの不具合対象箇所です。
数多くのメニューを表示すると、押せないメニューが出てしまうという不具合です。
 

これは”position:fixed”内の”position:absolute”の問題で、基本的にはoverflow:hiddenにデフォルトセットされてしまうのですが、画面メニューのサイズが一定でない事が原因です。
これを解決するには、サブメニューが表示されたタイミングで、サイズを記述する以外に方法が無く、cssだけではどうやら出来なさそうです。
 

でも、サブメニューがない状態や少ない状態で使う分には全く問題なく機能できると思うので、この問題解決したらブログにて完成版としてアップしようと思います。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です