Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Страница со свернутым меню (https://javascript.ru/forum/misc/82009-stranica-so-svernutym-menyu.html)

vladdvin 01.03.2021 09:10
Страница со свернутым меню
 
Видел в интернете сайт со сворачивающимся боковым меню





Есть код (должно сворачиваться в колонку сбоку при щелчке на иконку и разворачиваться при наведении)

<style type="text/css">
* {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

ul {
  background: #afafaf;
  display: inline-block;
  width: 420px;
  border-right: 1px solid #000;
}

ul li {
  padding: 6px 0;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

ul li:hover {
  background: lightgreen;
}

ul li a {
  color: #000;
}

ul li:hover a,
ul li:hover .fa {
  color: #fff;
}

ul li .fa {
  display: inline-block;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.leftside {
  margin-left: 16px;
  display: inline-block;
  width: 30px;
  height: 30px;  
  display: inline-flex;
}

.rightside {
  margin-right: 16px;
  visibility: hidden;
  width: 30px;
  height: 30px;  
  display: inline-flex;
}

.centerplace {
  width: 328px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

.nestedblock{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin:0 auto;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="testsite.js">
let elemmenuitemli = document.querySelectorAll('.fa');
let sidemenu = document.querySelector('#sidemenu');

elemmenuitemli.addEventListener("onmouseenter", checkitem);
elemmenuitemli.addEventListener("onmouseleave", checkitem);


function checkitem() {
	if sidemenu.classList.contains("active")
	{
		/* Удаление меню ul*/
		sidemenu.innerHTML=`
		/* Сворачивание меню ul */
		  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  </li>
  `;

	}
	else {
		/* Удаление меню ul*/
		sidemenu.innerHTML=`<li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Техника для кухни</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Бытовая техника для дома</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Ноутбуки и компьютеры</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>    
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Комплектующие</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>    
  </li>
  </li>`;
		sidemenu.classList.add('active');
		/* Разворачивание меню ul */
	}
}
</script>
<ul id="sidemenu">
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Техника для кухни</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Бытовая техника для дома</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Ноутбуки и компьютеры</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>    
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Комплектующие</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>    
  </li>
  </li>
</ul>

Почему оно не работает вышеуказанным образом?

voraa 01.03.2021 09:26
Еще бы работала эта мешанина из html кода и некоторого подобия javascript.

Вот это

<script src="testsite.js">
let elemmenuitemli = document.querySelectorAll('.fa');
let sidemenu = document.querySelector('#sidemenu');

Что такое?

else {
        /* Удаление меню ul*/
        sidemenu.delete();
        <ul id="sidemenu">
  <li>
    <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">

Что за javascript, "плавно переходящий" в html?

if sidemenu.classList.contains("active")
Где вы так if писать научились.

рони 01.03.2021 10:01
меню боковое
 
Цитата:
Сообщение от vladdvin
Почему оно не работает вышеуказанным образом?
... без комментариев :cray:

можно и без js, при желании сделать тоже самое
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>
<body>
<style type="text/css">
* {
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
}
ul {
    background: #afafaf;
    border-right: 1px solid #000;
}
ul li {
    padding: 6px 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
}
ul li:hover {
    background: lightgreen;
}
ul li a {
    color: #000;
}
ul li:hover a,
ul li:hover .fa {
    color: #fff;
}
ul li .fa {
    display: inline-block;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.leftside {
    margin-left: 16px;
    display: inline-block;
    width: 30px;
    height: 30px;
    display: inline-flex;
}
.rightside {
    visibility: hidden;
    width: 30px;
    height: 30px;
    display: inline-flex;
}
.centerplace {
    width: 328px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    transition: .6s;
    overflow: hidden;
    transform: translateX(-328px);
}
.nestedblock{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin:0 auto;
}
#sidemenu.active .centerplace {
    transform: translateX(0px);
    transition-delay: .4s;
}
#sidemenu{
   width: 60px;
}
#sidemenu.active{
    width: 388px;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
document.addEventListener("DOMContentLoaded", function() {
    let sidemenu = document.querySelector('#sidemenu');
    sidemenu.addEventListener("mouseover", checkitem);
    sidemenu.addEventListener("mouseleave", checkitem);

    function checkitem(event) {
        if (event.target && event.target.closest(".fa")) sidemenu.classList.add("active");
        if (event.type === "mouseleave") sidemenu.classList.remove("active");
    }
});
</script>
<ul id="sidemenu" >
    <li>
        <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
        <div class="centerplace">
    <a href="" class="nestedblock">Техника для кухни</a>
    </div>
    <div class="rightside">
    <i class="fa fa-home"></i>
    </div>
    </li>
    <li>
        <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
        <div class="centerplace">
    <a href="" class="nestedblock">Бытовая техника для дома</a>
    </div>
    <div class="rightside">
    <i class="fa fa-home"></i>
    </div>
    </li>
    <li>
        <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
        <div class="centerplace">
    <a href="" class="nestedblock">Ноутбуки и компьютеры</a>
    </div>
    <div class="rightside">
    <i class="fa fa-home"></i>
    </div>
    </li>
    <li>
        <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
        <div class="centerplace">
    <a href="" class="nestedblock">Комплектующие</a>
    </div>
    <div class="rightside">
    <i class="fa fa-home"></i>
    </div>
    </li>
    </li>
</ul>
</body>
</html>

рони 01.03.2021 10:03
vladdvin,
без js ...
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>
<body>
<style type="text/css">
* {
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
}
ul {
    background: #afafaf;
    border-right: 1px solid #000;
}
ul li {
    padding: 6px 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
}
ul li:hover {
    background: lightgreen;
}
ul li a {
    color: #000;
}
ul li:hover a,
ul li:hover .fa {
    color: #fff;
}
ul li .fa {
    display: inline-block;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.leftside {
    margin-left: 16px;
    display: inline-block;
    width: 30px;
    height: 30px;
    display: inline-flex;
}
.rightside {
    visibility: hidden;
    width: 30px;
    height: 30px;
    display: inline-flex;
}
.centerplace {
    width: 328px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    transition: .6s;
    overflow: hidden;
    transform: translateX(-328px);
}
.nestedblock{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin:0 auto;
}
#sidemenu:hover .centerplace {
    transform: translateX(0px);
    transition-delay: .4s;
}
#sidemenu{
   width: 60px;
}
#sidemenu:hover{
    width: 388px;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<ul id="sidemenu" >
    <li>
        <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
        <div class="centerplace">
    <a href="" class="nestedblock">Техника для кухни</a>
    </div>
    <div class="rightside">
    <i class="fa fa-home"></i>
    </div>
    </li>
    <li>
        <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
        <div class="centerplace">
    <a href="" class="nestedblock">Бытовая техника для дома</a>
    </div>
    <div class="rightside">
    <i class="fa fa-home"></i>
    </div>
    </li>
    <li>
        <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
        <div class="centerplace">
    <a href="" class="nestedblock">Ноутбуки и компьютеры</a>
    </div>
    <div class="rightside">
    <i class="fa fa-home"></i>
    </div>
    </li>
    <li>
        <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
        <div class="centerplace">
    <a href="" class="nestedblock">Комплектующие</a>
    </div>
    <div class="rightside">
    <i class="fa fa-home"></i>
    </div>
    </li>
    </li>
</ul>
</body>
</html>

vladdvin 01.03.2021 14:29
Цитата:
Сообщение от voraa (Сообщение 534184)
Еще бы работала эта мешанина из html кода и некоторого подобия javascript.

Вот это

<script src="testsite.js">
let elemmenuitemli = document.querySelectorAll('.fa');
let sidemenu = document.querySelector('#sidemenu');

Что такое?

else {
        /* Удаление меню ul*/
        sidemenu.delete();
        <ul id="sidemenu">
  <li>
    <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">

Что за javascript, "плавно переходящий" в html?

if sidemenu.classList.contains("active")
Где вы так if писать научились.
А как надо (я новичок)? Мое видение - я накидал. По наведению или щелчку кнопки мыши я изменяю содержимое sidemenu с помощью свойства innerHTML - содержимое бокового меню. (подскажите как надо сделать на js, прошу отнестись с пониманием - я новичок)
<style type="text/css">
* {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

ul {
  background: #afafaf;
  display: inline-block;
  width: 420px;
  border-right: 1px solid #000;
}

ul li {
  padding: 6px 0;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

ul li:hover {
  background: lightgreen;
}

ul li a {
  color: #000;
}

ul li:hover a,
ul li:hover .fa {
  color: #fff;
}

ul li .fa {
  display: inline-block;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.leftside {
  margin-left: 16px;
  display: inline-block;
  width: 30px;
  height: 30px;  
  display: inline-flex;
}

.rightside {
  margin-right: 16px;
  visibility: hidden;
  width: 30px;
  height: 30px;  
  display: inline-flex;
}

.centerplace {
  width: 328px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

.nestedblock{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin:0 auto;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="testsite.js">
let elemmenuitemli = document.querySelectorAll('.fa');
let sidemenu = document.querySelector('#sidemenu');

elemmenuitemli.addEventListener("onmouseenter", checkitem);
elemmenuitemli.addEventListener("onmouseleave", checkitem);


function checkitem() {
	if sidemenu.classList.contains("active")
	{
		/* Удаление меню ul*/
		sidemenu.innerHTML=`
		/* Сворачивание меню ul */
		  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  </li>
  `;

	}
	else {
		/* Удаление меню ul*/
		sidemenu.innerHTML=`<li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Техника для кухни</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Бытовая техника для дома</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Ноутбуки и компьютеры</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>    
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Комплектующие</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>    
  </li>
  </li>`;
		sidemenu.classList.add('active');
		/* Разворачивание меню ul */
	}
}
</script>
<ul id="sidemenu">
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Техника для кухни</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Бытовая техника для дома</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Ноутбуки и компьютеры</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>    
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Комплектующие</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>    
  </li>
  </li>
</ul>

рони 01.03.2021 14:44
vladdvin,
Изменение документа


Часовой пояс GMT +3, время: 00:15.