Мне понравилась тема http://forum.storela...ю-вертикальным/ вот хочу себе тоже сделать такое меню.
есть вопросы.
1.помогите сделать под цвет моего сайта
2. чтоб меню 3-го уровня были скрыты и открывались по клику, (а то все меню не помещается на страницу)
0
Переделать Меню.
Автор a.korkishko, 12 нояб. 2015 13:07
Сообщений в теме: 6
#1
Отправлено 12 Ноябрь 2015 - 13:07
#2
Отправлено 12 Ноябрь 2015 - 15:04
Здравствуйте,
1) Чтобы у вас не изменились цвета, то вам нужно вместо последней замены
в main.css код
заменить на код:
2) Чтобы меню третьего уровня были не видны. Найдите код:
замените на код:
после этого кода добавьте код:
тогда у вас третий уровень будет появляться по наведению на пункты второго уровня.
1) Чтобы у вас не изменились цвета, то вам нужно вместо последней замены
Цитата
Найдите код:
#custommenu ul.mainnav li ul.dropdown-menu {position: absolute;top: 99%;width:100%;left: 0;background: #dfedad;border-bottom: 2px solid #ffffff;border-top: 2px solid #dfedad;z-index: 999;visibility: hidden;opacity: 0;filter: alpha(opacity=0);-khtml-opacity: 0;-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-webkit-transform: scale(0.5);-moz-transform: scale(0.5);-ms-transform: scale(0.5);-o-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center 10%;-moz-transform-origin: center 10%;transform-origin: center 10%;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}
Замените на:
#custommenu ul.mainnav li ul.dropdown-menu {position: absolute;top: 99%;width:100%;/* left: 0; */background: #dfedad;border-bottom: 2px solid #ffffff;border-top: 2px solid #dfedad;z-index: 999;visibility: hidden;opacity: 0;filter: alpha(opacity=0);-khtml-opacity: 0;-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-webkit-transform: scale(0.5);-moz-transform: scale(0.5);-ms-transform: scale(0.5);-o-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center 10%;-moz-transform-origin: center 10%;transform-origin: center 10%;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}
#custommenu ul.mainnav li ul.dropdown-menu {position: absolute;top: 99%;width:100%;left: 0;background: #dfedad;border-bottom: 2px solid #ffffff;border-top: 2px solid #dfedad;z-index: 999;visibility: hidden;opacity: 0;filter: alpha(opacity=0);-khtml-opacity: 0;-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-webkit-transform: scale(0.5);-moz-transform: scale(0.5);-ms-transform: scale(0.5);-o-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center 10%;-moz-transform-origin: center 10%;transform-origin: center 10%;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}
Замените на:
#custommenu ul.mainnav li ul.dropdown-menu {position: absolute;top: 99%;width:100%;/* left: 0; */background: #dfedad;border-bottom: 2px solid #ffffff;border-top: 2px solid #dfedad;z-index: 999;visibility: hidden;opacity: 0;filter: alpha(opacity=0);-khtml-opacity: 0;-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-webkit-transform: scale(0.5);-moz-transform: scale(0.5);-ms-transform: scale(0.5);-o-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center 10%;-moz-transform-origin: center 10%;transform-origin: center 10%;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}
в main.css код
#custommenu ul.mainnav li ul.dropdown-menu {position: absolute;top: 99%;width:100%;left: 0;background: #ffffff;border-bottom: 3px solid #3cabda;border-top: 1px solid #d5d5d5;z-index: 999;visibility: hidden;opacity: 0;filter: alpha(opacity=0);-khtml-opacity: 0;-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-webkit-transform: scale(0.5);-moz-transform: scale(0.5);-ms-transform: scale(0.5);-o-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center 10%;-moz-transform-origin: center 10%;transform-origin: center 10%;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}
заменить на код:
#custommenu ul.mainnav li ul.dropdown-menu {position: absolute;top: 99%;width:100%;/* left: 0; */background: #fff;border-bottom: 2px solid #3cabda;border-top: 2px solid #dfedad;z-index: 999;visibility: hidden;opacity: 0;filter: alpha(opacity=0);-khtml-opacity: 0;-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-webkit-transform: scale(0.5);-moz-transform: scale(0.5);-ms-transform: scale(0.5);-o-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center 10%;-moz-transform-origin: center 10%;transform-origin: center 10%;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}
2) Чтобы меню третьего уровня были не видны. Найдите код:
#custommenu ul.mainnav li ul.sub {list-style: none;padding: 0;margin: 0;}
замените на код:
#custommenu ul.mainnav li ul.sub {list-style: none;padding: 0;margin: 0;display:none;}
после этого кода добавьте код:
#custommenu ul.mainnav li.level1:hover ul.sub {display:block;}
тогда у вас третий уровень будет появляться по наведению на пункты второго уровня.
#3
Отправлено 12 Ноябрь 2015 - 15:31
все сделал но не заработало
#4
Отправлено 12 Ноябрь 2015 - 15:38
a.korkishko (12 Ноябрь 2015 - 15:31) писал:
все сделал но не заработало
Вы не произвели изменения из инструкций по ссылке, что указали в первом сообщении.
а именно:
Цитата
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#custommenu ul.mainnav li.parent:hover ul.dropdown-menu {display: block;visibility: visible;opacity: 1;filter: alpha(opacity=100);-khtml-opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);-webkit-transform-origin: top center;-moz-transform-origin: top center;transform-origin: top center;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}
Замените на:
#custommenu ul.mainnav li.parent:hover ul.dropdown-menu {display: block;visibility: visible;opacity: 1;filter: alpha(opacity=100);-khtml-opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);-webkit-transform-origin: top center;-moz-transform-origin: top center;transform-origin: top center;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;width: 25%;}
Найдите код:
#custommenu ul.mainnav li.level1 {list-style: none;width: 25%;float: left;}
Замените на:
#custommenu ul.mainnav li.level1 {list-style: none;/* width: 25%; *//* float: left; */border-bottom: grey 1px solid;}
#custommenu ul.mainnav li.parent:hover ul.dropdown-menu {display: block;visibility: visible;opacity: 1;filter: alpha(opacity=100);-khtml-opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);-webkit-transform-origin: top center;-moz-transform-origin: top center;transform-origin: top center;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}
Замените на:
#custommenu ul.mainnav li.parent:hover ul.dropdown-menu {display: block;visibility: visible;opacity: 1;filter: alpha(opacity=100);-khtml-opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);-webkit-transform-origin: top center;-moz-transform-origin: top center;transform-origin: top center;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;width: 25%;}
Найдите код:
#custommenu ul.mainnav li.level1 {list-style: none;width: 25%;float: left;}
Замените на:
#custommenu ul.mainnav li.level1 {list-style: none;/* width: 25%; *//* float: left; */border-bottom: grey 1px solid;}
#5
Отправлено 12 Ноябрь 2015 - 15:46
извините. мне понравилось что вообще нет выпадающего меню. я верну все назад и помогите мне сделать чтоб не было всплывающего меню
#6
Отправлено 12 Ноябрь 2015 - 16:23
a.korkishko (12 Ноябрь 2015 - 15:46) писал:
извините. мне понравилось что вообще нет выпадающего меню. я верну все назад и помогите мне сделать чтоб не было всплывающего меню
Тогда в main.css найдите и удалите код:
#custommenu ul.mainnav li.parent:hover ul.dropdown-menu {display: block;visibility: visible;opacity: 1;filter: alpha(opacity=100);-khtml-opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);-webkit-transform-origin: top center;-moz-transform-origin: top center;transform-origin: top center;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;width: 25%;}
#7
Отправлено 12 Ноябрь 2015 - 16:26
Спасибо
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных