Форум

dupre · #1 (**permalink**) 13.09.2017, 19:05

Что нужно дописать к данному коду, чтобы возврат к исходному состоянию (Меню) можно было реализовать, как через клик по .openclosebtn, так и через клик по body?

<div id="main">
 <span class="openclosebtn">Меню</span>
</div>

$('.openclosebtn').click(function(){
  if (!$(this).data('status')) {
  	$(this).html('Close');
    $(this).data('status', true);
  }
  else {
  	$(this).html('Меню');
    $(this).data('status', false);
  }
});

рони · #2 (**permalink**) 13.09.2017, 19:29

dupre,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css"> #main .openclosebtn{
    background-color: #228B22;
    color: #FFFFFF;
    padding: 5px 12px;
  }

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

  <script>
$(function() {
$('.openclosebtn, html').click(function(event){
  var btn = $('.openclosebtn'), status = !btn.data('status');
  if ($(this).is(btn) && status) {
    event.stopPropagation();
  	btn.html('Close')
    .data('status', status);
  }
  else {
  	btn.html('Меню')
    .data('status', false);
  }
});
});
  </script>
</head>

<body>
<div id="main">
 <span class="openclosebtn">Меню</span>
</div>




</body>
</html>

dupre · #3 (**permalink**) 13.09.2017, 20:01

рони,
я пробую через твой код с открывающимся .sidenav

window.addEventListener('DOMContentLoaded', function() {
	var body = document.querySelector('body');
	document.addEventListener("click", function(event) {
		var target = event.target;
		if (target.closest(".sidenav") && !target.closest(".closebtn")) return;
		else if (target.closest("#main")) {
			event.preventDefault();
			body.classList.toggle("open")
		} else body.classList.remove("open");
	});
});

Работает так: кликаю sidenav, текс меняется, но сайдбар открывается только по второму клику. Выгрузил код на jsfiddle, чтоб наглядно посмотреть, но там не работает вовсе..

dupre · #4 (**permalink**) 13.09.2017, 20:05

То есть: по первому клику меняется текст, и только по второму клику открывается сайдбар. При закрытии сайдбара тоже самое.

рони · #5 (**permalink**) 13.09.2017, 20:09

dupre,
не могу догадаться, что вы хотите.

dupre · #6 (**permalink**) 13.09.2017, 20:40

рони, весь код с которым вожусь. Хотел сделать: клик по .sidenav меняет текст и одновременно открывает либо закрывает сайдбар; всё это работает, но чуток не так: клик по .sidenav меняет текст, а сайдбар открывается либо закрывается только по второму клику. То есть, чтобы открыть сайдбар нужно кликнуть openclosebtn два раза, чтоб закрыть то же два раза..

<!DOCTYPE html>
<html lang="ru">

<head>
	<meta charset="UTF-8">
	<title>Главная</title>
	<link rel="stylesheet" href="css/libs.min.css">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="fonts/stylesheet.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>
<body>
	<div id="mySidenav" class="sidenav">
		<span class="nav_top_word">Список Меню</span>
		<ul class="breadcrumbs">
			<li>
				<a href="index.html" target="_blank">Lorem</a>
				<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
			</li>
			<li>
				<a href="documents.html" target="_blank">Lorem</a>
				<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
			</li>
			<li>
				<a href="service.html" target="_blank">Lorem</a>
				<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
			</li>
			<li>
				<a href="news.html" target="_blank">Lorem</a>
				<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
			</li>
			<li>
				<a href="gallery.html" target="_blank">Lorem</a>
				<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
			</li>
			<li>
				<a href="reports.html" target="_blank">Lorem</a>
				<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
			</li>
			<li>
				<a href="contacts.html" target="_blank">Lorem</a>
				<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
			</li>
			<li>
				<a href="contacts.html" target="_blank">Lorem</a>
				<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
			</li>
		</ul>
	</div>
	<div id="main">
			<span class="openclosebtn">Меню</span>
	</div>
	<script src="js/libs.min.js"></script>
	<script src="js/common.js"></script>
</body>

</html>

