Форум

maxg5 · #1 (**permalink**) 30.06.2018, 13:28

Всем доброго дня!
Делаю мобильное меню на сайте maxg5.ru
Нужно что бы по клику на кнопку, меню открывалось и закрывалось.
Т.е. по клику классу .burger присваивалось свойство css {left:0px;}
А еще по одному клику это свойство удалялось либо присваивалось свойство css {left:-330px;}
Вот написал такой скрипт:

<script>
 $(function(){
    $(".burger").click(function () {
      $(".primary-menu").css({'left': '0px'});
	  }),
	  $(".burger").click(function () {
      $(".primary-menu").css({'left': '-330px'});
	  });
    });
</script>

Но при нажатии на .burger не работает

Malleys · #2 (**permalink**) 30.06.2018, 14:47

Оно работает, и всегда остаётся в закрытом состоянии, как и указано в скрипте.

$(function(){
	const primaryMenu = $(".primary-menu");
 	let isOpen = false;
	
    $(".burger").click(function () {
		isOpen ^= true;
    	primaryMenu.css({ left: isOpen ? "0px" : "-330px"});
	});
});

maxg5 · #3 (**permalink**) 30.06.2018, 15:06

Спасибо!
А если усложнить код и добавить прозрачный фон сайта при открытом меню.
Т.е. нужно так же при клике по .burger добавить к классу .stite свойсвто css background-color:rgba(17,17,17,0.4), а при повторном клике убрать это свойство.
у меня вот так получилось:

$(function(){
	const primaryMenu = $(".primary-menu");
	const site = $(".site");
 	let isOpen = false;
	
    $(".burger").click(function () {
		isOpen ^= true;
    	primaryMenu.css({ left: isOpen ? "0px" : "-330px"});
		site.css({ background-color: isOpen ? "rgba(17,17,17,0.4)" : "#fff"});
	});
});

Но выдается синтактисеская ошибка

Malleys · #4 (**permalink**) 30.06.2018, 15:16

backgroundColor, а не background-color в 9 строке

рони · #5 (**permalink**) 30.06.2018, 15:35

maxg5,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  html, body{
      height: 100%;

      margin: 0;
      padding: 0;

  }
  .site{
     background-color: #fff;
      position: relative;
      transition: background-color .3s .4s;
  }

  .primary-menu{
   width: 330px;
   height: 100%;
   position: absolute;
   left: -330px;
   transition: left .7s;
   background-color: rgba(69, 43, 18, 1);
  }
  .site.open{
      transition-delay: 0s;
      background-color: rgba(17,17,17,0.4)
  }
 .site.open .primary-menu{
   left: 0;
 }
 .burger{
     position: fixed;
     width: 40px;
     height: 40px;
     background-image: url(http://da-strateg.ru/wp-content/uploads/2015/12/menu.png);
     background-size: cover;

 }
 .site.open .burger{
     background-image: url(http://100грузов.рф/wp-content/uploads/2016/04/close-icon.png);

 }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function(){
    var site = $(".site");
    $(".burger").click(function () {
        site.toggleClass("open");
    });
});

  </script>
</head>

<body class="site">
<div  class="primary-menu"></div>
<div class="burger"></div>
</body>
</html>

maxg5 · #6 (**permalink**) 02.07.2018, 11:27

Спасибо!
А как сделать так, что бы когда меню открыто, то за место класса .burger показывался крестик - X. Ну например класс .close

рони · #7 (**permalink**) 02.07.2018, 11:47

maxg5,
кому вопрос?

рони · #8 (**permalink**) 02.07.2018, 11:50

maxg5,

$(function(){
	const primaryMenu = $(".primary-menu");
	const site = $(".site");
 	let isOpen = false;

    $(".burger").click(function () {
		isOpen ^= true;
    	primaryMenu.css({ left: isOpen ? "0px" : "-330px"});
		site.css({ "background-color": isOpen ? "rgba(17,17,17,0.4)" : "#fff"});
        $(this).toggleClass("burger close")
	});
});

maxg5 · #9 (**permalink**) 02.07.2018, 20:15

Немного не то что нужно.
В данном случае по клику по элементу с классом .burger, этому элементу присваивается класс .close.
Это не то что нужно.
Нужно что бы по клику на элемент с классом .burger, этот элемент исчезал, меню открывалось, а на месте элемента с классом .burger появлялся элемент с классом .close
Ну и аналогично в обратном порядке по клику на .close

рони · #10 (**permalink**) 02.07.2018, 20:28

maxg5,
чем замена элементов отличается от смены класса, в данном случае?

Форум

Справочник

Discord чат

Курсы javascript