28 мар. 2013 г.

Меню с выпадающими подпунктами

Ура!!! Я его победила - горизонтальное меню с выпадающими подпунктами!

Но обо всём по порядку...

В любимом блоге хочется, чтобы всё было красиво и удобно. И захотелось мне, чтобы закладки страничек ни толпились в два ряда вверху страницы, а изящно выпадали подпунктами вниз по темам...
Планов громадьё, меню явно ещё будет расширяться...

В блогосфере много очень полезных сайтов с советами по блоговедению "для чайников", shpargalkablog.ru - понятнейший из них.

Как это было (для самых чайных чайников):

1. Яндекс-поиск выдает много ссылок на запрос "выпадающее меню blogspot", по-моему статья Горизонтальное выпадающее меню CSS для Blogger - самая понятная. Читаем и делаем как там написано...

2. Прочитала, сначала ничего не поняла... Коды - это всё так непонятно, да ещё и почти без английского. Я даже немного загрустила сначала. Стала разбираться...

Что такое "в"Дизайнере шаблонов" вносим разработанный нами CSS" - открываем основные настройки нашего блога, далее "Шаблон" и нажимаем оранжевую кнопку "Настроить", в открывшемся редакторе жмем "Дополнительно", смело мотаем вниз до пункта "Добавить CSS" - справа открывается пустое (лично я до этого момента в этом CSS ничего не химичила) поле, в которое и нужно вставить предложенный код (я копировала с сайта и вставила, как есть, но потом изменила цвет и прозрачность фона, цвет текста при наведении).
Вот такой код получился у меня.


.tabs-outer, .tabs .widget ul {overflow: visible;}
.tabs .widget ul li {position: relative; z-index: 1000;}
.tabs .widget ul li a:nth-child(n+2) {position: absolute; bottom: -100%; left: 0; z-index: 2000; width: 13em; border-radius: 0; display:none;}
.tabs .widget ul li a:nth-child(3) {bottom: -200%;}
.tabs .widget ul li a:nth-child(4) {bottom: -300%;}
.tabs .widget ul li a:nth-child(5) {bottom: -400%;}
.tabs .widget ul li a:nth-child(6) {bottom: -500%;}
.tabs .widget ul li a:nth-child(7) {bottom: -600%;}
.tabs .widget ul li a:nth-child(8) {bottom: -700%;}
.tabs .widget ul li a:nth-child(9) {bottom: -800%;}
.tabs .widget ul li a:nth-child(10) {bottom: -900%;}
.tabs .widget ul li:hover a {display: inline-block; box-shadow: none; background: rgba(1,1,1,0.7);}
.tabs .widget ul li:hover a:hover {color: rgba(255,225,225,1);}



Я немного изменила под стиль своего блога (красным):
длина названия - width: 13em - подбором длиннее/короче
цвет фона и цвет текстаbackground: rgba(1,1,1,0.7) и color: rgba(255,225,225,1) - rgba - это формат описания цвета, в скобочках (X,X,X,X) цифры от 0 до 255 для цветов, от 0 до 1 для прозрачности, соответственно - красный, зеленый, синий, прозрачность. Готовые цвета можно списать из любого графического редактора - в Paint закладка Изменение цвета. В моём примере фон  почти черный, прозрачность 0,7 - (1,1,1,0.7), цвет текста белый непрозрачный (255,255,255,1).

Вставили в пункт "Добавить CSS", жмем Применить к блогу, ничего не поменялось - так и должно быть.

3. Читаем дальше "Для IE убираем этот мета-тег" - а это что за птица?!
Спокойно.
Я, конечно, не фанат Internet Explorer, но некоторые им всё же пользуются, а в этом браузере не корректно работает формат rgba, поэтому чтобы пользователи IE могли адекватно видеть наш блог, мы заменяем мета-тег.
Как?
Опять идем в основное меню нашего блога, далее "Шаблон" и нажимаем серую кнопку "Изменить HTML", в открывшемся окне находим и заменяем (или удаляем) указанную строчку.

(хотела скопировать в свой пост нужные строки кода, а они, гады в посте не отображаются (!!!) - так что все примеры смотрим в статьях - http://shpargalkablog.ru/2011/10/gorizontalnoye-vypadayushcheye-menyu.html и http://shpargalkablog.ru/2013/02/blogger-ie.html)

Не забываем всё сохранить - "Сохранить шаблон". 

4. Теперь приступаем к формированию самого Меню.
Я сначала выписала на листочек пункты меню, составила структуру, всё нарисовала, как будет.
Итак...
Открываем Страницы нашего блога - тут мы быстро сможем скопировать URL и название.
Параллельно открываем текстовый файлик - удобно сначала всё собрать в текстовом формате, а потом уже скопировать получившийся код целиком. Лично от себя рекомендую этот файлик потом сохранить и никуда не удалять, потому что этот Гаджет Список нельзя поменять, можно только удалить и заново сделать (это я уже потом узнала, пригодилась хомячья привычка всё сохранять).

Копируем в текстовый файл код отсюда.
(вредные коды не хотят отображаться, уточняю - последний пример с этой странички)


и соответственно заменяем /адрес_куда_ведёт_Пункт/ на ссылку на Страницу, /текст_Пункта/ на название Пункта меню; /адрес_куда_ведёт_Подпункт1/ на ссылку на Страницу, /текст_Подпункта1/ на название Подпункта меню и т.д.

5. Опять возвращаемся в основные настройки нашего блога, далее "Дизайн". Между заголовком и сообщением добавляем гаджет "Список". В пункт "Добавить элемент списка" вставляем подготовленные коды из текстового файла и нажимаем Enter - пункты нашего нового меню сразу сохраняются и отображаются тут же в столбик. Так добавляем отдельный элемент списка для каждого Пункта меню: нераскрывающийся пункт - 1 строка, раскрывающийся - несколько строк. Жмем на оранжевую кнопку "Сохранить" "Сохранить расположение". Теперь у нас получилось, что на странице блога отображаются сразу 2 менюшки - старая и новая.

6. Идем в основные настройки нашего блога, "Страницы", в пункте "Показывать страницы как" выбираем "Не показывать". "Сохранить расположение".

Гордимся собой и своим обновленным меню.

Вот так немного сумбурно, слегка путано и непонятно, занудно и длинно получилось, но результат есть!

Я вусмерть утомила мужа беганьем к его компу (только на его компьютере сохранился такой динозавр браузерной мысли - IE всё ведь нужно проверить, остальные уже снесли и забыли), так что под конец все очень радовались, что у Маши менюшка заработала!

Называется "Почувствуй себя котом Матроскиным" - "Тут-тук-тук - Кто там? Это я, почтальон Печкин... УРА ЗАРАБОТАЛО!!!

Комментариев нет:

Отправить комментарий