Iyigunler arkadaslar internetten buldugum mobil uyumlu yan paneli/swiperi siteme aktarmak istiyorum ama bir turlu beceremedim. Istedigim sey yan paneli acip kapama tusunun oraya duz bir menu alani eklemek. Yani en uste yan menuyu acip kapatma tusunun yanina duz bir navbar/menu eklemek istiyorum bunu nasil yapabilirim acaba?

<script></script>
<script></script>
<script></script>

Menu slide

deneme

Content slide

<script>
var menuButton = document.querySelector('.menu-button');
var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
initialSlide: 1,
resistanceRatio: 0,
slideToClickedSlide: true,
on: {
init: function () {
var slider = this;
menuButton.addEventListener('click', function () {
if (slider.activeIndex === 0) {
slider.slideNext();
} else {
slider.slidePrev();
}
}, true);
},
slideChange: function () {
var slider = this;
if (slider.activeIndex === 0) {
menuButton.classList.add('cross');
} else {
menuButton.classList.remove('cross');
}
},
}
});
</script>








html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;

/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.menu {
min-width: 100px;
width: 70%;
max-width: 320px;

background-color: #2C8DFB;
color: #fff;
}
.content {
width: 100%;
}

.menu-button {
position: absolute;
top: 0px; left: 0px;

padding: 15px;

cursor: pointer;

-webkit-transition: .3s;
transition: .3s;

background-color: #2C8DFB;

/*margin: 14px;
border-radius: 5px;*/
}
.menu-button .bar:nth-of-type(1) {
margin-top: 0px;
}
.menu-button .bar:nth-of-type(3) {
margin-bottom: 0px;
}

.bar {
position: relative;
display: block;

width: 50px;
height: 5px;

margin: 10px auto;
background-color: #fff;

border-radius: 10px;

-webkit-transition: .3s;
transition: .3s;
}

.menu-button:hover .bar:nth-of-type(1) {
-webkit-transform: translateY(1.5px) rotate(-4.5deg);
-ms-transform: translateY(1.5px) rotate(-4.5deg);
transform: translateY(1.5px) rotate(-4.5deg);
}
.menu-button:hover .bar:nth-of-type(2) {
opacity: .9;
}
.menu-button:hover .bar:nth-of-type(3) {
-webkit-transform: translateY(-1.5px) rotate(4.5deg);
-ms-transform: translateY(-1.5px) rotate(4.5deg);
transform: translateY(-1.5px) rotate(4.5deg);
}

.cross .bar:nth-of-type(1) {
-webkit-transform: translateY(15px) rotate(-45deg);
-ms-transform: translateY(15px) rotate(-45deg);
transform: translateY(15px) rotate(-45deg);
}
.cross .bar:nth-of-type(2) {
opacity: 0;
}
.cross .bar:nth-of-type(3) {
-webkit-transform: translateY(-15px) rotate(45deg);
-ms-transform: translateY(-15px) rotate(45deg);
transform: translateY(-15px) rotate(45deg);
}
.cross:hover .bar:nth-of-type(1) {
-webkit-transform: translateY(13.5px) rotate(-40.5deg);
-ms-transform: translateY(13.5px) rotate(-40.5deg);
transform: translateY(13.5px) rotate(-40.5deg);
}
.cross:hover .bar:nth-of-type(2) {
opacity: .1;
}
.cross:hover .bar:nth-of-type(3) {
-webkit-transform: translateY(-13.5px) rotate(40.5deg);
-ms-transform: translateY(-13.5px) rotate(40.5deg);
transform: translateY(-13.5px) rotate(40.5deg);
}