body {
  font-family: 'play', sans-serif;
  color: #343741;
  position: relative;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  background: #f9f9f9;
}
.wrapper {
  position: absolute;
}
.wrapper main {
  padding-left: 300px;
  width: 700px;
  height: 2000px;
  margin-top: 200px;
}
.nav_top_word,
p,
a {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background: #fff;
  overflow-x: hidden;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.sidenav .nav_top_word {
  position: relative;
  height: 95px;
  background: #F5F8FC;
  color: #0072ce;
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  line-height: 95px;
  padding-left: 17px;
  display: block;
  min-width: 300px;
}
.sidenav .nav_top_word:before {
  position: absolute;
  content: '';
  display: block;
  height: 10px;
  width: 10px;
  border: 2px solid #004ea8;
  border-left: none;
  border-bottom: none;
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
  top: 35px;
  left: 340px;
}

.sidenav a {
  font-size: 18.5px;
  font-weight: 700;
  font-style: normal;
  padding: 8px 8px 8px 13px;
  text-decoration: none;
  color: #004ea8;
  display: block;
  letter-spacing: 1px;
}
.breadcrumbs {
  margin-top: 70px;
  padding-bottom: 50px;
}
.breadcrumbs li {
  position: relative;
  height: 119px;
}
.breadcrumbs li:hover::after {
  position: absolute;
  content: '';
  display: block;
  height: 10px;
  width: 10px;
  border: 2px solid #fff;
  border-left: none;
  border-bottom: none;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 20px;
  left: 340px;
}
.breadcrumbs li:hover {
  background: #0072ce;
}
.breadcrumbs li:hover p,
.breadcrumbs li:hover a {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
.breadcrumbs li:hover a {
  text-decoration: underline;
}
.breadcrumbs li:hover:hover * {
  color: #fff;
}
.breadcrumbs p {
  font-size: 14.5px;
  font-style: normal;
  font-weight: 400;
  width: 300px;
  padding: 51px 0 12px 13px;
  line-height: 1.2;
  letter-spacing: .5px;
}
.breadcrumbs a {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 8px;
}
.breadcrumbs a::after {
  position: absolute;
  content: '';
  display: block;
  height: 10px;
  width: 10px;
  border: 2px solid #000;
  border-left: none;
  border-bottom: none;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 12px;
  left: 340px;
}
#main {
  position: fixed;
  left: 0px;
  top: 0;
  -webkit-transition: left .5s;
  -o-transition: left .5s;
  transition: left .5s;
  width: 100%;
  height: 89px;
  line-height: 89px;
  text-align: left;
  background: #343741;
  z-index: 100;
}
#main span {
  position: relative;
  display: inline-block;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  color: #E5E8ED;
  margin-left: 80px;
  border: 1px solid #fff;
  -webkit-border-radius: 2px;
          border-radius: 2px;
  cursor: pointer;
  line-height: 2;
  padding: 0 10px 0 10px;
}
#main span:hover {
  color: #004ea8;
  background: #fff;
  border-color: #004ea8;
}
body.open {
  margin-left: 380px;
}
body.open .sidenav {
  width: 380px;
}
body.open #main {
  left: 380px;
}
body:after {
  opacity: 0;
  content: "";
}
body.open:after {
  content: "";
  z-index: 99;
  background-color: #343741;
  opacity: .3;
  left: 380px;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  -webkit-transition: all 0.3s 0.3s;
  -o-transition: all 0.3s 0.3s;
  transition: all 0.3s 0.3s;
}
/*
==================================================
home page
==================================================
*/
.wrapper img {
  margin: 0 auto;
}

window.addEventListener('DOMContentLoaded', function() {
	var body = document.querySelector('body');
	document.addEventListener("click", function(event) {
		var target = event.target;
		if (target.closest(".sidenav") && !target.closest(".closebtn")) return;
		else if (target.closest("#main")) {
			event.preventDefault();
			body.classList.toggle("open")
		} else body.classList.remove("open");
	});
});

 $(function() {
$('.openclosebtn, html').click(function(event){
  var btn = $('.openclosebtn'), status = !btn.data('status');
  if ($(this).is(btn) && status) {
    event.stopPropagation();
    btn.html('Close')
    .data('status', status);
  }
  else {
    btn.html('Меню')
    .data('status', false);
  }
});
});

рони · #7 (**permalink**) 13.09.2017, 20:44

dupre,
зачем потребовалось jquery? чтобы сменить текст, достаточно css и прежнего js

рони · #8 (**permalink**) 13.09.2017, 20:52

dupre,

.openclosebtn:after {
  content: "Меню";
}
body.open .openclosebtn:after {
   content: "Close";
}

и убрать текст из кнопки

<div id="main">
      <span class="openclosebtn"></span>
  </div>

dupre · #9 (**permalink**) 13.09.2017, 21:01

В js я пока ничего можно сказать не смыслю, ну поменяю размер шрифта или цвет у всех тегов "р" на странице )

В css хоть что-то, но понимаю, но тем не менее не представляю, как это можно сделать на css...

рони · #10 (**permalink**) 13.09.2017, 21:13

