<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tom menu</title>
<style>
header{
font-family: Arial, Helvetica, sans-serif;
}
.dws-menu *{
margin: 0;
padding: 0;
}
.dws-menu ul,
.dws-menu ol{
list-style: none;
}
.dws-menu > ul li{
position: relative;
display: inline-block;
}
.dws-menu > ul li a,
.dws-menu > ul li label{
display: block;
background: #ffffff;
padding: 15px 30px 15px 40px;
font-size: 14px;
color: #000000;
text-decoration: none;
text-transform:uppercase;
}
/*sub menu*/
.dws-menu li ul{
position: absolute;
min-width: 230px;
display: none;
}
.dws-menu li > ul li{
border-top: 1px solid #ffffff;
}
.dws-menu li > ul li a,
.dws-menu li > ul li label{
padding: 10px;
text-transform: none;
background: #e4e4e5;
}
.dws-menu li > ul li ul{
position: absolute;
right: -230px;
top: 0;
}
input.toggleMenu:checked ~ ul,
input.toggleSubmenu:checked ~ ul,
input.toggleSubmenu:checked ~ ul li{
display: block;
}
.dws-menu input{
display: none;
}
.dws-menu label.toggleMenu{
background: #c9c9c9;
display: none;
padding: 15px 40px;
font-size: 18px;
cursor: pointer;
position: relative;
}
.dws-menu label.toggleSubmenu:before{
position: absolute;
top: 17px;
right: 10px;
font-size: 11px;
content: "▼";
color: #b7b7b7;
}
.dws-menu label.toggleMenu{
font-size: 24px;
}
@media all and (max-width: 800px){
.dws-menu{
overflow: hidden;
}
.dws-menu ul{
display: block;
max-height: 0;
}
.dws-menu ul li{
display: block;
}
.dws-menu li>ul li ul{
position: absolute;
right: auto;
top: auto;
}
.dws-menu label.toggleMenu{
display: inline-block;
}
input.toggleMenu:checked + label.toggleMenu{
background: #000;
color: #fff;
}
input.toggleMenu:checked ~ ul,
input.toggleSubmenu:checked ~ ul{
position: relative;
max-height: 5000px;
}
.dws-menu > ul li a,
.dws-menu > ul li label{
padding-left: 15px;
}
.dws-menu .navv > li{
border-bottom: 1px solid #777;
}
.dws-menu > ul li ul li a {
padding-left: 25px;
}
input.toggleSubmenu:checked + label{
background: #454547;
color: #fff;
}
.dws-menu label.toggleSubmenu:before{
content: "►";
color: #454547;
}
.dws-menu input.toggleSubmenu:checked + label.toggleSubmenu:before{
content: "▼";
color: #ffffff;
}
}
b {
font-size: 34px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
$('ul.navv a.arrow').replaceWith(function(i, e) {
return '<input type="checkbox" class="toggleSubmenu" id="sub'+i+'"><label for="sub'+i+'" class="toggleSubmenu">'+e+'</label>'
});
$('ul.navv').on('change', 'input', function(e) {
$(e.delegateTarget).find('input').not(this).prop('checked', false)
});
});
</script>
</head>
<body>
<header>
<!-- класс dws-menu в админке можете оставить и свой, но заменив его и стилях -->
<nav class="dws-menu">
<!-- это что вместо старого в админке
стилизовать под бывший div нужно label class="toggleMenu" -->
<input type="checkbox" id="menu" class="toggleMenu">
<label for="menu" class="toggleMenu">≡</label>
<!-- end of changes in admin panel -->
<b>Logo</b>
<ul class="navv">
<li>
<a class="arrow" href="/">Новости</a>
<ul>
<li><a href="/news/mir/">В мире</a></li>
<li><a href="/news/sng/">СНГ</a></li>
<li><a href="/news/blijniy_vostok/">Турция и Ближний Восток</a></li>
<li><a href="/news/middle_east/">Средний Восток</a></li>
<li><a href="/news/afrika/">Африка</a></li>
<li><a href="/news/ekonomika/">Экономика</a></li>
<li><a href="/news/armor/">Оружие и военное дело</a></li>
<li><a href="/news/analitika/">Аналитика и интервью</a></li>
<li><a href="/news/mosaic/">Мозаика</a></li>
</ul>
</li>
<li>
<a class="arrow" href="/">Статьи</a>
<ul>
<li><a href="/article/sobytia-i-fakty/">События и факты</a></li>
<li><a href="/article/agida-i-figh/">Агида и фигх</a></li>
<li><a href="/article/analitika-i-polemika/">Аналитика и полемика</a></li>
<li><a href="/article/iskazenia-tekstov/">Искажения текстов</a></li>
<li><a href="/article/islam/">Ислам</a></li>
<li><a href="/article/licnosti/">Личности</a></li>
<li><a href="/article/hadisy/">Хадисы</a></li>
<li><a href="/article/drugie-verovania/">Другие верования</a></li>
</ul>
</li>
<li><a href="/down/">Каталог файлов</a></li>
<li>
<a class="arrow" href="/">Медиа</a>
<ul>
<li><a href="/photos/">Фото</a></li>
<li><a href="/video/">Видео</a></li>
</ul>
</li>
<li><a href="/forum/">Форум</a></li>
</ul>
</nav>
</header>
</body>
</html>
Здесь не подключается никаких сторонних шрифтов, стрелочки и в системных есть, как и ≡. Вы может заменить их на шрифт их иконок и т.п.
Для того чтобы горизонтальное меню раскрывалось также по щелчку, стили подразделов, и некоторые другие, вынесены из медиа-запроса @media all and (max-width: 800px) в общие. Убраны транзакции, тени, флекс. Кое что изменено, кое что добавлено. В остальном, отладчик есть - тренируйтесь, уже только с CSS.
Обработчик изменения состояния флажков добавлен. Если поведение такое нужно только в горизонтальном меню, значит выполнение в обработчике определять по условию.
Стилизация по наведению мыши, можете добавлять, но почитать о :hover на моб. устройствах (с чем вы боролись), и о том, что я ранее говорил - на этих устройствах иные события, и либо сами, либо JQ Mobile.
Что там такого особенного с этим же на iPod, не знаю, у меня смарт-часы с экраном 640х480 и на Андроиде, и другого телефона мне никогда и не было нужно. Есть планшет, но тоже Андроид и с большим разрешением. Так что просите знакомых яблочников посмотреть свои шедевры для оценки, а я сам не видел от чего там такой хипишь, думаю что тоже самое, что и у других.