Simplicity2グローバルナビメニューのカスタマイズサンプル4個+α

2017-06-042018-12-11Web制作

こんにちは、とみーです。

Simplicity2のスキンを作っていたのですが、あっちこっち手を加えていて完成が程遠く、「一体いつになったら出来上がるんだ」という状態に陥りました。笑

完成が遠いとやる気が削がれる、ホントに。

というわけでモチベーションを保つためにサクッと出来上がるグローバルナビメニューを色々と作ってみました。

メニューデザインが変わるだけでも印象がだいぶ変化するので、是非お試しください。

設定方法は、ダッシュボード → 外観 → style.cssに下記のソースコードをコピペするだけです。

色は全てスタイルシート内で設定してますので、デザインそのままでお好みの色にご自身で変更することが可能です。
#から始まる6桁（もしくは3桁）の英数字の箇所を変更すればOKです。

色見本と配色サイト - color-sample.com

More than 16 million colors

https://www.color-sample.com/

Contents

1. Simplicity2グローバルナビメニューカスタマイズサンプル
2. あとがき

Simplicity2グローバルナビメニューカスタマイズサンプル

上下2重線

CSS

#navi ul {
	background-color: #fff;
	border: none;
	border-top: 3px solid #ddd;
	border-bottom: 3px solid #ddd;
	border-radius: 0px;
	padding: 0px;
	position: relative;
}

#navi .menu > ul:before {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	content: '';
	display: block;
	margin: 2px 0px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

#navi ul li {
	padding: 3px 0px;
}

#navi ul li a {
	padding: 10px;
	transition: background-color .3s linear;
}

#navi ul li a:hover{
	transition: background-color .3s linear;
}

#navi .sub-menu li, #navi .children li {
	padding: 0px;
	height: 40px;
}

2段組（上段にアイコン）

CSS

#navi ul {
	background-color: #fff;
	border: none;
	border-radius: 0px;
	padding: 0px;
	position: relative;
}

#navi .menu > ul > li:before {
	content: '\f103';
	font-family: 'FontAwesome';
	font-size: 20px;
	display: inline-block;
	margin: auto;
	position: absolute;
	top: 10px;
	left: 50%;
	margin-left: -7px;
}

#navi ul li {
	padding: 3px 0px;
}

#navi ul > li a {
	padding: 30px 10px 10px 10px;
	transition: background-color .3s linear;
}

#navi ul li li a, #navi ul li li li a {
	padding: 10px;
	transition: background-color .3s linear;
}

#navi ul li a:hover{
	transition: background-color .3s linear;
}

#navi .sub-menu li, #navi .children li {
	padding: 0px;
	height: 40px;
}

ヘッダーを単色にしてグローバルナビメニューも同じ色にするとよりオシャレになるかも。

上記のコードの後にこちらのコードを加えてください。

CSS

#header, #navi, #navi ul {
	background-color: #e1d0b4;
}

サンプルは全て同じアイコンですが、メニューごとにアイコンを変更することも出来ます（後日別記事にて手順作成予定）

丸と線

CSS

#navi ul {
	background: #fff;
	border: none;
	border-bottom: 1px solid #555;
	border-radius: 0px;
	padding: 0px;
	position: relative;
}

#navi .menu > ul > li:before {
	color: #555;
	content: '\f111';
	font-family: 'FontAwesome';
	font-size: 16px;
	display: inline-block;
	margin: auto;
	position: absolute;
	bottom: -9px;
	left: 50%;
	margin-left: -5px;
}


#navi ul > li a {
	padding: 10px 10px 10px 10px;
	transition: background-color .3s linear;
}

#navi ul li li a, #navi ul li li li a {
	padding: 10px;
	transition: background-color .1s linear;
}

#navi ul li a:hover{
	transition: background-color .1s linear;
}

#navi .sub-menu li, #navi .children li {
	padding: 0px;
	height: 40px;
}

色とアイコンを変えると女性らしさが出ますね。

CSS

#navi ul {
	border-bottom: 1px solid #c9d744;
}

#navi .menu > ul > li:before {
	color: #dd9cb4;
	content: '\f069';
}

リボン

CSS

@media screen and (min-width: 1110px){
	#navi {
		margin-bottom: 30px;
	}
	#navi-in {
		position: relative;
		z-index: 3;
	}
	#navi-in:before, #navi-in:after {
		border: 20px solid transparent;
		content: "";
		display: block;
		position: absolute;
		top: 10px;
 		z-index: -1;
	}
	#navi-in:before {
		border-right-color: #D0394D;
		left: -20px;
	}
	#navi-in:after {
		border-left-color: #D0394D;
		right: -20px;
	}
	#navi ul {
		border-radius: 0px;
	}
	.menu {
		position: relative;
	}
	.menu:before, .menu:after {
		border-style: solid;
		border: 20px solid #DA6272;
		content: "";
		display: block;
		position: absolute;
		bottom: -20px;
		z-index: -2;
	}
	.menu:before {
		border-right-width: 30px;
		border-left-color: transparent;
		left: -30px;
	}
	.menu:after {
		border-left-width: 30px;
		border-right-color: transparent;
		right: -30px;
	}
}

CSSではリボンの折り返しと端しか設定していないため、メニュー部分の色はカスタマイザーで設定してください。