Два сиденав на одной странице работает только один

Question

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

function openNav() {
  document.getElementById("mySidebar").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}
//For second nav
function openNav() {
  document.getElementById("mySidebar2").style.width = "250px";
  document.getElementById("main2").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidebar2").style.width = "0";
  document.getElementById("main2").style.marginLeft= "0";
}

/*Left nav*/
*{
margin: 0;
padding: 0;
}
body {
  font-family: "Lato", sans-serif;
}
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #f3a148;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #000000;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 16px;
  cursor: pointer;
  background-color: #f4b36d;
  color: #000000;
  padding: 10px 15px;
  border: none;
  position: fixed;
  top: 50%;
  left:-30px;
  transform: rotate(-90deg);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  
}

.openbtn:hover {
  background-color: #f3a148;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}
.fa-address-card, .fa-coins, .fa-grin-alt, .fa-envelope{
	position: relative;
	top: 41px;
	left: 5px;
	font-size: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}
/*right nav------*/
*{
margin: 0;
padding: 0;
}
body {
  font-family: "Lato", sans-serif;
}

.sidebar2 {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #f3a148;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar2 a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #000000;
  display: block;
  transition: 0.3s;
}

.sidebar2 a:hover {
  color: #f1f1f1;
}

.sidebar2 .closebtn2 {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn2 {
  font-size: 16px;
  cursor: pointer;
  background-color: #f4b36d;
  color: #000000;
  padding: 10px 15px;
  border: none;
  position: fixed;
  top: 50%;
  right: -30px;
  transform: rotate(90deg);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  
}

.openbtn2:hover {
  background-color: #f3a148;
}

#main2 {
  transition: margin-left .5s;
  padding: 16px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

<footer class="container-fluid footPos">
      <div class="row footer">
        <div class="col-sm-2">
        <!-- right sidenav -->
            <div id="mySidebar2" class="sidebar2">
                <a href="javascript:void(0)" class="closebtn2" onclick="closeNav()">×</a>
                <i class="far fa-address-card"></i><a href="#">Link</a>
                <i class="fas fa-coins"></i><a href="#">Link</a>
                <i class="far fa-grin-alt"></i><a href="#">Link</a>
                <i class="far fa-envelope"></i><a href="#">Link</a>
            </div>
            <div id="main2">
                <button class="openbtn2" onclick="openNav()">☰ Meniu</button>  
            </div>
        <!-- right sidenav end -->
        </div>
        <div class="col-sm-8">
            <h4 class="footTxt"><a href="#" class="footLink">Link</a></h4>
            <h4 class="footTxt"><a href="#" class="footLink">Link</a></h4>
            <h4 class="footTxt">Link</h4>
        </div>
		<div class="col-sm-2">
			<!--left side -->
			<div id="mySidebar" class="sidebar">
				<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
				<i class="far fa-address-card"></i><a href="#">Apie mus</a>
				<i class="fas fa-coins"></i><a href="#">Paslaugos</a>
				<i class="far fa-grin-alt"></i><a href="#">Klientai</a>
				<i class="far fa-envelope"></i><a href="#">Kontaktai</a>
			</div>
			<div id="main">
				<button class="openbtn" onclick="openNav()">☰ Meniu</button>  
			</div>

			<!--left side end-->
		</div>
	  </div> 
</footer>

Я хочу, чтобы обе кнопки работали правильно.

Answer 1

Вы используете одну и ту же функцию openNav для обеих кнопок. Вы можете решить эту проблему, передав параметр navid в параметре, и можете использовать этот параметр в getElementById, чтобы отобразить скрытую навигацию.

См. Ниже рабочий код.

        function openNav(sidebarId, main) {
            document.getElementById(sidebarId).style.width = "250px";
            document.getElementById(main).style.marginLeft = "250px";
        }

        function closeNav(sidebarId, main) {
            document.getElementById(sidebarId).style.width = "0";
            document.getElementById(main).style.marginLeft = "0";
        }

       /*Left nav*/
        
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: "Lato", sans-serif;
        }
        
        .sidebar {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #f3a148;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
        }
        
        .sidebar a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #000000;
            display: block;
            transition: 0.3s;
        }
        
        .sidebar a:hover {
            color: #f1f1f1;
        }
        
        .sidebar .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }
        
        .openbtn {
            font-size: 16px;
            cursor: pointer;
            background-color: #f4b36d;
            color: #000000;
            padding: 10px 15px;
            border: none;
            position: fixed;
            top: 50%;
            left: -30px;
            transform: rotate(-90deg);
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .openbtn:hover {
            background-color: #f3a148;
        }
        
        #main {
            transition: margin-left .5s;
            padding: 16px;
        }
        
        .fa-address-card,
        .fa-coins,
        .fa-grin-alt,
        .fa-envelope {
            position: relative;
            top: 41px;
            left: 5px;
            font-size: 20px;
        }
        /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
        
        @media screen and (max-height: 450px) {
            .sidebar {
                padding-top: 15px;
            }
            .sidebar a {
                font-size: 18px;
            }
        }
        /*right nav------*/
        
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: "Lato", sans-serif;
        }
        
        .sidebar2 {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            right: 0;
            background-color: #f3a148;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
        }
        
        .sidebar2 a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #000000;
            display: block;
            transition: 0.3s;
        }
        
        .sidebar2 a:hover {
            color: #f1f1f1;
        }
        
        .sidebar2 .closebtn2 {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }
        
        .openbtn2 {
            font-size: 16px;
            cursor: pointer;
            background-color: #f4b36d;
            color: #000000;
            padding: 10px 15px;
            border: none;
            position: fixed;
            top: 50%;
            right: -30px;
            transform: rotate(90deg);
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .openbtn2:hover {
            background-color: #f3a148;
        }
        
        #main2 {
            transition: margin-left .5s;
            padding: 16px;
        }
        /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
        
        @media screen and (max-height: 450px) {
            .sidebar {
                padding-top: 15px;
            }
            .sidebar a {
                font-size: 18px;
            }
        }

