Сообщение от voraa
|
У вас alert нем дает закрываться меню. Он создает модальное окно, которое не дает коду выполняться дальше, пока его не закрыть.
Замените alert на что нибудь другое, например на console.log и все нормально работает.
|
У меня меню закрывается после нажатия кнопки в Alert'е. Это - не принципиально.
(Даже показательно: Если по клику меню не закрылось, значит пошёл некий процесс.)
Проблема в другом: Даже при отсутствии onclick-обработчика меню не закрывается!
<html>
<head>
<style>
menu {
display :inline-block;
list-style-type :none;
margin :0;
padding :0;
}
input[type=checkbox] ~ menu li {
display :inline-block;
vertical-align :top;
}
input[type=checkbox] ~ menu li menu {
display :none;
}
input[type=checkbox]:checked ~ menu li input:checked + menu {
display :block;
}
input[type=checkbox] ~ menu li menu li:first-child {
border-top :thick outset grey;
}
input[type=checkbox] ~ menu li menu li:last-child {
border-bottom :thick outset grey;
}
input[type=checkbox] ~ menu li menu li input {
border-left :thick outset grey;
border-right :thick outset grey;
}
input[type=checkbox] ~ menu li menu li input:hover {
border-left :thick outset grey;
border-right :thick outset grey;
background-color:red;
}
input[type=checkbox]:checked ~ menu li menu li input:hover,
input[type=checkbox]:checked ~ menu li menu li input:checked {
border-left :thick inset grey;
border-right :thick inset grey;
background-color:red;
}
input[type=checkbox] ~ menu li input {
border-top :thin outset transparent;
border-bottom :thin outset transparent;
border-left :thin outset transparent;
border-right :thin outset transparent;
margin :0;
padding :0;
appearance :none;
}
input[type=checkbox] ~ menu li input:hover {
border-top :thin outset grey;
border-bottom :thin outset grey;
border-left :thin outset grey;
border-right :thin outset grey;
}
input[type=checkbox]:checked ~ menu li input:checked {
border-top :thin inset grey;
border-bottom :thin inset grey;
border-left :thin inset grey;
border-right :thin inset grey;
}
input[type=checkbox] ~ menu li menu {
background-color:yellow;
display :none;
position :absolute;
}
input[type=checkbox] ~ menu li input:checked + menu {
background-color:red;
}
input[type=checkbox] ~ menu li menu li {
display :block;
}
input[type=checkbox] ~ menu li menu li hr {
border-top :thin inset grey;
border-bottom :thin inset grey;
border-left :thick outset grey;
border-right :thick outset grey;
width :calc(100% - thick);
margin :0;
}
input[type=checkbox] ~ menu li menu li input {
background-color:pink;
display :block;
width :calc(100%);
padding-right :1em;
}
input[type=checkbox] ~ menu li menu li:not([title]) menu {
background-color:green;
display :none;
left :100%;
}
input[type=checkbox] ~ menu li menu li:not([title]) input:checked + menu {
background-color:blue;
display :inline-block;
position :absolute;
top :calc(100% - 2em);
left :calc(100% + 0em);
}
input[type=checkbox] ~ menu li menu li:not([title]) input::after {
position :absolute;
right :0.5em;
color :yellow;
content :"\25B6";
visibility :visible;
}
input[type=checkbox] ~ menu li menu li[title] input::after {
visibility :hidden;
}
input[type=checkbox] ~ menu li menu li input:checked::after {
color :blue;
}
input[type=checkbox] ~ menu li menu li input + menu {
background-color:green;
display :none;
margin :0;
padding :0;
}
input[type=checkbox] ~ menu li menu li input:checked {
border-left :thick inset grey;
border-right :thick inset grey;
background-color:yellow;
}
input[type=radio]::before {
content :attr(value) attr(top);
}
</style>
</head>
<body>
<label for=MenuBar>
<input type=checkbox autocheck id=MenuBar checked style=display:inline />
<menu>
<li title='File'>
<input type=radio name=mnu1 value='File' />
<menu>
<li title='New'><input type=radio name=mnu2 value='New' /></li>
<li><hr /></li>
<li title='Exit'><input type=radio name=mnu2 value='Exit' /></li>
</menu>
</li>
<li title='Edit'>
<input type=radio name=mnu1 value='Edit' />
<menu>
<li title='Undo'><input type=radio name=mnu2 value='Undo' /></li>
<li title='Cut'><input type=radio name=mnu2 value='Cut' /></li>
<li title='Copy'><input type=radio name=mnu2 value='Copy' /></li>
<li title='Paste'><input type=radio name=mnu2 value='Paste' /></li>
<li>
<input type=radio name=mnu2 value='Paste...' />
<menu>
<li title='From clipboard'><input type=radio name=mnu3 value='From clipboard' onclick='console.log(this.value)' /></li>
<li title='From file'><input type=radio name=mnu3 value='From file' onclick='console.log(this.value)' /></li>
</menu>
</li>
<li title='Select all'><input type=radio name=mnu2 value='Select all' onclick='console.log(this.value)' /></li>
</menu>
</li>
</menu>
</label>
<script>
document
.querySelectorAll("input[type=radio]")
.forEach(function(el) {
el.addEventListener("mouseover", function() { this.checked = true; });
// el.addEventListener("click", () => document.getElementById("MenuBar").click());
});
</script>
</body>
|
Цитата:
|
|
Но есть другая проблема - меню не закрывается, если пользователь передумал. Кликнул по Edit, подменю отрылось. А дальше он не хочет ничего выбирать. Как закрыть его?
|
Вторым нажатием на Edit (вариант в начале так и работает).
|
Цитата:
|
|
Клик в пустое пространство не работает.
|
Да, вот это - второй момент. Как тут быть?
Вешать на body событие onclick - меню вообще перестаёт открываться.
P.S.: Предыдущий вариант со скрытыми input-radio, но на a-href - работал.
Решил вот полностью переработать свой, так сказать, "концепт": Поудалял все "якоря".