Вечная проблема с подкатегориями в меню…
-
Всем привет.
Уже больше месяца борюсь с подкатегориями в навигационной панели. Как-то раз получилось сделать, стрелочки работали ( вверх,низ ) и вобще отображались дочерние элементы ( подменю ).Помогите, пожалуйста, понять что не так …
CSS стили меню:
.box-category { padding: 0px; } .side_bar_menu { list-style: none; margin: 0; padding: 0 0 1em; } .side_bar_menu ul { list-style: none; } /* Убираем отступ у inline-block элементов */ .side_bar_menu li, .side_bar_menu li li, .side_bar_menu li li li { position: relative; font-size: 0; line-height: 1.5; } /* Возвращаем размер шрифта ссылок */ .side_bar_menu li a, .side_bar_menu li li a, .side_bar_menu li li li a { font-size: 16px; } .side_bar_menu > li { margin: 0px 0px 4px; } .side_bar_menu > li > a { display: inline-block; text-decoration: none; border-radius: 3px; position: relative; font-size: 16px; } .side_bar_menu > li a + ul { display: none; } .link_span { display: inline-block; padding: 3px 12px 3px 0px; position: relative; z-index: 21; text-shadow: 0 1px 0 rgba(255,255,255, 0.7); text-decoration: none; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .link_arrow { z-index: 99; display: inline-block; position: relative; top: 1px; width: 20px; padding: 0 5px; font-size: 12px; color: #a5a5a5; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } a:hover .link_span{ padding-left: 12px; text-decoration: none; } .link_arrow:hover { padding: 0 5px; text-decoration: none; color: #436DA2; } .current_page_item > a > .link_span { font-weight: 600; text-decoration: none; } .side_bar_menu > li ul { margin: 0 0 0 23px; padding: 5px 0; } .side_bar_menu > li a.active { background: #4682B4; } .side_bar_menu > li a:hover { color: #4682B4; text-decoration: none; } .side_bar_menu > li a.active + ul { color: ##4682B4; display: block; } .side_bar_menu > li ul > li { margin: 0 0 4px 0; } .side_bar_menu > li ul > li > a { display: inline-block; font-size: 16px; text-decoration: none; border-radius: 3px; text-shadow: 0 0 1px #fff; position: relative; } .side_bar_menu > li ul > li > a.active { background-color: #4682B4; border-radius: 3px; text-shadow: 0 0 1px #fff; text-decoration: none; } /* фон при навидении мышкой на слово */ .hover_span { display:block; width: 0; height: 100%; background-color: #08ada7; background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02)); background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02)); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02)); background-image: linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02)); border-radius: 3px; position: absolute; top:0; z-index: 20; opacity: 0.5 } .textwidget { padding: 0 0 10px; margin: 0px 0 0; text-decoration: none; } /* Вспомогательные классы [display] (например показать или скрыть выпадающее меню) */ .enabled { display: block !important; } .disabled { display: none !important; } /* Вспомогательные классы menu (применяются для смены состояния пунктов меню) */ .menu--active { background-color: #fafafa; background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02)); background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02)); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02)); background-image: linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02)); } .menu--active .link_span { padding: 3px 12px; text-shadow: none; } .menu--active:hover .link_span { /*padding-left: 17px;*/ } .tagcloud { padding: 0 0 10px; overflow: hidden; } .tagcloud a{ float: left; font-size: 12px; padding: 2px 12px; color: #555; text-shadow: 0 1px 0 rgba(255,255,255, 0.7); background-color: #fafafa; background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02)); background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02)); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02)); background-image: linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02)); margin: 0 8px 8px 0; border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid rgba(0,0,0,0.05); -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; border-radius: 4px; }
JS:
// Sidebar Menu $('#sidebar .widget_categories > ul, #sidebar .widget_nav_menu > div > ul, #sidebar .widget_pages ul:first, #sidebar .widget_meta ul, #sidebar .widget_recent_entries ul, #sidebar ul.product-categories').addClass('side_bar_menu'); $('#sidebar ul.side_bar_menu a').wrapInner('<span class="link_span"/>').prepend('<span class="hover_span"></span>'); // Sidebar Menu effects $('.side_bar_menu a').not(".active").hover( function() { $(this).children('.hover_span').stop().animate({width:'100%'},500,'easeOutExpo'); }, function() { $(this).children('.hover_span').stop().animate({width:'0'},200,'easeOutExpo'); } ); $('.side_bar_menu .link_arrow').click(function () { console.log($(this).siblings('a')); if ($(this).parent('li').hasClass('menu-item-has-children')) { $(this).parent('li').children('.sub-menu').toggleClass('enabled'); $(this).siblings('a').toggleClass('menu--active'); $(this).toggleClass('icon-minus'); } } ); $('.side_bar_menu a').not(".active").hover( function() { $(this).siblings('.hover_span').stop().animate({width:'100%'},500,'easeOutExpo'); }, function() { $(this).siblings('.hover_span').stop().animate({width:'0'},200,'easeOutExpo'); } ); $('.testimonials').parents('.textwidget').css('paddingBottom',0);
В демо версии работает, загружаю на сайт и нет этих стрелочек и прочего:
скриншот демки
Просмотр 2 ответов — с 1 по 2 (всего 2)
Просмотр 2 ответов — с 1 по 2 (всего 2)
- Тема «Вечная проблема с подкатегориями в меню…» закрыта для новых ответов.