Раскрывающееся меню скользит вниз по клику, используя JQuery - PullRequest
Новая
       22

Раскрывающееся меню скользит вниз по клику, используя JQuery

0 голосов
/ 09 марта 2020

Итак, это мой код, открывающий выпадающее меню $ smallScreenMenu после нажатия на кнопку $ iconMenu1

Javascript код: 

const $iconMenu1 = $('#iconMenu1')
const $smallScreenMenu = $('#smallScreenMenu')
$($iconMenu1.on('click', ()=>{
  if ($smallScreenMenu.css('display') == 'block'){
    $smallScreenMenu.css('display', 'none');
  }
  else{
    $smallScreenMenu.css('display', 'block');
  }

CSS код: 

.icon-menu{
    right: 15px;
    position: absolute;
    top: 17px;
    font-size: 30px;
    background-color: transparent;
    border: none;
}

#smallScreenMenu{
    display: none;
    position: absolute;
    right: 0px;
    text-align: right;

HTML код: 

<button class='icon-menu' id='iconMenu1'></button>
<div id='smallScreenMenu'>
                <ul> 
                    <li><a href='#'>Products</a></li>
                    <li><a href='#'>About</a></li>
                </ul>
            </div>

Итак, это работает, но я бы хотел, чтобы он скользил, а не мгновенно появлялся / исчезал. Можно ли отредактировать этот код и получить то, что я хочу, или я должен написать свой код с нуля? Я пытался использовать slideDown () и slideUp (), но ничего не получилось. Также заранее спасибо за помощь

1 Ответ

1 голос
/ 09 марта 2020

Переключение класса для вашего меню вместо непосредственного управления стилями. Затем используйте CSS -переходы для анимации, например, maximum-height или других CSS -свойств: 

const $iconMenu1 = $('#iconMenu1');
const $smallScreenMenu = $('#smallScreenMenu');

$($iconMenu1.on('click', () => {

$smallScreenMenu.toggleClass('closed');
  
}));
.icon-menu {
  right: 15px;
  position: absolute;
  top: 17px;
  font-size: 30px;
  background-color: transparent;
  border: none;
}

#smallScreenMenu {
  display: block;
  position: absolute;
  right: 10px;
  top: 60px;
  text-align: right;
  background: rgba(0,255,0,0.1);
  overflow-y: hidden;
  max-height: 360px;
  transition: all 360ms ease-in-out;
  box-shadow: 2px 4px 12px #bfbfbf;
}

#smallScreenMenu.closed {
   max-height: 0;
}

#smallScreenMenu ul {
  list-style-type: none;
  margin: 0.5em 1em;
  padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='icon-menu' id='iconMenu1'>Menu</button>
<div id='smallScreenMenu' class="closed">
  <ul>
    <li><a href='#'>Products</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Another</a></li>
    <li><a href='#'>Another</a></li>
    <li><a href='#'>Another</a></li>
  </ul>
</div>
...