[HTMLパーツ] メニュー項目サンプル #1

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

HTMLの部品を組み合わせて作るホームページはショボい、という声を周囲のエンジニアからよく聞きますが、ショボいかどうかは最終的に仕上げるクリエーターの腕次第だと言うことが考えられます。
 

もはやコピペでしかコーディングしていないプログラマーも、デザインが苦手なプログラマーも、一生懸命自分流を貫いているエンジニアも、ショボくなく素敵なWEBシステム(サービスや、ホームページ)を開発することを目的としているのは間違いありません。
 

とりあえず、僕個人的には「自分用WEBページパーツ」というのをストックして、デザインを少しずつ変えながら利用しているのですが、そういうストックをたくさん持っているほど作業効率は増します。
 

確かにコピペ作業といえばそうかもしれませんが、手打ちする作業を簡略化できる要素として行っているのでHTMLパーツの自分ライブラリは効率を求めるエンジニアにオススメできます。
 

というわけで、オレライブラリの紹介を小出しにしていく予定ですが、今回はホームーページには不可欠なヘッダメニューですが、サブメニューが表示するモノを構築しようとすると意外とめんどくさいので、簡素な作りの構造を作っておくことで、あとはclassやidを追加してシステム対応すればいい状態になります。
 

そんなメニューのサンプルのソースコードを紹介します。

メニューサンプル-DEMO

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


 

機能説明

ホームページの上部に固定するタイプのヘッダメニューで、URLでリンクのものと、プルダウンメニューの混在するものです。
 

機能が階層化されているようなWEBシステムなどのヘッダで利用すると便利に使えますね。
 

プルダウンするメニューには、▼マークをつけて階層が有ることを表し、改装メニューの表示。非表示は、若干のcssアニメーションをつけて存在感を表しています。
 

クリック判定でdata-view属性を切り替えることで設置されているcssでの表示処理やアニメーション処理を行っています。
 

また、サブメニューを表示している状態で、画面のそれ以外の場所をクリックした場合に、サブメニューを閉じるという処理を追加しています。
 

ソースコード

 

 

 

解説

HTMLはclass=”menu-bar”というヘッダの親要素に対して、それ以下のタグはシンプルな状態で設置できるようにしています。
 

見てもらうとわかりますが、LIの中にULが存在していると階層ありという処理をして、JSがページ読み込み時に属性フラグを設置してます。
 

CSSでの注意点は、コピペで利用する時に、ソース上部にある2つの基本コードは省いたほうがコンフリクトしなくなります。
※今回はデモ用でつけているだけです。
 

改良ポイント

このツールのデメリットはJS処理をしているのですが、CSSのみでこうした処理ができる仕組みであれば、サイトのスペック向上をすることが可能になります。
 

CSSだけ版というものを次回以降にサンプルで紹介したいと思います。

Leave a Reply

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