サイドバーに固定したグローバルナビのレイアウトを画面の高さに合わせて調整する方法
2015.06.04
WEB制作のこと
先日、甲子園口の居酒屋さんでサワガニの唐揚げを頂きました。人生初です。美味かった。何のひねりもない感想ですが、いい感じに酔っていたのでそれ以上は覚えていません。サワガニさん、すみません。
本題に入ります。
スクロールしても画面上部に固定されるような追従型のグローバルナビを設置した場合、常に主要コンテンツへのリンクが表示されるというメリットはありますが、一方でメインコンテンツの縦方向の表示領域が狭くなるというデメリットもあります。
PCの画面は一般的に縦の高さよりも横幅の方が広いため、ナビゲーションをサイドバーにFixedで固定し配置することで、メインコンテンツの表示領域を最大限に確保しつつ、主要コンテンツへの導線の強化も図ることができます。
しかし、ナビゲーションボタンはもちろんのこと、ロゴやバナーなどといった要素を詰め込みすぎると、ディスプレイの高さによっては表示しきれなかったり、要素が途中で切れてしまうこともあります。
今回はそんな時に役立つ、ディスプレイの高さに合わせてレイアウトを調整するTIPSを紹介したいと思います。
jQueryでウィンドウの高さに合わせて要素にclassを付加
jQueryを使って画面の高さを取得し、条件によって要素にclassを付加したり外したりする方法です。
jQuery
画面の高さが680px以下の時にbody要素に”height-min”というclassを付加します。
※切り替えを行う高さやclass名は適宜変更してください。
function classHeight(){
var winH = $(window).height();
var elmBody = $('body');
if( winH <= 680 ){
//ウィンドウの高さが680px以下のとき
elmBody.addClass("height-min");
} else {
//ウィンドウの高さが681px以上のとき
elmBody.removeClass("height-min");
}
}
classHeight();
$(window).resize(function(){
//ウィンドウがリサイズされたときにも実行
classHeight();
});
CSS
body要素に”min-height”というclassが付いている時と付いていない時とでcssを変更します。
※セレクタの”.selector”は適宜書き換えてください。
.selector {
/* ウィンドウの高さが681px以上のときのcss */
}
.height-min .selector {
/* ウィンドウの高さが680px以下のときのcss */
}
CSS3のメディアクエリで画面の高さに合わせてCSSを切り替える
メディアクエリはレスポンシブデザインでブラウザの横幅に合わせてレイアウトの切り替えを行う時に使用しますが、ブラウザの高さによっても切り替える事が可能です。メディアクエリに対応しているブラウザのみを対象とする場合はこっちのほうが簡単ですね。
※セレクタの”.selector”は適宜書き換えてください。
.selector {
/* ウィンドウの高さが681px以上のときのcss */
}
@media (max-height: 680px) {
.selector {
/* ウィンドウの高さが680px以下のときのcss */
}
}
グローバルナビをサイドバーに固定しているウェブデザインの事例紹介
ついでに大手企業や学校のウェブサイトでサイドメニューにグローバルナビを配置している事例をいくつか紹介します。
BEAMSオフィシャルサイト
トヨタ自動車株式会社 公式企業サイト
メディアクエリで要素の上下のpaddingを切り替えていますね。
京都造形芸術大学 芸術学部 通信教育部
jQueryで高さに合わせてclassを付加しています。
株式会社リブセンス
三菱商事
http://www.mitsubishicorp.com/jp/ja/
そういえば、昔はサイドにグローバルナビが配置してあって、フレームを使ってコンテンツ管理してるサイトが多かったですね。専門学校時代の自分も得意気にそんなサイトを作っていた事も今では良い思い出です。
話は戻りますが、サワガニに興味が湧いたので少し調べてみると、サワガニは日本の固有種で水質の綺麗な川を好んで住処にし、河川の水質判定の指標にもなるらしいです。よくイラストなんかで見かける、右のはさみが左に比べて少し大きいやつは雄らしいです。ちなみに、養殖も行われているそうで、僕は見たことないですが、食料品店などでもたまに売っているみたいです。
というわけで、最後はサワガニの唐揚げの写真でお別れです。
