Простой JS переключатель меню - PullRequest
Новая
       0

Простой JS переключатель меню

0 голосов
/ 17 февраля 2020

Я довольно новичок в JavaScript и решил закодировать меню, которое открывается / раскрывается при нажатии кнопки и закрывается при повторном нажатии кнопки.

У меня все работает, но я не могу показаться чтобы узнать, почему меню не закрывается.

Вот мой код:

Любая помощь или руководство очень ценится! Я включил мои HTML, CSS и JS файлы. 

let toggleNavStatus = false;

let toggleNav = function (){
    let getSideBar = document.querySelector(".nav-sidebar");
    let getSideBarUl = document.querySelector(".nav-sidebar ul");
    let getSideBarUTitle = document.querySelector(".nav-sidebar span");
    let getSideBarLinks = document.querySelectorAll(".nav-sidebar a");

    if(toggleNavStatus === false){
        getSideBarUl.style.visibility = "visible"; 
        getSideBar.style.width = "295px";    
        getSideBarTitle.style.opacity = "0.5";

        let arrayLenght = getSideBarLinks.length;
        for(let i = 0; i < arrayLenght; i++){
            getSideBarLinks[i].style.opacity = "1";
        }
        toggleNavStatus = true;
  } else if(toggleNavStatus === true){
    getSideBarUl.style.visibility = "hidden"; 
    getSideBar.style.width = "50px";    
    getSideBarTitle.style.opacity = "0";

    let arrayLenght = getSideBarLinks.length;
    for(let i = 0; i < arrayLenght; i++){
        getSideBarLinks[i].style.opacity = "0";
    }
    toggleNavStatus = false;
    }
}
body {
    background-color: #F1F1F1;
}

.nav-main{
    width: 100%;
    height: 60px;
    background-color: #FFF;
    display: flex;
    flex-wrap: wrap;
    z-index: 1000;
    position: fixed;
    top: 0;
}

.btn-toggle-nav{
    width: 60px;
    height: 100%;
    background-color: #f98f39;
    background-size: 50%;
    background-position: center;
    cursor: pointer;
    position: fixed;
    left: 0;
}

.btn-toggle-nav:hover{
    opacity: 0.5;
}

.nav-main ul{
    display: flex;
    flex-wrap: wrap;
    padding-left: 60px;
}

.nav-main ul li{
    list-style: none;
    line-height: 30px;
}

.nav-main ul li a{
    display: block;
    height: 100%;
    padding: 0 10px;
    text-transform: uppercase;
    text-decoration: none;
    color: #111;
    font-family: Arial;
    font-size: 16px;
}
 .nav-sidebar{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 50px;
    padding: 0 5px;
    height: calc(100vh - 60px);
    background-color: #1B1B1B;
    z-index: 1000;
 }

 .nav-sidebar ul{
    padding-top: 15px;
    overflow: hidden;
    visibility: hidden;
 }

 .nav-sidebar ul li{
    line-height: 60px;
    list-style: none;
 }

 .nav-sidebar ul li span, ul li a{
    display: block;
    height: 60px;
    padding: 0 10px;
    text-decoration: none;
    text-transform: uppercase;
    color: #FFF;
    font-family: arial;
    font-size: 16px;
    white-space: nowrap;
    opacity: 0.5;
 }

 .nav-sidebar ul li a:hover{
     background-color: #222;
 }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>ZiGi's Toggle Menu</title>

    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="resetstyle.css">
</head>
<body>
    
    <nav class="nav-main"> 

        <div class="btn-toggle-nav" onclick="toggleNav()"></div>

        <ul>
            <li> <a href="#"> Home</a> </li>
            <li> <a href="#"> Portfolio</a> </li>
            <li> <a href="#"> About Us</a> </li>
            <li> <a href="#"> Gallery</a> </li>
            <li> <a href="#"> Contact</a> </li>
        </ul>

    </nav>

    <aside class="nav-sidebar"> 
        <ul>
            <li> <span>Projects</span></li>
            <li> <a href="#"> Making a Website </a> </li>
            <li> <a href="#"> SEAO Optimizing Video </a> </li>
            <li> <a href="#"> Walking Through The Park </a> </li>
            <li> <a href="#"> Just Another Day</a> </li>
        </ul>

    </aside>