<footer class="container-fluid footPos">
        <div class="row footer">
            <div class="col-sm-2">
                <!-- right sidenav -->
                <div id="mySidebar2" class="sidebar2">
                    <a href="javascript:void(0)" class="closebtn2" onclick="closeNav('mySidebar2', 'main2')">×</a>
                    <i class="far fa-address-card"></i><a href="#">Link</a>
                    <i class="fas fa-coins"></i><a href="#">Link</a>
                    <i class="far fa-grin-alt"></i><a href="#">Link</a>
                    <i class="far fa-envelope"></i><a href="#">Link</a>
                </div>
                <div id="main2">
                    <button class="openbtn2" onclick="openNav('mySidebar2', 'main2')">☰ Meniu</button>
                </div>
                <!-- right sidenav end -->
            </div>
            <div class="col-sm-8">
                <h4 class="footTxt"><a href="#" class="footLink">Link</a></h4>
                <h4 class="footTxt"><a href="#" class="footLink">Link</a></h4>
                <h4 class="footTxt">Link</h4>
            </div>
            <div class="col-sm-2">
                <!--left side -->
                <div id="mySidebar" class="sidebar">
                    <a href="javascript:void(0)" class="closebtn" onclick="closeNav('mySidebar', 'main2')">×</a>
                    <i class="far fa-address-card"></i><a href="#">Apie mus</a>
                    <i class="fas fa-coins"></i><a href="#">Paslaugos</a>
                    <i class="far fa-grin-alt"></i><a href="#">Klientai</a>
                    <i class="far fa-envelope"></i><a href="#">Kontaktai</a>
                </div>
                <div id="main">
                    <button class="openbtn" onclick="openNav('mySidebar', 'main2')">☰ Meniu </button>
                </div>
                <!--left side end-->
            </div>
        </div>
    </footer>

Answer 2

Вы не разделяли свои функции в JavaScript , они названы одинаково. Переименовать те

function openNav() {
  document.getElementById("mySidebar").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}
//For second nav
function openNav2() {
  document.getElementById("mySidebar2").style.width = "250px";
  document.getElementById("main2").style.marginLeft = "250px";
}

function closeNav2() {
  document.getElementById("mySidebar2").style.width = "0";
  document.getElementById("main2").style.marginLeft= "0";
}

/*Left nav*/
*{
margin: 0;
padding: 0;
}
body {
  font-family: "Lato", sans-serif;
}
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #f3a148;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #000000;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 16px;
  cursor: pointer;
  background-color: #f4b36d;
  color: #000000;
  padding: 10px 15px;
  border: none;
  position: fixed;
  top: 50%;
  left:-30px;
  transform: rotate(-90deg);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  
}

.openbtn:hover {
  background-color: #f3a148;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}
.fa-address-card, .fa-coins, .fa-grin-alt, .fa-envelope{
	position: relative;
	top: 41px;
	left: 5px;
	font-size: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}
/*right nav------*/
*{
margin: 0;
padding: 0;
}
body {
  font-family: "Lato", sans-serif;
}

.sidebar2 {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #f3a148;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar2 a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #000000;
  display: block;
  transition: 0.3s;
}

.sidebar2 a:hover {
  color: #f1f1f1;
}

.sidebar2 .closebtn2 {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn2 {
  font-size: 16px;
  cursor: pointer;
  background-color: #f4b36d;
  color: #000000;
  padding: 10px 15px;
  border: none;
  position: fixed;
  top: 50%;
  right: -30px;
  transform: rotate(90deg);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  
}

.openbtn2:hover {
  background-color: #f3a148;
}

#main2 {
  transition: margin-left .5s;
  padding: 16px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

<footer class="container-fluid footPos">
      <div class="row footer">
        <div class="col-sm-2">
        <!-- right sidenav -->
            <div id="mySidebar2" class="sidebar2">
                <a href="javascript:void(0)" class="closebtn2" onclick="closeNav2()">×</a>
                <i class="far fa-address-card"></i><a href="#">Link</a>
                <i class="fas fa-coins"></i><a href="#">Link</a>
                <i class="far fa-grin-alt"></i><a href="#">Link</a>
                <i class="far fa-envelope"></i><a href="#">Link</a>
            </div>
            <div id="main2">
                <button class="openbtn2" onclick="openNav2()">☰ Meniu</button>  
            </div>
        <!-- right sidenav end -->
        </div>
        <div class="col-sm-8">
            <h4 class="footTxt"><a href="#" class="footLink">Link</a></h4>
            <h4 class="footTxt"><a href="#" class="footLink">Link</a></h4>
            <h4 class="footTxt">Link</h4>
        </div>
		<div class="col-sm-2">
			<!--left side -->
			<div id="mySidebar" class="sidebar">
				<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
				<i class="far fa-address-card"></i><a href="#">Apie mus</a>
				<i class="fas fa-coins"></i><a href="#">Paslaugos</a>
				<i class="far fa-grin-alt"></i><a href="#">Klientai</a>
				<i class="far fa-envelope"></i><a href="#">Kontaktai</a>
			</div>
			<div id="main">
				<button class="openbtn" onclick="openNav()">☰ Meniu</button>  
			</div>

			<!--left side end-->
		</div>
	  </div> 
</footer>