Попробуйте следующее: См. Демонстрацию
Нет Bootstrap, Нет jQuery, Нет поставщика . Это только с css и javascript.
- 1-я панель будет прокручиваемой, когда в ней будет достаточно элементов.
- 1-я останется на рабочем столе.
- 1-я панель скрыта в мобильной версии по умолчанию. Будет показана кнопка переключения.
- При нажатии кнопки переключения будет показана 1-я панель.
index. html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>CodePen - A Pen by Motahar</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="content-container">
<div id="left-panel" class="left-nav-wrapper">
<ul class="navigation-panel">
<li class="nav-1 nav-tab active" onclick="openPage(event, 'contentName1')">Tab-1</li>
<li class="nav-2 nav-tab" onclick="openPage(event, 'contentName2')">Tab-2</li>
<li class="nav-3 nav-tab" onclick="openPage(event, 'contentName3')">Tab-3</li>
<li class="nav-4 nav-tab" onclick="openPage(event, 'contentName4')">Tab-4</li>
</ul>
<div class="cross-btn" onclick="showNav()">
<span>X</span>
</div>
</div>
<div class="right-content-wrapper">
<div id="contentName1" class="content right-pan-normal-mode" style="display: block">
<div class="heading">
<h1>Content 1</h1>
</div>
<p>1-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap
into electronic typesetting, remaining essentially unchanged.
</p>
</div>
<div id="contentName2" class="content right-pan-normal-mode">
<div class="heading">
<h1>Content 2</h1>
</div>
<p>2-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap
into electronic typesetting, remaining essentially unchanged.
</p>
</div>
<div id="contentName3" class="content right-pan-normal-mode">
<div class="heading">
<h1>Content 3</h1>
</div>
<p>3-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap
into electronic typesetting, remaining essentially unchanged.
</p>
</div>
<div id="contentName4" class="content right-pan-normal-mode">
<div class="heading">
<h1>Content 4</h1>
</div>
<p>4-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap
into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</div>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
стиль. css
.content-container {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.content-container .left-nav-wrapper {
width: 270px;
height: 100vh;
background: #dfdfdf;
overflow-y: auto;
}
.content-container ul.navigation-panel {
padding: 0px;
margin: 0;
}
.content-container .left-nav-wrapper ul li {
padding: 10px;
list-style: none;
border-bottom: 1px solid gray;
background: #c1c1c1;
cursor: pointer;
}
.content-container .left-nav-wrapper ul li.active {
background: #efefef;
}
.content-container .right-content-wrapper {
width: 100%;
padding-left: 15px;
}
.content-container .right-content-wrapper p {
margin-top: 0px
}
.content-container .right-content-wrapper .content {
display: none;
}
.cross-btn {
display: none;
}
@media (max-width: 560px) {
.content-container {
position: relative;
}
.cross-btn {
display: block;
padding: 5px 8px;
cursor: pointer;
width: 20px;
height: 20px;
background: #dfdfdf;
}
.content-container .left-nav-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
background: #fff0;
position: absolute;
left: -250px;
transition: all 0.5s;
}
.content-container .right-content-wrapper {
margin-left: 25px;
}
ul.navigation-panel {
width: 100%;
background: #dfdfdf;
margin-top: 0;
}
#left-panel {
left: -250px;
}
}
скрипт. js
// Right Pane Active/Hide Content
function openPage(evt, pageName) {
var i, pagecontent, tablinks;
pagecontent = document.getElementsByClassName("right-pan-normal-mode");
for (i = 0; i < pagecontent.length; i++) {
pagecontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("nav-tab");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(pageName).style.display = "block";
evt.currentTarget.className += " active";
}
// Left Pane Active/Hide Nav on Mobile
function showNav() {
var navCss = document.getElementById("left-panel");
if (navCss.style.left === "0px") {
navCss.style.left = "-250px";
} else {
navCss.style.left = "0px";
}
}