Цитата:
Я даже у себя в движке не могу найти где формируется меню (где находится код <ul><li></li></ul>) я выложил измененный Вами код. Посмотрите пожалуйста правильно я все сделал. |
Не знаю правильно ли, что вы там делаете, это же надо весь код смотреть.
Что за движок используется? |
Цитата:
сейчас весь код выглядит так: var ww = document.body.clientWidth; $(document).ready(function() { $(".navv li a").each(function() { if ($(this).next().length > 0) { $(this).addClass("parent"); }; }) $(".toggleMenu").click(function(e) { e.preventDefault(); $(this).toggleClass("active"); $(".navv").toggle(); }); adjustMenu(); }) $(window).bind('resize orientationchange', function() { ww = document.body.clientWidth; adjustMenu(); }); var adjustMenu = function() { if (ww < 900) { $(".toggleMenu").css("display", "inline-block"); if (!$(".toggleMenu").hasClass("active")) { $(".navv").hide(); } else { $(".navv").show(); } $(".navv li").unbind('mouseenter mouseleave'); $(".navv li a.parent").unbind('click').bind('click', function(e) { // must be attached to anchor element to prevent bubbling e.preventDefault(); $(this).parent("li").toggleClass("hover"); }); } else if (ww >= 900) { $(".toggleMenu").css("display", "none"); $(".navv").show(); $(".navv li").removeClass("hover"); $(".navv li a").unbind('click'); $(".navv li a.parent").click(function(e) { // must be attached to anchor element to prevent bubbling e.preventDefault(); $(this).parent("li").toggleClass("hover"); }); } } Цитата:
|
Цитата:
Редактирование стилей оформления CSS из админ-панели. Редактирование шаблонов оформления из админ-панели. То есть, прямо в админке вы можете изменить код шаблона меню. Нужно "все смотреть", я имею ввиду весь код - html/js... я же не держу все в памяти, и что одну страницу назад было написано и этого не помню. |
Цитата:
<nav role="navigation"> <div class="toggleMenu"><span></span><span></span><span></span></div> {menu} </nav> Цитата:
сайт: http://new.313news.net Вот скрипт: var ww = document.body.clientWidth; $(document).ready(function() { $(".navv li a").each(function() { if ($(this).next().length > 0) { $(this).addClass("parent"); }; }) $(".toggleMenu").click(function(e) { e.preventDefault(); $(this).toggleClass("active"); $(".navv").toggle(); }); adjustMenu(); }) $(window).bind('resize orientationchange', function() { ww = document.body.clientWidth; adjustMenu(); }); var adjustMenu = function() { if (ww < 900) { $(".toggleMenu").css("display", "inline-block"); if (!$(".toggleMenu").hasClass("active")) { $(".navv").hide(); } else { $(".navv").show(); } $(".navv li").unbind('mouseenter mouseleave'); $(".navv li a.parent").unbind('click').bind('click', function(e) { // must be attached to anchor element to prevent bubbling e.preventDefault(); $(this).parent("li").toggleClass("hover"); }); } else if (ww >= 900) { $(".toggleMenu").css("display", "none"); $(".navv").show(); $(".navv li").removeClass("hover"); $(".navv li a").unbind('click'); $(".navv li a.parent").click(function(e) { // must be attached to anchor element to prevent bubbling e.preventDefault(); $(this).parent("li").toggleClass("hover"); }); } } CSS Код:
.navv { <nav role="navigation"> <div class="toggleMenu"><span></span><span></span><span></span></div> <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> |
Цитата:
Но, вы говорите, что теперь все Ок и как хотелось. Оставим пока в покое все что вы наваяли, открывайте свою страницу, откройте в ней любой подраздел и не закрывая его выберите другой. Это правильно? |
Цитата:
Вы можете помочь мне исправить это? |
Цитата:
Я могу сказать о генеральном направлении: 1) Выбросить имеющееся меню вместе с кодом, ибо в нем, мягко говоря, безобразие. 2) Взять меню по ссылке, тем более что это урок расписанный. 3) В меню своем (в шаблоне) это: <div class="toggleMenu"><span></span><span></span><span></span></div> пока заменить на: <input type="checkbox" id="menu" class="toggleMenu"> <label for="menu" class="toggleMenu">≡</label> 3) Чтобы иметь такую же структуру меню как и по ссылке, достаточно выполнить небольшой js-код: $(function() { $('ul.navv a.arrow').each(function(i, e) { $(e).removeAttr('href') .before('<input type="checkbox" class="toggleSubmenu" id="sub'+i+'">') .after('<label for="sub'+i+'" class="toggleSubmenu">'+e.textContent+'</label>') }); }); и ваше меню будет работать чисто на CSS как и по ссылке. Здесь у ссылок раскрывающих меню атрибут href удаляется вообще, безобразия бессмысленного unbind().bind() не требуется и отменять действие по умолчанию тоже. Но также будут оставаться раскрытыми ранее раскрытые разделы. Можно заменить type="checkbox" на type="radio" и тогда ранее раскрытый раздел будет скрываться. Но при этом нельзя будет закрыть раскрытый раздел повторным нажатием на кнопку. Поэтому флажки и добавить небольшой обработчик который будет закрывать ранее раскрытое. А вот должен ли он влиять на поведение только в горизонтальном меню, или в мобильном тоже, это не мне решать, так что пока код этого обработчика можно не приводить. Тем более, что в исходном состоянии разделы в горизонтальном меню будут раскрываться по наведению мыши. Все, а далее только CSS править под свое. Пробуйте, а чтобы в горизонтальном меню раскрывалось по щелчку, потребуется немного не так модифицировать a.arrow, и немного изменить CSS. Можете не на сайте тренироваться, а на простом html файле, в котором подключить и jQuery. |
<!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 и на Андроиде, и другого телефона мне никогда и не было нужно. Есть планшет, но тоже Андроид и с большим разрешением. Так что просите знакомых яблочников посмотреть свои шедевры для оценки, а я сам не видел от чего там такой хипишь, думаю что тоже самое, что и у других. |
Спасибо за помощь, хорошее меню.
Подскажите как сделать, чтобы активной была только кнопка ≡, а не все поле nav (в маленьких экранах). |
Часовой пояс GMT +3, время: 13:16. |