当サイトのヘッダー下にグローバルナビを設置する方法で設置したグローバルナビに、簡単なCSSのコードを追加して更にカスタマイズする例をいくつかご紹介します。
目次
別記事でご紹介しているカスタマイズ方法
「サブメニューを追加」、「ヘッダーの上に移動」、「ヘッダーの上下に設置」の各カスタマイズ方法は別記事にてご紹介しています。
ボタンの左右の区切り線を消す
ボタンの左右の区切り線を無くすには、以下のようなコードをCSSの末尾に追加します。
/* ボタンの左右の区切り線を消す */
.gnav .menu {
border-right: none;
}
.gnav .menu li >a,
.gnav .menu li >span {
border-left: none;
}もともとは、区切り線として、グローバルナビの本体の右側と各ボタンの左側に境界線を表示していましたが、それを無くしています。
左右のボタンが無い部分は消す
画面の端まで伸びる左右のボタンの無い部分のの表示が不要な場合は、以下のようなコードをCSSの末尾に追加します。
/* 左右のボタンが無い部分は消す */
.skin-bgHeader:after {
background: transparent;
}元々は、グローバルナビを設置するために確保したスペースの背景をグローバルナビの本体と同じ色で塗りつぶしていましたが、それを透明に変更しています。
ボタンの区切り線をグラデーションにしてみる
画像のように、ボタンの区切り線をグラデーションにして、あまり主張しすぎないようにしてみます。
以下のようなコードをCSSの末尾に追加して下さい。
/* ボタンの区切り線をグラデーションにしてみる */
#gnav-main {
--gnav-bg: linear-gradient(#6699ff 10%, #bbddff 50%, #6699ff 90%); /* 区切り線のグラデーション */
}
#gnav-main .menu {
border: none;
padding-right: 1px;
}
#gnav-main .menu li >a,
#gnav-main .menu li >span {
border: none;
margin-left: 1px;
}元々は、グローバルナビの本体と左右のボタンが無い部分(グローバルナビ設置用のスペースの背景)を同じ色で塗っていましたが、グローバルナビの本体のみグラデーションに変えています。
また、区切り線の部分を線ではなく余白(paddingやmargin)で確保することで、グローバルナビ本体のグラデーションが線として透けて見えるようにしています。
ボタンに枠線をつけて一つ一つ独立させる
グローバルナビの本体は表示せず、一つ一つのボタンに枠線をつけて独立したボタンを並べたようにしてみます。
以下のようなコードをCSSの末尾に追加して下さい。
/* 一つ一つのボタンに枠線をつけて独立させる */
:root {
--gnav-y: -15px; /* 縦位置調整 */
--gnav-bg: transparent; /* グローバルナビの背景色 */
--gnav-bd: #999999; /* 枠線の色 */
--gnav-btn-fg: #666666; /* ボタンの文字色 */
--gnav-btn-bg: #ffffff; /* ボタンの背景設定 */
}
.skin-bgHeader:after {
margin-bottom: 15px; /* グローバルナビの下に余白を取る */
}
#gnav-main .menu {
border: none;
}
#gnav-main .menu li {
padding:0 3px;
}
#gnav-main .menu li >a,
#gnav-main .menu li >span {
border: 1px solid var(--gnav-bd);
}ボタンとボタンの間に余白を設定し、区切り線を消してボタン毎に外枠の線を付け、標準ナビゲーションバーにくっつかないよう余白を確保しています。
ボタンの色も変えてみました。
まとめ
以上、別記事のヘッダー下にグローバルナビを設置する方法で設置したグローバルナビに、簡単なCSSのコードを追加して更にカスタマイズする例をいくつかご紹介しました。
今後も良さそうなものを思いついたら追加していきたいと思います。
よかったら参考にしてみて下さい。
