Почему я не могу заставить мою боковую навигационную панель появляться и исчезать - PullRequest
Новая
       2

Почему я не могу заставить мою боковую навигационную панель появляться и исчезать

0 голосов
/ 21 сентября 2019

Пожалуйста, прости меня, но я вставлю сюда весь свой код, чтобы кто-то мог определить ошибку.Я пробовал последние пару дней безуспешно.Просто хочу, чтобы моя навигационная панель появлялась и исчезала при нажатии.Вот и все, СПАСИБО заранее. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nav Bar</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
     @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
    </style>
</head>
<body>   
    <nav class="menu">
    <header>Menu <span>×</span></header>
    <ol>
        <li class="menu-item"><a href="#0">Home</a></li>
        <li class="menu-item"><a href="#0">About</a></li>
        <li class="menu-item">
            <a href="#0">Widgets</a>
            <ol class="sub-menu">
                <li class="menu-item"><a href="#0">Grocerry</a></li>
                <li class="menu-item"><a href="#0">Discount</a></li>
                <li class="menu-item"><a href="#0">Huge Sale</a></li>
            </ol>
        </li>
        <li class="menu-item">
            <a href="#0">Juice</a>
            <ol class="sub-menu">
                <li class="menu-item"><a href="#0">Russi</a></li>
                <li class="menu-item"><a href="#0">Paneer Pyaza</a></li>
                <li class="menu-item"><a href="#0">Rasbhari</a></li>
            </ol>
        </li>
        <li class="menu-item"><a href="#0">Contact</a></li>
    </ol>
    <footer><button aria-label="Toggle Menu">Toggle</button></footer>
</nav> 
<script src="js/jquery-3.4.1.min.js"></script>
<script>

   var $els = $('.menu a, .menu header');
var count = $els.length;
var grouplength = Math.ceil(count/3);
var groupNumber = 0;
var i = 1;
$('.menu').css('--count',count+'');
$els.each(function(j){
    if ( i > grouplength ) {
        groupNumber++;
        i=1;
    }
    $(this).attr('data-group',groupNumber);
    i++;
});

$('.menu footer button').on('click',function(e){
    e.preventDefault();
    $els.each(function(j){
        $(this).css('--top',$(this)[0].getBoundingClientRect().top + ($(this).attr('data-group') * -15) - 20);
        $(this).css('--delay-in',j*.1+'s');
        $(this).css('--delay-out',(count-j)*.1+'s');
    });
    $('.menu').toggleClass('closed');
    e.stopPropagation();
});

// run animation once at beginning for demo
setTimeout(function(){
    $('.menu footer button').click();
    setTimeout(function(){
        $('.menu footer button').click();
    }, (count * 100) + 500 );
}, 1000);    
</script>
</body>
</html>


