SEE the VISIBLE

“вкыл” и “выкл” на джейэсе

Или часовая медитация над условием тогл баттен

Чтобы применить класс тогл в яваскрипте, не надо никаких “верховно высших, санТехнических образований”. Кажется! ✝И когда: Щя по быстренькому запилю тернарный оператор на: “вкыл” и “выкл”. Остается искать вариант самый простой.

И у меня на менюшки работает условие if(count<=1){}else{// разные штуки; count=0;}

вкыл-выкл, на джейэсе

А вот запилить с тернарным оператором “по быстренькому”, получилось не так быстро как это может показаться с медитацией над маном.

Потому что все пишут, да есть простой способ использовать для класса Тогл элементарные решения. Даже все описано как через тернарный оператор запилить “по быстренькому”. Но что если найдется исконно, истинно неприятный персонаж, с высоко требовательными условиями? Начнет применять стандартный набор “коммуняки”: Шантажировать, орать, кричать и угрожать полицией!

тогл баттон мне запили на бургер менюшку!

Тогл баттон мне запели на менюшку!

Для этого есть куча способов но самый простой и быстрый на яваскрипте. Еще бургер меню делают на голом css, но как говорил один мужик похожий на супер марио: «это уже совсем другая история». Тем более на яваскрипте сделать все намного проще и подвластно модификациям в любой момент. Ничего никуда не уезжает, класс с менюшкой создается сразу по нажатию кнопки. Как по щелчку пальца.

Кнопку бургер меню можно взять из эмодзи и записать ее с увеличенным шрифтом. Получается шикарная легкая кнопка. 🍔

Настоящее «бургер меню».

За что джейэс западает в самое сердце: можно писать по маленьку, добавить один мельчайший элемент на огромную веб страницу и сразу же проверить как это будет работать. И если встала первостепенная необходимость запилить тогл баттон на бургер, меню, а значит: “Открыть”, а потом “Закрыть”. То почему бы еще разочек с помощью джейэса, не запилить по быстренькому. -Один раз и все, а потом сразу же можно вернуться на фреймворки, и на пхп, и как нормальный человек пилить на серьезных языках(по серьезному), и по настоящему тяжело, с потом и с кровью… Как будто высоченно- высшее образование, сразу стало на пол шишки выше чем у всех остальных. )

  <div id='menu'><p class="burg">🍔</p></div>
        <script>
          //-----------------------------------------------------------------------
          //----------Тут вставляются теги менюшки(якорные ссылки и все такое)-----
          //-----------------------------------------------------------------------
          let menuShka = '<a href="/">записаны разные ссылки!</a><a href="#glav">Скрипт менюшки на голом джейэсе!</a>';
          //----------------------------------------------------------------------
          let PressButton=+1;
          document.querySelector('#menu').addEventListener("click", ()=>{
              PressButton+=1;      
              function PressButtonToggle(){
                  let PressButtonValue=(PressButton>=2)?'open':'close'; // один клик дает open PressButton==1
                  console.log(PressButton+"button.nazhata");
                  if(PressButtonValue=='open'){
                  document.getElementsByTagName("body")[0].style.cssText=`
                  overflow:hidden;
                  `;
                  let divMenu = document.createElement('div');
                  divMenu.className='menu';
                  divMenu.innerHTML='menu!'+`${menuShka}`;
                  document.body.append(divMenu);
                  document.querySelector('.menu').style.cssText=`
                  display:flex;
                  position:fixed;
                  top:0;
                  flex-direction:column;
                  background-color: rgba(195, 243, 149,0.5);
                  width:100%;
                  height:100%;
                  max-height:100%;
                  max-width:100%;
                  justify-content:center;
                  align-items:center;
                  overflow:hidden;
                  `;
                  PressButton=0; // сброс кликов до нуля 'close' когда PressButton==2
                  }else if(PressButtonValue=='close'){
                    document.querySelector('.menu').remove(); //эта ремув удаляет все с надписями
                    // document.querySelector('.menu').removeAttribute('style');
                  document.getElementsByTagName('body')[0].style.cssText=`
                  overflow:scroll;
                  `;
                  }
                  else{
                    console.log('nu-neznay');
                  }
                  document.querySelector('.menu').addEventListener('click', ()=>{
                      document.querySelector('.menu').remove();
                      console.log('but');
                      PressButton=1;
                      document.getElementsByTagName('body')[0].style.cssText=`
                      overflow:scroll;
                      `;
                      });
              }
              PressButtonToggle();
          });
          
        </script>

Но раз уж пошла такая тема. Пилить на джейэсе, то почему бы не написать уже целый лендинг раз уж и меню готово и все напасти по поводу: “Тогл баттон мне запили!” миновали. 

То сразу нужно отметить преимущество писать с нуля целый сайт (то есть лендинг). Этот вариант будет считаться облегченным. Потому что не приходится разворачивать лишние  части которые никогда не будут использоваться. Тут сразу только все самое необходимое. Лендинг с тогл баттл с модификацией на голом джейэсе.

и исчо стайл на сам тогл баттон

<style>
        *{
          margin:0;
        }
        #menu{
          display:flex;
          justify-content: center;
          align-items: center;
          position:fixed;
          top:20px;
          right: 10px;
          background-color: rgba(82, 158, 163, 0.26);
          width: 70px;
          height:70px;
          margin:3%;
          border-radius: 50%;
          border: 2px solid rgba(70, 23, 82, 0.226);
        }
        #menu:hover{
          background-color: rgba(195, 243, 149,0.5);
          border: 2px solid rgb(59, 26, 7);
        }
        .burg{
          font-size: 50px;
          opacity:0.5;
        }
        .burg:hover{
          opacity:1;
        }
      </style>

Готовый скрипт менюшки и целого лендинга по ссылке.

Exit mobile version