ハンバーガーメニュー デザインに関する件

Question

ハンバーガーメニューで、動きの部分は完成したのですが、メニューの際、味気のない感じのメニューになってしまいました。そこで、背景色をつけたり、スマホで、メニューを押した際に、色が変わるようなやり方を教えて欲しいです。

<header>
  		<div id="nav-drawer">
      		<input id="nav-input" type="checkbox" class="nav-unshown">
     		<label id="nav-open" for="nav-input"><span></span></label>
      		<label class="nav-unshown" id="nav-close" for="nav-input"></label>
      	<div id="nav-content">
      	<a href="ev_access.html">アクセス</a><br>
		<a href="ev_school.html">紹介</a><br>
		<a href="ev_exp.html">スケジュール</a><br>
		<a href="#">このサイトについて</a>
 	 	</div>

</header>

	.title01 {
  		color: #364e96;/*文字色*/
  		padding: 0.5em 0;/*上下の余白*/
		border-top: solid 3px #364e96;/*上線*/
  		border-bottom: solid 3px #364e96;/*下線*/
		}

		.img_logo{
			max-width: 100%;
			height: 0 auto;
			width: 0 auto;
			text-align: center;
		}

		header {
  			padding:10px;
  			/*background: skyblue;*/
		}

		#nav-drawer {
  			position: relative;
		}

		/*チェックボックス等は非表示に*/
		.nav-unshown {
  			display:none;
		}

		/*アイコンのスペース*/
		#nav-open {
  			display: inline-block;
  			width: 30px;
  			height: 22px;
  			vertical-align: middle;
		}

		/*ハンバーガーアイコンをCSSだけで表現*/
		#nav-open span, #nav-open span:before, #nav-open span:after {
  			position: absolute;
  			height: 3px;/*線の太さ*/
  			width: 25px;/*長さ*/
  			border-radius: 3px;
  			background: #555;
  			display: block;
  			content: '';
  			cursor: pointer;
		}
		#nav-open span:before {
  			bottom: -8px;
		}
		#nav-open span:after {
  			bottom: -16px;
		}

		/*閉じる用の薄黒カバー*/
		#nav-close {
  		display: none;/*はじめは隠しておく*/
  		position: fixed;
  		z-index: 99;
  		top: 0;/*全体に広がるように*/
  		left: 0;
  		width: 100%;
  		height: 100%;
  		background: black;
  		opacity: 0;
 	 	transition: .3s ease-in-out;
		}	

		/*中身*/
		#nav-content {
  			overflow: auto;
  		position: fixed;
  		top: 0;
  		left: 0;
  		z-index: 9999;/*最前面に*/
 		width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  		max-width: 330px;/*最大幅（調整してください）*/
  		height: 100%;
  		background: #fff;/*背景色*/
  		transition: .3s ease-in-out;/*滑らかに表示*/
  		-webkit-transform: translateX(-105%);
  		transform: translateX(-105%);/*左に隠しておく*/
		}

		/*チェックが入ったらもろもろ表示*/
		#nav-input:checked ~ #nav-close {
  			display: block;/*カバーを表示*/
 		 	opacity: .5;
		}

		#nav-input:checked ~ #nav-content {
  			-webkit-transform: translateX(0%);
  			transform: translateX(0%);/*中身を表示（右へスライド）*/
  			box-shadow: 6px 0 25px rgba(0,0,0,.15);
		}

Answer 1

ちょっと今風にするには、HTMLのbrタグを削除した上で以下のCSSを適用してみてください。

#nav-content a {
  display: block;
  text-align: center;
  width: 80%;
  max-width: 300px;
  margin: 1rem auto;
  padding: 0.5rem 0;
  background: #777;
  color: #fff;
  font-famile: sans-serif;
  text-decoration: none
}

あと#nav-contentの部分のbackgroundを#333あたりにすれば良いかと

Answer 2

あと#nav-contentの部分のbackgroundを#333あたりにすれば良いかと

って、どこにありますか？

Comments

[kyoya0819]

本来ここに書くんじゃないんですけど...

えっと、質問者さんにご提示頂いたコードの中に

/*中身*/
#nav-content {
〜〜〜〜〜〜〜〜
〜〜〜省略〜〜〜
〜〜〜〜〜〜〜〜
background: #fff;/*背景色*/
〜〜〜〜〜〜〜〜
〜〜〜省略〜〜〜
〜〜〜〜〜〜〜〜
}

というのがあるはずです。
そこに#fffを#333系に変更して方がいいよって話です

[退会済みユーザー]

実行できました。

ありがとうございます

[退会済みユーザー]

ちなみに、このメニューバーを右側にするにはどうすればいいでしょうか？