* {
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    color: #333;
    font-size: 100%;
    line-height: 1.5;
  }
  body {
    margin: 0;
    background-size: cover;
  }
  nav {
    --duration: .5s;
    --easing: ease-in-out;
    position: relative;
    width: 220px;
    margin: 20px;
  }
  nav ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  nav li {
    margin: -4px 0 0 0;
  }
  nav a {
    display: block;
    text-decoration: none;
    background: #fff;
    transform-origin: 0 0;
    transition: transform var(--duration) var(--easing), color var(--duration) var(--easing);
    transition-delay: var(--delay-out);
    border-radius: 4px;
    padding: 1em 1.52em;
  }
  nav a:hover {
    background: #efefef;
  }
  nav .sub-menu a {
    font-size: .9em;
    color: #666666;
    border-left: 2em solid white;
    padding: .75em;
    background: linear-gradient(to right, #dddddd 2px, #ffffff 2px);
  }
  nav .sub-menu a:hover {
    background: linear-gradient(to right, #dddddd 2px, #efefef 2px);
  }
  nav header {
    font-weight: 600;
    display: block;
    background: rgba(255, 255, 255, 0.5);
    transform-origin: 0 0;
    transition: transform var(--duration) var(--easing), color var(--duration) var(--easing);
    transition-delay: var(--delay-out);
    border-radius: 4px;
    padding: 1em 1.52em;
  }
  nav header span {
    border: none;
    background: transparent;
    font-size: 1.5em;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    float: right;
  }
  nav footer button {
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    padding: calc(1em - 2px);
    width: 100%;
    transform-origin: 0 0;
    transition: transform var(--duration) var(--easing);
    transition-delay: calc(var(--duration) + (.1s * (var(--count) / 2)));
    cursor: pointer;
    outline: none;
    background: #cdcdcd;
    opacity: 0;
  }
  nav.closed a,
  nav.closed header {
    transform: translateY(calc(var(--top) * -1)) scaleY(0.1) scaleX(0.2);
    transition-delay: var(--delay-in);
    color: transparent;
  }
  nav.closed footer button {
    transition-delay: 0s;
    transform: scaleY(0.7) scaleX(0.2);
  }

любая помощь будет оценена.я хочу, чтобы моя боковая навигационная панель появлялась и исчезала при клике.

Ответы [ 2 ]

0 голосов
/ 21 сентября 2019

Хорошо, попробуйте следующий код, чтобы добавить эффект затухания.Здесь я использовал fadetoggle () вместо toggle () 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nav Bar</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".toggle").click(function(){
    $(".nav").fadeToggle(1000);
	
  });
    
});
</script>
<style>
* {
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    color: #333;
    font-size: 100%;
    line-height: 1.5;
  }
  body {
    margin: 0;
    background-size: cover;
  }
 nav {
  /*   --duration: .5s;
    --easing: ease-in-out;*/
    position: relative;
    width: 220px;
    margin: 20px;
  }
  nav ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  nav li {
    margin: -4px 0 0 0;
  }
  nav a {
    display: block;
    text-decoration: none;
    background: #fff;
    transform-origin: 0 0;
  /* transition: transform var(--duration) var(--easing), color var(--duration) var(--easing);
    transition-delay: var(--delay-out);*/
    border-radius: 4px;
    padding: 1em 1.52em;
  }
  nav a:hover {
    background: #efefef;
  }
  nav .sub-menu a {
    font-size: .9em;
    color: #666666;
    border-left: 2em solid white;
    padding: .75em;
    background: linear-gradient(to right, #dddddd 2px, #ffffff 2px);
  }
  nav .sub-menu a:hover {
    background: linear-gradient(to right, #dddddd 2px, #efefef 2px);
  }
 h1.toggle {
    display: inline-block;
    margin: 20px 0px 0px 20px;
    padding: 20px;
    border: 0px solid #e8e8e8;
    border-radius: 2px;
    width:15.5%
}

h1.toggle:hover {
    background: #e8e8e8;
}

h1 span {
    float: right;
    font-size: 27px;
    display: inline-block;
    position: relative;
    top: -9px;
}

</style>
	</head>
<body>   
<h1 class="toggle">Menu <span>×</span></h1>
    <nav class="nav">
	
    <ol>
        <li class="menu-item"><a href="#0">Home</a></li>
        <li class="menu-item"><a href="#0">About</a></li>
        <li class="menu-item">
            <a href="#0">Widgets</a>
            <ol class="sub-menu">
                <li class="menu-item"><a href="#0">Grocerry</a></li>
                <li class="menu-item"><a href="#0">Discount</a></li>
                <li class="menu-item"><a href="#0">Huge Sale</a></li>
            </ol>
        </li>
        <li class="menu-item">
            <a href="#0">Juice</a>
            <ol class="sub-menu">
                <li class="menu-item"><a href="#0">Russi</a></li>
                <li class="menu-item"><a href="#0">Paneer Pyaza</a></li>
                <li class="menu-item"><a href="#0">Rasbhari</a></li>
            </ol>
        </li>
        <li class="menu-item"><a href="#0">Contact</a></li>
    </ol>
	</body>
</html>
0 голосов
/ 21 сентября 2019

Я думаю, что есть какая-то проблема в вашей структуре HTML.Я немного отредактировал твой код, чтобы он заработал.Также я использовал скрипт для jquery.Надеюсь, это поможет. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nav Bar</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".toggle").click(function(){
    $(".nav").toggle();
  });
});
</script>
<style>
* {
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    color: #333;
    font-size: 100%;
    line-height: 1.5;
  }
  body {
    margin: 0;
    background-size: cover;
  }
  nav {
    --duration: .5s;
    --easing: ease-in-out;
    position: relative;
    width: 220px;
    margin: 20px;
  }
  nav ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  nav li {
    margin: -4px 0 0 0;
  }
  nav a {
    display: block;
    text-decoration: none;
    background: #fff;
    transform-origin: 0 0;
    transition: transform var(--duration) var(--easing), color var(--duration) var(--easing);
    transition-delay: var(--delay-out);
    border-radius: 4px;
    padding: 1em 1.52em;
  }
  nav a:hover {
    background: #efefef;
  }
  nav .sub-menu a {
    font-size: .9em;
    color: #666666;
    border-left: 2em solid white;
    padding: .75em;
    background: linear-gradient(to right, #dddddd 2px, #ffffff 2px);
  }
  nav .sub-menu a:hover {
    background: linear-gradient(to right, #dddddd 2px, #efefef 2px);
  }
 h1.toggle {
    display: inline-block;
    margin: 20px 0px 0px 20px;
    padding: 20px;
    border: 0px solid #e8e8e8;
    border-radius: 2px;
    width:15.5%
}

h1.toggle:hover {
    background: #e8e8e8;
}

h1 span {
    float: right;
    font-size: 27px;
    display: inline-block;
    position: relative;
    top: -9px;
}
</style>
	</head>
<body>   
<h1 class="toggle">Menu <span>×</span></h1>
    <nav class="nav">
	
    <ol>
        <li class="menu-item"><a href="#0">Home</a></li>
        <li class="menu-item"><a href="#0">About</a></li>
        <li class="menu-item">
            <a href="#0">Widgets</a>
            <ol class="sub-menu">
                <li class="menu-item"><a href="#0">Grocerry</a></li>
                <li class="menu-item"><a href="#0">Discount</a></li>
                <li class="menu-item"><a href="#0">Huge Sale</a></li>
            </ol>
        </li>
        <li class="menu-item">
            <a href="#0">Juice</a>
            <ol class="sub-menu">
                <li class="menu-item"><a href="#0">Russi</a></li>
                <li class="menu-item"><a href="#0">Paneer Pyaza</a></li>
                <li class="menu-item"><a href="#0">Rasbhari</a></li>
            </ol>
        </li>
        <li class="menu-item"><a href="#0">Contact</a></li>
    </ol>
	</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...