</body>
<script src="main.js"> </script>
</html>

Ответы [ 3 ]

0 голосов
/ 17 февраля 2020

Я нашел свою ошибку.

В моем файле JS в строке 12 есть опечатка при назначении переменной.

let getSideBarUTitle = document.querySelector(".nav-sidebar span");

должно быть

let getSideBarTitle = document.querySelector(".nav-sidebar span");

0 голосов
/ 17 февраля 2020

Я решил это для вас, но это всего лишь c show hide с JavaScript. Вы можете расширить его в любое время, чтобы получить правильный переход.

Примечание: JavaScript скрипт находится в нижняя часть HTML не является секцией JS.

Решение: 

body {
    background-color: #F1F1F1;
}

.nav-main{
    width: 100%;
    height: 60px;
    background-color: #FFF;
    display: flex;
    flex-wrap: wrap;
    z-index: 1000;
    position: fixed;
    top: 0;
}

.btn-toggle-nav{
    width: 60px;
    height: 60px;
    background-color: #f98f39;
    background-size: 50%;
    background-position: center;
    cursor: pointer;
    position: fixed;
    left: 0;
}

.btn-toggle-nav:hover{
    opacity: 0.5;
}

.nav-main ul{
    display: flex;
    flex-wrap: wrap;
    padding-left: 60px;
}

.nav-main ul li{
    list-style: none;
    line-height: 30px;
}

.nav-main ul li a{
    display: block;
    height: 100%;
    padding: 0 10px;
    text-transform: uppercase;
    text-decoration: none;
    color: #111;
    font-family: Arial;
    font-size: 16px;
}
 .nav-sidebar{
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 0 5px;
    height: calc(100vh - 60px);
    background-color: #1B1B1B;
    z-index: 1000;
    
 }

 .nav-sidebar ul{
    padding-top: 15px;
 }

 .nav-sidebar ul li{
    line-height: 60px;
    list-style: none;
 }

 .nav-sidebar ul li span, ul li a{
    display: block;
    height: 60px;
    padding: 0 10px;
    text-decoration: none;
    text-transform: uppercase;
    color: #FFF;
    font-family: arial;
    font-size: 16px;
    white-space: nowrap;
    opacity: 0.5;
 }

 .nav-sidebar ul li a:hover{
     background-color: #222;
 }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>ZiGi's Toggle Menu</title>

    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="resetstyle.css">
</head>
<body>
    
    <nav class="nav-main"> 

        <button class="btn-toggle-nav" onclick="toggleNav()">nav</button>

        <ul>
            <li> <a href="#"> Home</a> </li>
            <li> <a href="#"> Portfolio</a> </li>
            <li> <a href="#"> About Us</a> </li>
            <li> <a href="#"> Gallery</a> </li>
            <li> <a href="#"> Contact</a> </li>
        </ul>

    </nav>

    <aside class="nav-sidebar" id="nav-sidebar" 
    style="display:none"> 
        <ul>
            <li> <span>Projects</span></li>
            <li> <a href="#"> Making a Website </a> </li>
            <li> <a href="#"> SEAO Optimizing Video </a> </li>
            <li> <a href="#"> Walking Through The Park </a> </li>
            <li> <a href="#"> Just Another Day</a> </li>
        </ul>

    </aside>

</body>
<script>
function toggleNav(){
	console.log("Hello");
  var x = document.getElementById("nav-sidebar");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>
</html>
0 голосов
/ 17 февраля 2020

Это скорее проблема HTML/CSS, чем JavaScript. CSS поставляется с селектором :hover, который активирует любые стили оформления, сделанные для этого элемента. Вы можете сгруппировать это с вашими классами, чтобы все работали синхронно c друг с другом одновременно.

Попробуйте это!

https://www.w3schools.com/cssref/sel_hover.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...