Сообщение от voraa
|
|
Это уже не стандартный интерфейс. Как пользователь узнает, что надо делать так? Ведь он привык при работе с другими программами, где есть меню просто кликать мимо.
|
Есть готовые стили, где можно олдшкулно интерфейс свой отобразить (например,
Меню Windows'7), но там меню несколько иначе работает.
В частности, разрабатывая утилиту под ПК (не под планшеты/смартфоны), пытаюсь стилизовать всё под "привычный старый интерфейс".
Вообще-то, во всех готовых пакетах, в частности, лично мне не нравится избыточное описание под каждый тэг, так как привык пользоваться обычным Блокнотом без подсветки синтаксиса.
Лучше наработать и отладить один раз сложный CSS, чем всякий раз десятки раз подписывать элементам явные стили.
К примеру, тэг menu - и так всё там очевидно: Всё нужно отобразить как стандартное меню.
Вот от этого и отталкиваюсь.
Тогда как подобное меню слишком трудно воспринимается при редактировании страницы:
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/7.css">
</head>
<body>
<ul role="menubar" class="can-hover">
<li role="menuitem" tabindex="0" aria-haspopup="true">
File
<ul role="menu">
<li role="menuitem">
<a href="#menubar">
Open <span>Ctrl+O</span>
</a>
</li>
<li role="menuitem">
<a href="#menubar">
Save <span>Ctrl+S</span>
</a>
</li>
<li role="menuitem" class="has-divider">
<a href="#menubar">
Save As... <span>Ctrl+Shift+S</span>
</a>
</li>
<li role="menuitem"><a href="#menubar">Exit</a></li>
</ul>
</li>
<li role="menuitem" tabindex="0" aria-haspopup="true">
Edit
<ul role="menu">
<li role="menuitem"><a href="#menubar">Undo</a></li>
<li role="menuitem"><a href="#menubar">Copy</a></li>
<li role="menuitem"><a href="#menubar">Cut</a></li>
<li role="menuitem" class="has-divider"><a href="#menubar">Paste</a></li>
<li role="menuitem"><a href="#menubar">Delete</a></li>
<li role="menuitem"><a href="#menubar">Find...</a></li>
<li role="menuitem"><a href="#menubar">Replace...</a></li>
<li role="menuitem"><a href="#menubar">Go to...</a></li>
</ul>
</li>
<li role="menuitem" tabindex="0" aria-haspopup="true">
View
<ul role="menu">
<li role="menuitem" tabindex="0" aria-haspopup="true">
Zoom
<ul role="menu">
<li role="menuitem"><button>Zoom In</button></li>
<li role="menuitem"><button>Zoom Out</button></li>
</ul>
</li>
<li role="menuitem"><a href="#menubar">Status Bar</a></li>
</ul>
</li>
<li role="menuitem" tabindex="0" aria-haspopup="true">
Help
<ul role="menu">
<li role="menuitem"><a href="#menubar">View Help</a></li>
<li role="menuitem"><a href="#menubar">About</a></li>
</ul>
</li>
</ul>
</body>
Тем более, работает не совсем так, как в Windows'95. Что для меня принципиально важно.
(Если не забыли: Во всех Windows меню открывается не наведением указателя, а кликом. И скрывается только по любому клику.)
Конкретно мой вариант так и работает, но пока ещё глючит и без JavaScript-вкраплений никак не получается обходиться.
(А хотелось бы.)
Спасибо!
