Подскажите если не трудно какие иконки выбрали бы вы??? СПАСИБО
|
Цитата:
Если и для элементов активных ссылок меню иконки, то они имеют смысл если ассоциируются с их текстами, поэтому тут сами анализируйте и выбирайте. Могу лишь посоветовать следующее. Шрифт Font Awesome в комплекте, это приличный вес, а вы из всего используете скорее не более нескольких процентов. Поэтому можно в этом шрифте оставить только нужное, а также добавить недостающее или подходящее из других шрифтов или просто из SVG наборов в каком либо онлайн редакторе, например этом. В результате вы получите заметно облегченный набор содержащий только необходимое. |
Спасибо
|
У элементов имеющих вложения это стрелка: у закрытого - повернута вправо, у открытого - вниз, показывая раскрытый список. Поворачивать ее можно анимацией.
Не понимаю как можно повернуть анимацией, подскажите пожалуйста??? |
Цитата:
Я давал ссылку на страницу примеров использования этого шрифта, там есть и анимированные иконки, а также код этих примеров в котором по классам можно понять, что к чему. |
Доброго дня. Подобная проблема. После клика на ссылке страница открывается с закрытым аккордеоном. А надо, чтоб оставалось открытым на кликнутой ссылке. сайт
<script type="text/javascript" src="http://delaisait.ucoz.ru/js/jQuery/plugin/multiple-accordion.js"></script> <script language="JavaScript"> $(document).ready(function() { $(".dssection").accordion({ accordion:true, speed: 50, closedSign: '<img src="http://gtrad.ucoz.net/arvniz.gif">', openedSign: '<img src="http://gtrad.ucoz.net/arvverh.gif">' }); }); </script> <div class="dssection"> <ul> <li><a href="#">Каталог</a> <ul> <li><a href="#http://gtrad.ucoz.net/index/0-19">БРС</a> <ul> <li><a href="#http://gtrad.ucoz.net/index/0-19">Камлоки</a> <ul> <li><a href="http://gtrad.ucoz.net/publ/14-1-0-2">Алюминий</a></li> <li><a href="http://gtrad.ucoz.net/index/0-39">Нержа</a></li> <li><a href="#">Полипропилен</a></li> <li><a href="#">Кольца</a></li> <li><a href="#">Размеры</a></li> <li><a href="#">Адаптеры</a> <ul> <li><a href="#">Под приварку</a></li> <li><a href="#">Фланцевые</a></li> <li><a href="#">Подуровень 3</a></li> <li><a href="#">Подуровень 4</a></li> </ul> </li> </ul> </li> <li><a href="#">Буровые</a></li> <li><a href="#">Подуровень 3</a></li> <li><a href="#">Подуровень 4</a></li> </ul> </li> <li><a href="#">Уровень 1-2</a></li> <li><a href="#">Уровень 1-3</a></li> <li><a href="#">Рукава</a> <ul> <li><a href="#">Рукава 1</a></li> <li><a href="#">Рукава 2</a></li> <li><a href="#">Подуровень 3</a></li> <li><a href="#">Подуровень 4</a></li> </ul> </li> <li><a href="#">Уровень 1-4</a></li> </ul> </li> <li><a href="#">Фильтр</a></li> <li><a href="#">2я ячейка пунктов</a> <ul> <li><a href="#">Уровень 1</a></li> <li><a href="#">Уровень 2 переход</a> <ul> <li><a href="#">Подуровень 1</a></li> <li><a href="#">Подуровень 2</a></li> <li><a href="#">Подуровень 3</a></li> <li><a href="#">Подуровень 4</a></li> </ul> </li> <li><a href="#">Уровень 1-2</a></li> <li><a href="#">Уровень 1-3</a></li> <li><a href="#">Уровень 1-4</a></li> </ul> </li> <li><a href="#">3я ячейка пунктов</a> <ul> <li><a href="#">Уровень 1</a></li> <li><a href="#">Уровень 1-2</a></li> <li><a href="#">Уровень 2 переход</a> <ul> <li><a href="#">Подуровень 1</a></li> <li><a href="#">Подуровень 2</a></li> <li><a href="#">Подуровень 3</a></li> </ul> </li> </ul> </li> </ul> </div> и скрипт /* * jQuery UI Multilevel Accordion v.1 * Copyright (c) 2011 Pieter Pareit * [url]http://www.scriptbreaker.com[/url] */ //plugin definition (function($){ $.fn.extend({ //передать переменную options в функцию accordion: function(options) { var defaults = { accordion: 'true', speed: 300, closedSign: '[+]', openedSign: '[-]' }; // Расширьте наши параметры по умолчанию с предоставленными вами. var opts = $.extend(defaults, options); //Назначить текущий элемент переменной, в этом случае это элемент UL var $this = $(this); //добавьте отметку [+] в многоуровневое меню $this.find("li").each(function() { if($(this).find("ul").size() != 0){ //добавить многоуровневый знак рядом со ссылкой $(this).find("a:first").append("<span>"+ opts.closedSign +"</span>"); //избегайте прыгать в верхнюю часть страницы, когда href является # if($(this).find("a:first").attr('href') == "#"){ $(this).find("a:first").click(function(){return false;}); } } }); //открытый активный уровень $this.find("li.active").each(function() { $(this).parents("ul").slideDown(opts.speed); $(this).parents("ul").parent("li").find("span:first").html(opts.openedSign); }); $this.find("li a").click(function() { if($(this).parent().find("ul").size() != 0){ if(opts.accordion){ //Ничего не делать, когда список открыт if(!$(this).parent().find("ul").is(':visible')){ parents = $(this).parent().parents("ul"); visible = $this.find("ul:visible"); visible.each(function(visibleIndex){ var close = true; parents.each(function(parentIndex){ if(parents[parentIndex] == visible[visibleIndex]){ close = false; return false; } }); if(close){ if($(this).parent().find("ul") != visible[visibleIndex]){ $(visible[visibleIndex]).slideUp(opts.speed, function(){ $(this).parent("li").find("span:first").html(opts.closedSign); }); } } }); } } if($(this).parent().find("ul:first").is(":visible")){ $(this).parent().find("ul:first").slideUp(opts.speed, function(){ $(this).parent("li").find("span:first").delay(opts.speed).html(opts.closedSign); }); }else{ $(this).parent().find("ul:first").slideDown(opts.speed, function(){ $(this).parent("li").find("span:first").delay(opts.speed).html(opts.openedSign); }); } } }); } }); })(jQuery); и css .dssection {background: #f3f3f5;padding:0;list-style:none;} .dssection ul{padding: 0;margin: 0;font-size: 11x;line-height: 12px;list-style: none;} .dssection li {;list-style: none;} /*menu0*/ .dssection li a {display: block;line-height: 12px;/*text-indent:5px;*/padding-left: 5px;color:#000;height: 15px;text-decoration: none;font-size: 11px;font-weight: normal;outline:none;} .dssection li a:hover {display: block;background: #e6e6e6;text-decoration:none;} /*menu-1 */ .dssection ul ul {background:#fff;/*padding: 10px 0 10px 0*/;display:none;} .dssection ul ul li {margin: 0;padding: 0;clear: both;} .dssection ul ul li a {/* Цвет фона внутри */background: #fff;padding: 0px 0 0 0;height:15px;line-height: 12px;text-decoration: none;/* Цвет текста */color: #005e2b;text-indent:10px;font-size:11px;} .dssection ul ul li.active a {color: #000;font-weight: bold;} .dssection ul ul li a:hover {/*menu-1 */background: #e6e6e6;padding: 0px 0 0 0;height:15px;line-height: 12px;text-decoration: none;/* Цвет текста при наведении */color: #005e2b;text-indent:10px;/* Размер текста при наведении */font-size:11px;} /*menu-2 */ .dssection ul ul ul li a {color:#000;padding-left:5px;} .dssection ul ul ul li.active a {color: #000;font-weight: bold;} .dssection ul ul ul li a:hover {/* menu 2 */background-color:#D3CEB8;/* Цвет текста пункта при наведении */color:#675C7C;padding-left: 5px;} /*menu-3 */ .dssection ul ul ul ul li a {color:#000;padding-left:10px;} .dssection ul ul ul li.active a {color: #000;font-weight: bold;} .dssection ul ul ul ul li a:hover {/* menu 2 */background-color:#D3CEB8;/* Цвет текста пункта при наведении */color:#675C7C;padding-left: 10px;} /*menu-4 */ .dssection ul ul ul ul ul li a {color:#ff0000;padding-left:15px;} .dssection ul ul ul li.active a {color: #000;font-weight: bold;} .dssection ul ul ul ul ul li a:hover {background-color:#D3CEB8;color:#675C7C;padding-left: 15px;} .dssection ul span{float: right;clear:both; padding-right:5px} |
Шибалов,
предположим выбрали Фланцевые, сервер, выбранному пункту меню, ставит класс uMenuItemA (строка 72), тогда собираем всех родителей и кликаем (строка 49). на вашем сайте это не сработет, там не дерево в меню ... связь между блоками меню одному вам известна. <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .dssection {background: #f3f3f5;padding:0;list-style:none;} .dssection ul{padding: 0;margin: 0;font-size: 11x;line-height: 12px;list-style: none;} .dssection li {;list-style: none;} /*menu0*/ .dssection li a {display: block;line-height: 12px;/*text-indent:5px;*/padding-left: 5px;color:#000;height: 15px;text-decoration: none;font-size: 11px;font-weight: normal;outline:none;} .dssection li a:hover {display: block;background: #e6e6e6;text-decoration:none;} /*menu-1 */ .dssection ul ul {background:#fff;/*padding: 10px 0 10px 0*/;display:none;} .dssection ul ul li {margin: 0;padding: 0;clear: both;} .dssection ul ul li a {/* Цвет фона внутри */background: #fff;padding: 0px 0 0 0;height:15px;line-height: 12px;text-decoration: none;/* Цвет текста */color: #005e2b;text-indent:10px;font-size:11px;} .dssection ul ul li.active a {color: #000;font-weight: bold;} .dssection ul ul li a:hover {/*menu-1 */background: #e6e6e6;padding: 0px 0 0 0;height:15px;line-height: 12px;text-decoration: none;/* Цвет текста при наведении */color: #005e2b;text-indent:10px;/* Размер текста при наведении */font-size:11px;} /*menu-2 */ .dssection ul ul ul li a {color:#000;padding-left:5px;} .dssection ul ul ul li.active a {color: #000;font-weight: bold;} .dssection ul ul ul li a:hover {/* menu 2 */background-color:#D3CEB8;/* Цвет текста пункта при наведении */color:#675C7C;padding-left: 5px;} /*menu-3 */ .dssection ul ul ul ul li a {color:#000;padding-left:10px;} .dssection ul ul ul li.active a {color: #000;font-weight: bold;} .dssection ul ul ul ul li a:hover {/* menu 2 */background-color:#D3CEB8;/* Цвет текста пункта при наведении */color:#675C7C;padding-left: 10px;} /*menu-4 */ .dssection ul ul ul ul ul li a {color:#ff0000;padding-left:15px;} .dssection ul ul ul li.active a {color: #000;font-weight: bold;} .dssection ul ul ul ul ul li a:hover {background-color:#D3CEB8;color:#675C7C;padding-left: 15px;} .dssection ul span{float: right;clear:both; padding-right:5px} .dssection .uMenuItemA > a{ border: 1px solid #FF0000; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://delaisait.ucoz.ru/js/jQuery/plugin/multiple-accordion.js"></script> <script> $(function() { $(".dssection").accordion({ accordion: true, speed: 50, closedSign: '<img src="https://gtrad.ucoz.net/arvniz.gif">', openedSign: '<img src="https://gtrad.ucoz.net/arvverh.gif">' }); $(".uMenuItemA").parentsUntil(".dssection").add(".uMenuItemA").find("a:first").click(); }); </script> </head> <body> <div class="dssection"> <ul> <li><a href="#">Каталог</a> <ul> <li><a href="#http://gtrad.ucoz.net/index/0-19">БРС</a> <ul> <li><a href="#http://gtrad.ucoz.net/index/0-19">Камлоки</a> <ul> <li><a href="http://gtrad.ucoz.net/publ/14-1-0-2">Алюминий</a></li> <li><a href="http://gtrad.ucoz.net/index/0-39">Нержа</a></li> <li><a href="#">Полипропилен</a></li> <li><a href="#">Кольца</a></li> <li><a href="#">Размеры</a></li> <li ><a href="#">Адаптеры</a> <ul> <li><a href="#">Под приварку</a></li> <li class="uMenuItemA"><a href="#">Фланцевые</a></li> <li><a href="#">Подуровень 3</a></li> <li><a href="#">Подуровень 4</a></li> </ul> </li> </ul> </li> <li><a href="#">Буровые</a></li> <li><a href="#">Подуровень 3</a></li> <li><a href="#">Подуровень 4</a></li> </ul> </li> <li><a href="#">Уровень 1-2</a></li> <li><a href="#">Уровень 1-3</a></li> <li><a href="#">Рукава</a> <ul> <li><a href="#">Рукава 1</a></li> <li><a href="#">Рукава 2</a></li> <li><a href="#">Подуровень 3</a></li> <li><a href="#">Подуровень 4</a></li> </ul> </li> <li><a href="#">Уровень 1-4</a></li> </ul> </li> <li><a href="#">Фильтр</a></li> <li><a href="#">2я ячейка пунктов</a> <ul> <li><a href="#">Уровень 1</a></li> <li><a href="#">Уровень 2 переход</a> <ul> <li><a href="#">Подуровень 1</a></li> <li><a href="#">Подуровень 2</a></li> <li><a href="#">Подуровень 3</a></li> <li><a href="#">Подуровень 4</a></li> </ul> </li> <li><a href="#">Уровень 1-2</a></li> <li><a href="#">Уровень 1-3</a></li> <li><a href="#">Уровень 1-4</a></li> </ul> </li> <li><a href="#">3я ячейка пунктов</a> <ul> <li><a href="#">Уровень 1</a></li> <li><a href="#">Уровень 1-2</a></li> <li><a href="#">Уровень 2 переход</a> <ul> <li><a href="#">Подуровень 1</a></li> <li><a href="#">Подуровень 2</a></li> <li><a href="#">Подуровень 3</a></li> </ul> </li> </ul> </li> </ul> </div> </body> </html> |
Посоветуете, как выкрутиться?
|
Шибалов,
на сервере нужно сделать нормальную иерархию пунктов. нужен специалист по php и html. |
вот здесь уменьшил меню. Всё вроде работает, а на сайте не хочет.
|
Часовой пояс GMT +3, время: 23:59. |