CSSとJavascriptでNavigation 編

CSSとJavascriptを使ったNavigationMenuを作ってみました。
これの構造の発想の原作は Mary Lou / Slide Down Box Menu
原案のデモサンプル http://tympanus.net/Tutorials/SlideDownBoxMenu/
公開されたのはかなり以前(2010年頃)になりますが、とても気に入った作品です。
構造的に改造がしやすい作り方になっています。なかなか才能の有る方ですね。
才能の無い私は、先ずまねて改造を試みる・・何かが見えてくる・・違う構造を試してみる・・結果全く違う物が出来る・・・かも知れない。

Navigationにあまり凝り過ぎると、少々くどく成ってしまいますから、程々にしておくべきだとは思います(これは少しくどい部類ですね)。
シンプル・イズ・ベストが基本理念かと思いますが、戯れてみるのも面白いものです。

最近ではCSSのみのNavigation が主流ですが、Javascript を加えると取り回しが楽な場合も有ります。

デモと概要

サンプルDEMOは、元々参考にしたNavigationとは一見全く別物になっています。
幾つか変形させて作っている内に思いついたものを形にしてみました。
コードの構成にはかなりムダな部分が多いと思いますが、私の場合は本職では無いので、とりあえず動かす事が優先事項なので悪しからず。

構成を考えていく中でレスポンスに対応しやすいように、サイズを絶対値では無く相対比(%)で構成しています。
これの手法にももう少し改良の余地は有ると思いますが、とりあえず動かすことが一歩だと・・・

HD解像度(1920X1080)がベースですが、タブレット,スマホにも対応します。
ベンダープレフィックスを付与していませんので、正常作動しないブラウザーが存在します。

Tuchデバイス(Mobile Tablet 等)でCSSの[hover][focus][active]等を有効化させるには、HTMLタグにontouchstart="" を付与させる事で解決します。(HTMLソースをご参照ください)

DEMO ページへ

サンプルでは五角形が基本構図となっていますが、各パーツの位置関係を計算するのが面倒なので、Illustratorによる作図から割り出していますので、数学的に算出した値とは少しズレが有ると思います。
(算数は得意では無いので勘弁してやって下さい)

構成・イメージは、概念図をご参照ください。
*算数の計算をしないで作図で求めるってカンタン!! でも皆さんはちゃんと算数で計算してくださいね。
Javascript の冒頭コードにつきましては、background-color を変更するためのスクリプトです。(どこから引用したかは忘れてしまいました)
jquery.color.jsを使えば不要となります。jquery を使わないコーディングの為に備忘録に加えてあります。

実際に各モダンブラウザで再現してみると、思惑通りに動いてくれるたのは、検証では[Chrome][Opera][Firefox]だけでした。(制作当時)
もっと多くのブラウザで動かすためには、プラスアルファの記述が必要となります。
更なる詳細は[CSS3アニメーション]について調べていただきたいと思います。

HTML

CSS

3.CSSとJavascriptでNavigation 編

既に有ったものをアレンジしてみました