Выравнивание кнопки закрытия окна (крестика) по правому краю
Есть код
let cataloglistbutton = document.querySelector('.catalogbutton');
let divmenuleft = document.querySelector('.CatalogMenuLeft');
let divmenusearch = document.querySelector('.CatalogMenuSearch');
let divmenuright = document.querySelector('.CatalogMenuRight');
let divfreespace = document.querySelector('.CatalogFreeSpace');
cataloglistbutton.onclick = function() {
console.log('Before');
if (document.getElementById('dropdownwindow').style.display == "none") {
document.getElementById('dropdownwindow').style.position = "fixed";
document.getElementById('dropdownwindow').style.marginLeft = "0";
document.getElementById('dropdownwindow').style.marginTop = "0";
document.getElementById('dropdownwindow').style.display = "block";
console.log(document.getElementById('dropdownwindow').style.display);
document.getElementById('dropdownwindow').style.marginRight = "20%";
document.getElementById('dropdownwindow').style.width = "80%";
/*document.getElementById('dropdownwindowright').style.marginRight="20%";
document.getElementById('dropdownwindowright').style.marginLeft="20%";
document.getElementById('dropdownwindowright').style.width="60%";
*/
document.getElementById('dropdownwindowright').style.flex = "60%";
/*divfreespace.style.width="20%";
divmenuleft.style.display="block";
divmenuright.style.display="block"; divmenusearch.style.display="block";
divfreespace.style.display="block";*/
document.getElementById('dropdownwindow').style.backgroundColor = "#ffffff";
const menuelems = document.querySelectorAll('.menulistitem');
menuelems.forEach((menuelem) => {
menuelem.addEventListener('mouseover', (event) => {
event.target.style.cursor = "pointer";
event.target.classList.add('menulistitem_selected')
});
menuelem.addEventListener('mouseout', (event) => {
event.target.style.cursor = "pointer";
event.target.classList.remove('menulistitem_selected')
});
});
/*const simpleBar = new SimpleBar(document.querySelector('.windowmenulist'));*/
/*simpleBar.style.visibility="visible";*/
/*
document.querySelector('.windowmenulist.simplebar-track.simplebar-vertical').style.visibility="visible";
document.querySelector('.windowmenulist.simplebar-track.simplebar-vertical.simplebar-scrollbar').style.height="100%";
document.querySelector('.windowmenulist.simplebar-track.simplebar-vertical.simplebar-scrollbar').style.display="block";
*/
/*document.getElementById('dropdownwindow').style.position="absolute";*/
/*document.getElementById('dropdownwindow').style.marginBottom="0px";
document.getElementById('dropdownwindow').style.paddingBottom="0px";*/
} else {
document.getElementById('dropdownwindow').style.display = "none";
document.getElementById('dropdownwindow').style.position = "fixed";
document.getElementById('dropdownwindow').style.marginLeft = "0";
document.getElementById('dropdownwindow').style.marginTop = "0";
console.log(document.getElementById('dropdownwindow').style.display);
document.getElementById('dropdownwindow').style.marginRight = "0";
document.getElementById('dropdownwindow').style.width = "0";
/*divfreespace.style.width="0";
divfreespace.style.marginRight="100%";
divmenuleft.style.display="none";
divmenuright.style.display="none"; divmenusearch.style.display="none";
divfreespace.style.display="none";*/
document.getElementById('dropdownwindow').style.backgroundColor = "#ffffff";
/*document.getElementById('dropdownwindow').style.marginBottom="0px";
document.getElementById('dropdownwindow').style.paddingBottom="0px";*/
};
console.log('After');
}
let closebutton = document.querySelector('.close');
/*closebutton.style.position="relative";*/
closebutton.onclick = function() {
document.getElementById('dropdownwindow').style.display = "none";
}
#dropdownwindow {
display: none;
margin-left: 0;
margin-right: 100%;
height: 100vh;
z-index: 5;
}
#fullblock {
height: 100vh;
position: static;
}
.contentdropdownwindow {
display: flex;
/*justify-content: center;*/
}
.CatalogMenuLeft {
width: 25%;
}
.catalogheader {
width: 100%;
height: 30%;
/*display: flex;*/
/*justify-content: center;*/
margin-left: auto;
margin-right: auto;
}
.crossline,
.bottompart {
flex: 1;
/*width: 100%;*/
/*height: 33%;*/
}
.crosslineright {
width: 100%;
margin-top: 40px;
margin-left: 20px;
margin-right: 20px;
}
.windowheader {
flex: 1;
/*width: 100%;*/
/*height: calc(100% - 2*37.5px);*/
/*height: 34%;*/
margin: auto;
text-align: center;
}
.windowheader h4 {
flex: 1;
/*width: 100%;*/
margin: auto;
text-align: center;
}
.flexdisabledscrollbar1,
.flexdisabledscrollbar2,
.flexdisabledscrollbar3 {
flex: 0;
width: 5px;
border-right: 5px solid #f5f5f6;
}
.flexline1 {
display: flex;
justify-content: center;
height: 33%;
}
.flexline2 {
display: flex;
justify-content: center;
height: 34%;
}
.flexline3 {
display: flex;
justify-content: center;
height: 33%;
}
.flexcontent {
display: flex;
/*overflow-y: scroll;*/
}
#menulist {
flex: 1;
overflow: auto;
height: 400px;
}
.menulistitem {
padding-top: 5px;
padding-bottom: 5px;
}
/* Works on Firefox */
#menulist {
scrollbar-width: auto;
scrollbar-color: #b8b8bc #f5f5f6;
/*overflow-y: scroll;*/
/*height: 200px;*/
}
/* Works on Chrome, Edge, and Safari */
#menulist::-webkit-scrollbar-button {
display: none;
}
#menulist::-webkit-scrollbar {
width: 5px;
}
#menulist::-webkit-scrollbar-track {
background: #f5f5f6;
}
#menulist::-webkit-scrollbar-thumb {
background: #b8b8bc;
border-radius: 2.5px;
border: 0px solid #f5f5f6;
}
#menulist::-webkit-scrollbar-thumb:hover {
background: #b8b8bc;
}
.menulistitem_selected {
font-weight: bold;
cursor: pointer;
}
.menulistitem_selected::after {
content: "\2192";
/*position: absolute;*/
margin-left: 5px;
display: inline-block;
font-weight: 400;
transition: all .1s ease;
}
.close {
margin-top: -14px;
padding-right: 0px;
font-size: 24px;
cursor: pointer;
}
/*
.crossline {
display: flex;
justify-content: flex-end;
align-items: flex-start;
align-content: flex-start;
}
*/
<div id="dropdownwindow">
<!-- <div class="crossline">
<div class="close">×</div>
</div> -->
<div class="contentdropdownwindow">
<div class="CatalogMenuLeft">
<div class="catalogheader">
<div class="flexline1">
<div class="crossline">
</div>
<div class="flexdisabledscrollbar1">
</div>
</div>
<div class="flexline2">
<div class="windowheader">
<h4>Каталог</h4>
</div>
<div class="flexdisabledscrollbar2">
</div>
</div>
<div class="flexline3">
<div class="bottompart">
</div>
<div class="flexdisabledscrollbar3">
</div>
</div>
</div>
<div class="flexcontent">
<div class="windowmenulist" id="menulist">
<div class="menulistitem">
Смартфоны и гаджеты
</div>
<div class="menulistitem">
Ноутбуки и компьютеры
</div>
<div class="menulistitem">
Телевизоры, аудио-видео, Hi-Fi
</div>
<div class="menulistitem">
Бытовая техника для дома и кухни
</div>
<div class="menulistitem">
Строительство и ремонт
</div>
<div class="menulistitem">
Дом и дача
</div>
<div class="menulistitem">
Фото, видео, системы безопасности
</div>
<div class="menulistitem">
Автотовары
</div>
<div class="menulistitem">
Канцтовары, Мебель и Офисная техника
</div>
<div class="menulistitem">
Красота и здоровье
</div>
<div class="menulistitem">
Спорт и отдых
</div>
<div class="menulistitem">
Товары для геймеров
</div>
<div class="menulistitem">
Уцененные товары
</div>
<div class="menulistitem">
Подарочные сертификаты
</div>
<div class="menulistitem">
Сервисы и услуги
</div>
</div>
<!--
<div class="flexenabledscrollbar">
</div>
-->
</div>
</div>
<div class="myscroll">
</div>
<div id="dropdownwindowright">
<div class="crosslineright">
<div class="close">×</div>
</div>
<div class="CatalogMenuSearch">
</div>
<div class="CatalogMenuRight">
</div>
</div>
</div>
<!--<div>-->
<!--</div>-->
</div>
<header id="pageHeader">
<!--<div class="headerinsides">
<a href="#" class="flexcitylink">
<div class="icon">
<svg aria-hidden="true" class="Sg" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.057 8a2.012 2.012 0 01-2.019-2c0-1.103.906-2 2.02-2 1.113 0 2.018.897 2.018 2s-.905 2-2.019 2zm0-5C6.387 3 5.03 4.346 5.03 6s1.358 3 3.028 3 3.029-1.346 3.029-3-1.359-3-3.029-3zm0 11.777C6.852 13.5 3.01 9.177 3.01 6c0-2.757 2.264-5 5.047-5 2.784 0 5.047 2.243 5.047 5 0 3.174-3.841 7.5-5.047 8.777zM8.057 0C4.717 0 2 2.691 2 6c0 4.159 5.468 9.623 5.7 9.854a.509.509 0 00.714 0c.233-.23 5.7-5.695 5.7-9.854 0-3.309-2.716-6-6.057-6z" fill="currentColor"></path></svg>
</div>
<div class="mainpart">
Краснодар
</div>
</a>
<div class="headerparamswrapper">
<div class="intermediatespace">
</div>
<div class="telephonenumber">
8 (800)6003900 (круглосуточно)
</div>
<div class="addressandworkschedule">
Адрес и график работы
</div>
<div class="payment">
Оплата
</div>
<div class="delivery">
Доставка
</div>
</div>
</div>-->
<div class="headerinsides">
<span class="flexcitylinkwrapper">
<a href="#" class="flexcitylink">
<span class="icon">
<svg aria-hidden="true" class="Sg" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.057 8a2.012 2.012 0 01-2.019-2c0-1.103.906-2 2.02-2 1.113 0 2.018.897 2.018 2s-.905 2-2.019 2zm0-5C6.387 3 5.03 4.346 5.03 6s1.358 3 3.028 3 3.029-1.346 3.029-3-1.359-3-3.029-3zm0 11.777C6.852 13.5 3.01 9.177 3.01 6c0-2.757 2.264-5 5.047-5 2.784 0 5.047 2.243 5.047 5 0 3.174-3.841 7.5-5.047 8.777zM8.057 0C4.717 0 2 2.691 2 6c0 4.159 5.468 9.623 5.7 9.854a.509.509 0 00.714 0c.233-.23 5.7-5.695 5.7-9.854 0-3.309-2.716-6-6.057-6z" fill="currentColor"></path></svg>
</span>
<span class="labelforicon">
Краснодар
</span>
</a>
</span>
<span class="intermediatespace">
</span>
<span class="telephonenumber">
8 (800) 600 3900 (круглосуточно)
</span>
<span class="addressandworkschedule">
Адрес и график работы
</span>
<span class="payment">
Оплата
</span>
<span class="delivery">
Доставка
</span>
</div>
<div class="headerinsidessecondrow">
<button class="catalogbutton">Каталог товаров</button>
<span class="betweenspace">
</span>
<span class="findinfo">
<input placeholder="Поиск среди 10000 товаров" class="inputsearch"></input>
<button class="searchbutton">Найти</button>
</span>
<span class="secondbetweenspace">
</span>
<span class="loginandsignup">
<span class="loginsignupimg">
<img src="../images/header_profile-icon.png">
</span>
<span class="loginsignuptext">
Вход и регистрация
</span>
</span>
<span class="basket">
<span class="loginsignupimg">
<img src="../images/header_cart-icon.png">
</span>
<span class="loginsignuptext">
Корзина
</span>
</span>
</div>
</header>
В результате кнопка закрытия окна (с крестиком, окно появляется после нажатия на кнопку Каталог товаров) появляется в левом верхнем углу, а не правом (кнопка класса .close с блока .crosslineright). Как добиться отображения кнопки закрытия окна (.dropdownwindowright) в правом верхнем углу?
Ответы (1 шт):
Автор решения: Данил Пономаренко
→ Ссылка
let cataloglistbutton=document.querySelector('.catalogbutton');
let divmenuleft=document.querySelector('.CatalogMenuLeft');
let divmenusearch=document.querySelector('.CatalogMenuSearch');
let divmenuright=document.querySelector('.CatalogMenuRight');
let divfreespace =document.querySelector('.CatalogFreeSpace');
cataloglistbutton.onclick = function () {
console.log('Before');
if (document.getElementById('dropdownwindow').style.display=="none")
{
document.getElementById('dropdownwindow').style.position="fixed";
document.getElementById('dropdownwindow').style.marginLeft="0";
document.getElementById('dropdownwindow').style.marginTop="0";
document.getElementById('dropdownwindow').style.display="block";
console.log(document.getElementById('dropdownwindow').style.display);
document.getElementById('dropdownwindow').style.marginRight="20%";
document.getElementById('dropdownwindow').style.width="80%";
/*document.getElementById('dropdownwindowright').style.marginRight="20%";
document.getElementById('dropdownwindowright').style.marginLeft="20%";
document.getElementById('dropdownwindowright').style.width="60%";
*/
document.getElementById('dropdownwindowright').style.flex="60%";
/*divfreespace.style.width="20%";
divmenuleft.style.display="block";
divmenuright.style.display="block"; divmenusearch.style.display="block";
divfreespace.style.display="block";*/
document.getElementById('dropdownwindow').style.backgroundColor="#ffffff";
const menuelems=document.querySelectorAll('.menulistitem');
menuelems.forEach((menuelem) => { menuelem.addEventListener('mouseover', (event) => { event.target.style.cursor = "pointer";event.target.classList.add('menulistitem_selected')});
menuelem.addEventListener('mouseout', (event) => { event.target.style.cursor = "pointer"; event.target.classList.remove('menulistitem_selected')});
});
/*const simpleBar = new SimpleBar(document.querySelector('.windowmenulist'));*/
/*simpleBar.style.visibility="visible";*/
/*
document.querySelector('.windowmenulist.simplebar-track.simplebar-vertical').style.visibility="visible";
document.querySelector('.windowmenulist.simplebar-track.simplebar-vertical.simplebar-scrollbar').style.height="100%";
document.querySelector('.windowmenulist.simplebar-track.simplebar-vertical.simplebar-scrollbar').style.display="block";
*/
/*document.getElementById('dropdownwindow').style.position="absolute";*/
/*document.getElementById('dropdownwindow').style.marginBottom="0px";
document.getElementById('dropdownwindow').style.paddingBottom="0px";*/
} else {
document.getElementById('dropdownwindow').style.display="none";
document.getElementById('dropdownwindow').style.position="fixed";
document.getElementById('dropdownwindow').style.marginLeft="0";
document.getElementById('dropdownwindow').style.marginTop="0";
console.log(document.getElementById('dropdownwindow').style.display);
document.getElementById('dropdownwindow').style.marginRight="0";
document.getElementById('dropdownwindow').style.width="0";
/*divfreespace.style.width="0";
divfreespace.style.marginRight="100%";
divmenuleft.style.display="none";
divmenuright.style.display="none"; divmenusearch.style.display="none";
divfreespace.style.display="none";*/
document.getElementById('dropdownwindow').style.backgroundColor="#ffffff";
/*document.getElementById('dropdownwindow').style.marginBottom="0px";
document.getElementById('dropdownwindow').style.paddingBottom="0px";*/
};
console.log('After');
}
let closebutton=document.querySelector('.close');
/*closebutton.style.position="relative";*/
closebutton.onclick = function () {
document.getElementById('dropdownwindow').style.display="none";
}
#dropdownwindow {
display: none;
margin-left: 0;
margin-right: 100%;
height: 100vh;
z-index: 5;
}
#fullblock {
height: 100vh;
position: static;
}
.contentdropdownwindow {
display: flex;
/*justify-content: center;*/
}
.CatalogMenuLeft {
width: 25%;
}
.catalogheader {
width: 100%;
height: 30%;
/*display: flex;*/
/*justify-content: center;*/
margin-left: auto;
margin-right: auto;
}
.crossline, .bottompart {
flex: 1;
/*width: 100%;*/
/*height: 33%;*/
}
.crosslineright {
width: 100%;
margin-top: 40px;
text-align: right;
}
.windowheader {
flex: 1;
/*width: 100%;*/
/*height: calc(100% - 2*37.5px);*/
/*height: 34%;*/
margin: auto;
text-align: center;
}
.windowheader h4 {
flex: 1;
/*width: 100%;*/
margin: auto;
text-align: center;
}
.flexdisabledscrollbar1, .flexdisabledscrollbar2, .flexdisabledscrollbar3 {
flex: 0;
width: 5px;
border-right: 5px solid #f5f5f6;
}
.flexline1 {
display: flex;
justify-content: center;
height: 33%;
}
.flexline2 {
display: flex;
justify-content: center;
height: 34%;
}
.flexline3 {
display: flex;
justify-content: center;
height: 33%;
}
.flexcontent {
display: flex;
/*overflow-y: scroll;*/
}
#menulist {
flex: 1;
overflow: auto;
height: 400px;
}
.menulistitem {
padding-top: 5px;
padding-bottom: 5px;
}
/* Works on Firefox */
#menulist {
scrollbar-width: auto;
scrollbar-color: #b8b8bc #f5f5f6;
/*overflow-y: scroll;*/
/*height: 200px;*/
}
/* Works on Chrome, Edge, and Safari */
#menulist::-webkit-scrollbar-button {
display: none;
}
#menulist::-webkit-scrollbar {
width: 5px;
}
#menulist::-webkit-scrollbar-track {
background: #f5f5f6;
}
#menulist::-webkit-scrollbar-thumb {
background: #b8b8bc;
border-radius: 2.5px;
border: 0px solid #f5f5f6;
}
#menulist::-webkit-scrollbar-thumb:hover {
background: #b8b8bc;
}
.menulistitem_selected {
font-weight: bold;
cursor: pointer;
}
.menulistitem_selected::after {
content: "\2192";
/*position: absolute;*/
margin-left: 5px;
display: inline-block;
font-weight: 400;
transition: all .1s ease;
}
.close {
margin-top: -14px;
padding-right: 5px;
padding-left: 5px;
font-size: 24px;
cursor: pointer;
display: inline-block
}
/*
.crossline {
display: flex;
justify-content: flex-end;
align-items: flex-start;
align-content: flex-start;
}
*/
<div id="dropdownwindow">
<!-- <div class="crossline">
<div class="close">×</div>
</div> -->
<div class="contentdropdownwindow">
<div class="CatalogMenuLeft">
<div class="catalogheader">
<div class="flexline1">
<div class="crossline">
</div>
<div class="flexdisabledscrollbar1">
</div>
</div>
<div class="flexline2">
<div class="windowheader">
<h4>Каталог</h4>
</div>
<div class="flexdisabledscrollbar2">
</div>
</div>
<div class="flexline3">
<div class="bottompart">
</div>
<div class="flexdisabledscrollbar3">
</div>
</div>
</div>
<div class="flexcontent">
<div class="windowmenulist" id="menulist">
<div class="menulistitem">
Смартфоны и гаджеты
</div>
<div class="menulistitem">
Ноутбуки и компьютеры
</div>
<div class="menulistitem">
Телевизоры, аудио-видео, Hi-Fi
</div>
<div class="menulistitem">
Бытовая техника для дома и кухни
</div>
<div class="menulistitem">
Строительство и ремонт
</div>
<div class="menulistitem">
Дом и дача
</div>
<div class="menulistitem">
Фото, видео, системы безопасности
</div>
<div class="menulistitem">
Автотовары
</div>
<div class="menulistitem">
Канцтовары, Мебель и Офисная техника
</div>
<div class="menulistitem">
Красота и здоровье
</div>
<div class="menulistitem">
Спорт и отдых
</div>
<div class="menulistitem">
Товары для геймеров
</div>
<div class="menulistitem">
Уцененные товары
</div>
<div class="menulistitem">
Подарочные сертификаты
</div>
<div class="menulistitem">
Сервисы и услуги
</div>
</div>
<!--
<div class="flexenabledscrollbar">
</div>
-->
</div>
</div>
<div class="myscroll">
</div>
<div id="dropdownwindowright">
<div class="crosslineright">
<div class="close">×</div>
</div>
<div class="CatalogMenuSearch">
</div>
<div class="CatalogMenuRight">
</div>
</div>
</div>
<!--<div>-->
<!--</div>-->
</div>
<header id="pageHeader">
<!--<div class="headerinsides">
<a href="#" class="flexcitylink">
<div class="icon">
<svg aria-hidden="true" class="Sg" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.057 8a2.012 2.012 0 01-2.019-2c0-1.103.906-2 2.02-2 1.113 0 2.018.897 2.018 2s-.905 2-2.019 2zm0-5C6.387 3 5.03 4.346 5.03 6s1.358 3 3.028 3 3.029-1.346 3.029-3-1.359-3-3.029-3zm0 11.777C6.852 13.5 3.01 9.177 3.01 6c0-2.757 2.264-5 5.047-5 2.784 0 5.047 2.243 5.047 5 0 3.174-3.841 7.5-5.047 8.777zM8.057 0C4.717 0 2 2.691 2 6c0 4.159 5.468 9.623 5.7 9.854a.509.509 0 00.714 0c.233-.23 5.7-5.695 5.7-9.854 0-3.309-2.716-6-6.057-6z" fill="currentColor"></path></svg>
</div>
<div class="mainpart">
Краснодар
</div>
</a>
<div class="headerparamswrapper">
<div class="intermediatespace">
</div>
<div class="telephonenumber">
8 (800)6003900 (круглосуточно)
</div>
<div class="addressandworkschedule">
Адрес и график работы
</div>
<div class="payment">
Оплата
</div>
<div class="delivery">
Доставка
</div>
</div>
</div>-->
<div class="headerinsides">
<span class="flexcitylinkwrapper">
<a href="#" class="flexcitylink">
<span class="icon">
<svg aria-hidden="true" class="Sg" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.057 8a2.012 2.012 0 01-2.019-2c0-1.103.906-2 2.02-2 1.113 0 2.018.897 2.018 2s-.905 2-2.019 2zm0-5C6.387 3 5.03 4.346 5.03 6s1.358 3 3.028 3 3.029-1.346 3.029-3-1.359-3-3.029-3zm0 11.777C6.852 13.5 3.01 9.177 3.01 6c0-2.757 2.264-5 5.047-5 2.784 0 5.047 2.243 5.047 5 0 3.174-3.841 7.5-5.047 8.777zM8.057 0C4.717 0 2 2.691 2 6c0 4.159 5.468 9.623 5.7 9.854a.509.509 0 00.714 0c.233-.23 5.7-5.695 5.7-9.854 0-3.309-2.716-6-6.057-6z" fill="currentColor"></path></svg>
</span>
<span class="labelforicon">
Краснодар
</span>
</a>
</span>
<span class="intermediatespace">
</span>
<span class="telephonenumber">
8 (800) 600 3900 (круглосуточно)
</span>
<span class="addressandworkschedule">
Адрес и график работы
</span>
<span class="payment">
Оплата
</span>
<span class="delivery">
Доставка
</span>
</div>
<div class="headerinsidessecondrow">
<button class="catalogbutton">Каталог товаров</button>
<span class="betweenspace">
</span>
<span class="findinfo">
<input placeholder="Поиск среди 10000 товаров" class="inputsearch"></input>
<button class="searchbutton">Найти</button>
</span>
<span class="secondbetweenspace">
</span>
<span class="loginandsignup">
<span class="loginsignupimg">
<img src="../images/header_profile-icon.png">
</span>
<span class="loginsignuptext">
Вход и регистрация
</span>
</span>
<span class="basket">
<span class="loginsignupimg">
<img src="../images/header_cart-icon.png">
</span>
<span class="loginsignuptext">
Корзина
</span>
</span>
</div>
</header>