Как реализовать боковую панель, которая не открывает новую сторону за клик? - PullRequest
Новая
       32

Как реализовать боковую панель, которая не открывает новую сторону за клик?

0 голосов
/ 02 мая 2020

Я хочу иметь боковую панель, которая должна открывать новый вид, но я не хочу открывать новую страницу. Моя боковая панель всегда одна и та же, и я не хочу копировать ее на все остальные страницы. Если вам нужен пример, нажмите на эту фотографию.

Так что я не хочу менять сайт, на котором сейчас находится пользователь, я хочу иметь только другой контент или другие функции, которые вы можете сделать на этом сайте.

Если это возможно (и как), пожалуйста, напишите мне

Спасибо

1 Ответ

0 голосов
/ 02 мая 2020

Я подготовил небольшую рабочую демонстрацию боковой панели JS, вы можете добавить хороший css эффект, такой как анимация, и улучшенный стиль для элементов списка. Надеюсь, это поможет. 

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sidebar demo</title>
  <style>
	#sidebar {
		position: fixed;
		padding: 0px;
		height: 100%;
		background: orange;
		left: -200px;
		width: 200px;
	}
	
	#sidebar.active {
		left: 0px;
	}
	
	#sidebar ul li {
		padding: 15px 10px;
		lis-style: none;
	}
	
	.hamburger-btn {
		position: absolute;
		left: 230px;
		top: 20px;
	}
	
	.hamburger-btn span {
		margin: 5px 0px;
		height: 5px;
		width: 30px;
		display: block;
		background: black;
	}
	
  </style>
</head>
<body>
	<div id="sidebar" class="active">
		<div class="hamburger-btn" onclick="togglesidebar()">
			<span></span>
			<span></span>
			<span></span>
		</div>
		<ul>
			<li>Home</li>
			<li>About</li>
			<li>Contact</li>
		</ul>
	</div>
	
	<div id="content">
		
	</div>
	<script>
		function togglesidebar() {
		
			document.getElementById("sidebar").classList.toggle("active");
		
		}
	</script>
</body>
</html>
...