Перейти к содержимому


Переделать Меню.


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 6

#1 a.korkishko

a.korkishko

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 72 сообщений
  • ГородКраснодар

Отправлено 12 Ноябрь 2015 - 13:07

Мне понравилась тема http://forum.storela...ю-вертикальным/ вот хочу себе тоже сделать такое меню.
есть вопросы.
1.помогите сделать под цвет моего сайта
2. чтоб меню 3-го уровня были скрыты и открывались по клику, (а то все меню не помещается на страницу)

#2 Юля123

Юля123

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 12 Ноябрь 2015 - 15:04

Здравствуйте,

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;}

в 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 a.korkishko

a.korkishko

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 72 сообщений
  • ГородКраснодар

Отправлено 12 Ноябрь 2015 - 15:31

все сделал но не заработало

#4 Юля123

Юля123

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 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;}


#5 a.korkishko

a.korkishko

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 72 сообщений
  • ГородКраснодар

Отправлено 12 Ноябрь 2015 - 15:46

извините. мне понравилось что вообще нет выпадающего меню. я верну все назад и помогите мне сделать чтоб не было всплывающего меню

#6 Юля123

Юля123

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 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 a.korkishko

a.korkishko

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 72 сообщений
  • ГородКраснодар

Отправлено 12 Ноябрь 2015 - 16:26

Спасибо




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных