Как сделать чтоб при нажатие на кнопку фон затемнялся?

Question

[lemonlimelike]

Значит вот выпадающие меню.

<a href="#" class="touch_menu"><img src="media/image.png" /></a>
		<div class="category">
			<?php
				$categories = mysqli_query($connection,"SELECT * FROM `category`");
					while ( $cat = mysqli_fetch_assoc($categories) )
						{ 
							?>
					<ul class="one">		
						<li class="two"><a href="categorie.php?id=<?php echo $cat['id']; ?>"><?php echo $cat["nameCategory"]; ?></a>
						</li>
					</ul>
					<?php } ?>
		</div>

CSS код к нему(адаптированное меню)

.touch_menu{
	display: none;
	position: absolute;
	right:5%;
	top:2%;
}

@media (max-width:500px) {
	.category{
		display:none;
		position: absolute;
		top:4%;
		right:3%;
		z-index: 3;
	}
	.category ul{
		float:none;
		width:100%;
		column-count: 1;
	}
	.category li{
		background-color: #4c4c4c;
		height:20px;
	}
	.category a{
		padding:10px;
	}
	.touch_menu{display:block;}
}

И как в этом случае сделать затемнение фона при открытие меню?

Answer 1

[Ankhena]

Я же вчера уже вам писала.
При клике добавляете класс, в классе box-shadow.

https://jsfiddle.net/f5qegxo6/

Comments

[beksimusss]

я не был зареган тут. но ты на столько крут, то что я захотел лайкнуть твой ответ. но лайкать могут только зареганые и я зарегался и лайкнул. на столько простое и шикарное решение. спасибо тебе большое, пусть Бог фронтенда и ангелы верстки всегда хранят твои проекты

[Ankhena]

beksimusss, спасибо на добром слове