dupre,

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>Главная</title>
<style type="text/css">
body {
  font-family: 'play', sans-serif;
  color: #343741;
  position: relative;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  background: #f9f9f9;
}
.wrapper {
  position: absolute;
}
.wrapper main {
  padding-left: 300px;
  width: 700px;
  height: 2000px;
  margin-top: 200px;
}
.nav_top_word,
p,
a {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background: #fff;
  overflow-x: hidden;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.sidenav .nav_top_word {
  position: relative;
  height: 95px;
  background: #F5F8FC;
  color: #0072ce;
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  line-height: 95px;
  padding-left: 17px;
  display: block;
  min-width: 300px;
}
.sidenav .nav_top_word:before {
  position: absolute;
  content: '';
  display: block;
  height: 10px;
  width: 10px;
  border: 2px solid #004ea8;
  border-left: none;
  border-bottom: none;
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
  top: 35px;
  left: 340px;
}

.sidenav a {
  font-size: 18.5px;
  font-weight: 700;
  font-style: normal;
  padding: 8px 8px 8px 13px;
  text-decoration: none;
  color: #004ea8;
  display: block;
  letter-spacing: 1px;
}
.breadcrumbs {
  margin-top: 70px;
  padding-bottom: 50px;
}
.breadcrumbs li {
  position: relative;
  height: 119px;
}
.breadcrumbs li:hover::after {
  position: absolute;
  content: '';
  display: block;
  height: 10px;
  width: 10px;
  border: 2px solid #fff;
  border-left: none;
  border-bottom: none;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 20px;
  left: 340px;
}
.breadcrumbs li:hover {
  background: #0072ce;
}
.breadcrumbs li:hover p,
.breadcrumbs li:hover a {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
.breadcrumbs li:hover a {
  text-decoration: underline;
}
.breadcrumbs li:hover:hover * {
  color: #fff;
}
.breadcrumbs p {
  font-size: 14.5px;
  font-style: normal;
  font-weight: 400;
  width: 300px;
  padding: 51px 0 12px 13px;
  line-height: 1.2;
  letter-spacing: .5px;
}
.breadcrumbs a {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 8px;
}
.breadcrumbs a::after {
  position: absolute;
  content: '';
  display: block;
  height: 10px;
  width: 10px;
  border: 2px solid #000;
  border-left: none;
  border-bottom: none;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 12px;
  left: 340px;
}
#main {
  position: fixed;
  left: 0px;
  top: 0;
  -webkit-transition: left .5s;
  -o-transition: left .5s;
  transition: left .5s;
  width: 100%;
  height: 89px;
  line-height: 89px;
  text-align: left;
  background: #343741;
  z-index: 100;
}
#main span {
  position: relative;
  display: inline-block;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  color: #E5E8ED;
  margin-left: 80px;
  border: 1px solid #fff;
  -webkit-border-radius: 2px;
          border-radius: 2px;
  cursor: pointer;
  line-height: 2;
  padding: 0 10px 0 10px;
}
#main span:hover {
  color: #004ea8;
  background: #fff;
  border-color: #004ea8;
}
body.open {
  margin-left: 380px;
}
body.open .sidenav {
  width: 380px;
}
body.open #main {
  left: 380px;
}
.openclosebtn:after {
  content: "Меню";
}
body.open .openclosebtn:after {
   content: "Close";
}

body:after {
  opacity: 0;
  content: "";
}
body.open:after {
  content: "";
  z-index: 99;
  background-color: #343741;
  opacity: .3;
  left: 380px;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  -webkit-transition: all 0.3s 0.3s;
  -o-transition: all 0.3s 0.3s;
  transition: all 0.3s 0.3s;
}
/*
==================================================
home page
==================================================
*/
.wrapper img {
  margin: 0 auto;
}

</style>

</head>
<body>
  <div id="mySidenav" class="sidenav">
    <span class="nav_top_word">Список Меню</span>
    <ul class="breadcrumbs">
      <li>
        <a href="index.html" target="_blank">Lorem</a>
        <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
      </li>
      <li>
        <a href="documents.html" target="_blank">Lorem</a>
        <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
      </li>
      <li>
        <a href="service.html" target="_blank">Lorem</a>
        <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
      </li>
      <li>
        <a href="news.html" target="_blank">Lorem</a>
        <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
      </li>
      <li>
        <a href="gallery.html" target="_blank">Lorem</a>
        <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
      </li>
      <li>
        <a href="reports.html" target="_blank">Lorem</a>
        <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
      </li>
      <li>
        <a href="contacts.html" target="_blank">Lorem</a>
        <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
      </li>
      <li>
        <a href="contacts.html" target="_blank">Lorem</a>
        <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
      </li>
    </ul>
  </div>
  <div id="main">
      <span class="openclosebtn"></span>
  </div>
 <script>
   window.addEventListener('DOMContentLoaded', function() {
  var body = document.querySelector('body');
  document.addEventListener("click", function(event) {
    var target = event.target;
    if (target.closest(".sidenav") && !target.closest(".closebtn")) return;
    else if (target.closest("#main")) {
      event.preventDefault();
      body.classList.toggle("open")
    } else body.classList.remove("open");
  });
});

 </script>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript