Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #41 (permalink)  
Старый 21.06.2020, 21:23
Аспирант
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 10.06.2020
Сообщений: 43

Сообщение от laimas Посмотреть сообщение
А можно поступить и так, пусть готовится и простая структура, а вот добавление меток и флажков в код меню, это и сделает jQury при загрузке страницы, это все что он нее потребуется.
я этого сделать не смогу. Если только Вы сделаете, а я вставлю что куда надо.
Я даже у себя в движке не могу найти где формируется меню (где находится код <ul><li></li></ul>)

я выложил измененный Вами код. Посмотрите пожалуйста правильно я все сделал.
Ответить с цитированием
  #42 (permalink)  
Старый 21.06.2020, 21:26
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Не знаю правильно ли, что вы там делаете, это же надо весь код смотреть.

Что за движок используется?
Ответить с цитированием
  #43 (permalink)  
Старый 21.06.2020, 21:32
Аспирант
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 10.06.2020
Сообщений: 43

Сообщение от laimas Посмотреть сообщение
Не знаю правильно ли, что вы там делаете, это же надо весь код смотреть.
я же выложил весь код и стили.
сейчас весь код выглядит так:
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");
		});
	}
}


Цитата:
Что за движок используется?
danneo.ru
Ответить с цитированием
  #44 (permalink)  
Старый 21.06.2020, 21:38
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от zulfukar
danneo.ru
А это из описания движка, что я прочел:

Редактирование стилей оформления CSS из админ-панели.
Редактирование шаблонов оформления из админ-панели.

То есть, прямо в админке вы можете изменить код шаблона меню.

Нужно "все смотреть", я имею ввиду весь код - html/js... я же не держу все в памяти, и что одну страницу назад было написано и этого не помню.
Ответить с цитированием
  #45 (permalink)  
Старый 21.06.2020, 21:54
Аспирант
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 10.06.2020
Сообщений: 43

Сообщение от laimas Посмотреть сообщение
А это из описания движка, что я прочел:

Редактирование стилей оформления CSS из админ-панели.
Редактирование шаблонов оформления из админ-панели.

То есть, прямо в админке вы можете изменить код шаблона меню.
В админке оформление шаблона состоит из html и тегов. Вот так к примеру выглядит меню
<nav role="navigation">
<div class="toggleMenu"><span></span><span></span><span></span></div>
{menu}
</nav>


Цитата:
Нужно "все смотреть", я имею ввиду весь код - html/js... я же не держу все в памяти, и что одну страницу назад было написано и этого не помню.
Вам дать доступ на хостинг или ...?

сайт: 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 {
    list-style: none;
     background:#fff;
     color: #000; font-weight: 400;
}
.navv:before,
.navv:after {
    content: " "; 
    display: table; 
}
.navv:after {
    clear: both;
}
.navv strong {background: #f00;
	font-weight: normal;
	padding: 10px 15px;
color: #fff;
display: block;
}
.navv ul {
    list-style: none;
    width: 15em;
    float:left;
}
.navv a {
    padding: 10px 15px;
    color:#000;
}
.navv li {
    position: relative;
}
.navv > li {
    float: left;
    border-top: 0px solid #ddd;
}
.navv > li > .parent {
    background-image: url("../images/downArrow.png");
    background-repeat: no-repeat;
    background-position: right; 
}
.navv > li > a {
    display: block; padding: 0 1.2em; font-size: 18px; line-height: 36px; transition: all .2s ease-in-out;
}
.navv > li > a:hover {
    display: block; padding: 0 1.2em;
}
.navv li  ul {
    position: absolute;
    left: -9999px;
}
.navv > li.hover > ul {
    left: 0; 
}
.navv li li.hover ul {
    left: 100%;
    top: 0;
}
.navv li li a {
    display: block;
    background: #ddd;
    position: relative;
    z-index:100;
    border-top: 1px solid #f0f0f0; 
}
.navv li li a:hover {background-color: #f00; color: #fff;}
.navv li li li a {
    background:#ccc;
    z-index:200;
    border-top: 1px solid #ddd;
}

@media screen and (max-width: 900px) {
	 .toggleMenu {
width: 30px; padding: 7px 0;
cursor: pointer;
outline: 0;
	}
	.toggleMenu > span {
    display: block;
    border-top: 2px solid #000;
    margin-top: 6px;
	}
.navv:before,
.navv:after {
    content: " "; 
    display: table; 
}
    .active {
        display: block;
    }
    .navv > li {
        float: none;
    }
    .navv > li > .parent {
        background-position: 95% 50%;
    }
    .navv li li .parent {
        background-image: url("../images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .navv ul {
        display: block;
        width: 100%; top: 45px;
    position: relative;
    }
   .navv > li.hover > ul , .navv li li.hover ul {
        position: static;
    }

}
HTML
<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>
Ответить с цитированием
  #46 (permalink)  
Старый 22.06.2020, 03:38
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от zulfukar
В админке оформление шаблона состоит из html и тегов
А из чего же оно должно еще состоять. А это {menu} код вывода самого меню, цикла. Я не знаю этого движка, но большая вероятность в том, что есть шаблон и этого вывода, если это подключение соответствующего шаблона. Если нет и это код, сами с этим не можете разобраться, бог с ним.

Но, вы говорите, что теперь все Ок и как хотелось. Оставим пока в покое все что вы наваяли, открывайте свою страницу, откройте в ней любой подраздел и не закрывая его выберите другой. Это правильно?
Ответить с цитированием
  #47 (permalink)  
Старый 22.06.2020, 11:04
Аспирант
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 10.06.2020
Сообщений: 43

Сообщение от laimas Посмотреть сообщение
открывайте свою страницу, откройте в ней любой подраздел и не закрывая его выберите другой. Это правильно?
Нет, не правильно. Но я устал перебирать разные меню. У каждого какой-то серьезный недостаток. У меня очень много времени и сил уходит на их установку.
Вы можете помочь мне исправить это?
Ответить с цитированием
  #48 (permalink)  
Старый 22.06.2020, 11:27
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от zulfukar
Вы можете помочь мне исправить это?
У меня есть работа оплачиваемая, ради спортивного интереса я ее бросать не буду. )

Я могу сказать о генеральном направлении:

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.
Ответить с цитированием
  #49 (permalink)  
Старый 22.06.2020, 16:14
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

<!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 и на Андроиде, и другого телефона мне никогда и не было нужно. Есть планшет, но тоже Андроид и с большим разрешением. Так что просите знакомых яблочников посмотреть свои шедевры для оценки, а я сам не видел от чего там такой хипишь, думаю что тоже самое, что и у других.

Последний раз редактировалось laimas, 23.06.2020 в 10:09.
Ответить с цитированием
  #50 (permalink)  
Старый 22.06.2020, 16:36
Аспирант
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 10.06.2020
Сообщений: 43

Спасибо за помощь, хорошее меню.
Подскажите как сделать, чтобы активной была только кнопка ≡, а не все поле nav (в маленьких экранах).
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужна помощь яваскриптеров espltd Элементы интерфейса 2 03.03.2017 10:38
Нужна помощь по javascript darklend Общие вопросы Javascript 0 12.01.2014 23:33
Нужна помощь: Slider wheel Alex555 Мобильный JavaScript 0 15.05.2013 18:06
Нужна помощь по слайдеру seoguru Работа 3 28.01.2013 22:02
нужна помощь dominosoko Серверные языки и технологии 4 14.03.2010 02:17