Цитата:
Я даже у себя в движке не могу найти где формируется меню (где находится код <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 (в маленьких экранах). |
Да они и будут скрыты, если меню кнопкой ≡ не раскрывалось.
|
Цитата:
|
Ну тут я не знаю как вы сделали, что-то во что-то не так вставлено у вас.
|
Цитата:
|
Метка на которой находится кнопка меню на моб. устройстве имеет стиль block, то есть будет заниматься всю ширину области экрана, плюс отступы и т.п. Видимо об этом вопрос? У вас это должна быть отдельная кнопка (не такие стили иметь как в примере) со стилями которые вы для div ранее прописывали.
|
Цитата:
|
.arrow {
cursor: default;
}
Это удалить из стилей |
Цитата:
|
В таком меню нет конфликтов, если не работает, то проблему нужно искать в верстке.
|
Работа такого меню основана на верстке и стилях. За флажком находится его метка связанная с ним по атрибуту id. И хотя флажок скрыт, щелчки по его метке изменяют его состояние.
Я добавил в пример тег B с текстом Logo разместив его после метки кнопки меню, которой в режиме малого экрана изменил стиль с block на inline-block. Сейчас в верстке: флажок, за ним метка, за ней логотип, а за ним тег меню UL. Эти элементы имеют одного общего родителя, это элементы братья (родственные). В CSS есть селектор соседних элементов A + B и родственных элементов A ~ B, а также псевдокласс :checked. В мобильном режиме, щелчок по кнопке меню выберет флажок, поэтому будут работать эти CSS правила:
/* соседнему с флажком элементу, а это его метка, т.е. кнопка меню
устанавливается темный фон и светлый шрифт*/
input.toggleMenu:checked + label.toggleMenu{
background: #000;
color: #fff;
}
/*братским флажкам элементам UL,
тут правила для меню и подразделов,
а селектор братский выбран потому,
что , например, за флажком метка,
а для меню, за ней еще и логотип, и только потом само меню,
определяется позиция и макс. высота*/
input.toggleMenu:checked ~ ul,
input.toggleSubmenu:checked ~ ul{
position: relative;
max-height: 5000px;
}
/*а раскрытие меню и его подразделов
определено ранее до медиазапроса
так как горизонтальное меню также раскрывается щелчком*/
input.toggleMenu:checked ~ ul,
input.toggleSubmenu:checked ~ ul,
input.toggleSubmenu:checked ~ ul li{
display: block;
}
|
Цитата:
Мне трудно самому писать стили, а те что есть я легко меняю. Вы добавили В для лого, но дело не в нем. Я даже удалил лого с сайта (сам хтмл код) и поиск удалил, но меню все равно не раскрывается. Там сейчас кроме кнопки тогл ничего больше нет. |
Ищите проблему в верстке и стилях, нет в этом меню никаких JS, которые его раскрывают, все на CSS.
|
Меню находится в теге nav, а у вас стилями в файле responsive.css d медиа-запросе @media (max-width:56.24375em) определен ему размер 40px. Меню раскрывается, но его не видно из-за размера родителя - nav. Уберите это размер из медиа-запроса и увидите свое меню.
|
Цитата:
Код:
/* < 900 */ |
Цитата:
|
У меня все работает.
В общем выбирайте элементы, справа будут его стили, разметка показывает размеры, где можно было убедиться, что меню раскрывается и искать причину. Разбирайтесь. |
Доброго времени суток всем)
Ребята, очень-очень нужна помощь: 1. Почему-то не срабатывает скрипт в модальном окне (плагин popup maker). На обычной странице все работает. 2. И подсветка area срабатывает только на главной, а на остальных страницах area работает, но без подсветки почему-то. Скрипт такой: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.maphilight.js"></script> <script type="text/javascript"> $(function() { $('.map-6').maphilight(); $('#squidheadlink').mouseover(function(e) { $('#squidhead').mouseover(); }).mouseout(function(e) { $('#squidhead').mouseout(); }).click(function(e) { e.preventDefault(); }); }); </script> ----------------------------------------------------------------- В самом модальном окне стоит: <div id="map-img-6"> <img src="https://logpn.ru/wp-content/uploads/2020/09/Ckhema-2.jpg" usemap="#map-6" class="map-6" id="map-6"></div> <map name="map-6"> <area shape="rect" data-maphilight='{"alwaysOn":"true", "strokeColor":"ff0000","strokeWidth":0.3,"fillColo r":"ff0000","fillOpacity":0.6}' coords="548,190,658,310" class="test" id="test" alt="test"> </map> |
Olga Zdorenko,
выбросить все jquery кроме одной версии!!! Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Удалите свой вопрос и создайте свою, новую, тему. Поместите свой код в ней в теги HTML, что можно сделать кнопкой <> в форме добавления сообщения.
|
рони,
пора бы добавить форме то что давно предлагалось, подсказки, а то через раз "Пожалуйста, отформатируйте свой код! Для этого его...". Ну негоже help держать за километр от объекта. :) |
laimas,
ваши бы слова, да ... :) :yes: |
Цитата:
|
Уважаемые специалисты подскажите пожалуйста
Команды JavaScript Для вывода изображения из библиотеки Adobe Animate var libImage = new lib.MyImage(); this.addChild(libImage); где MyImage() конкретное имя изображения в библиотеки Но если вместо конкретного имени MyImage(), поставить переменную, то команды не работают. Может посоветуете как через переменную вызывать различные изображения из библиотеки Animate на экран. Спасибо. |
| Часовой пояс GMT +3, время: 05:40. |