Как сгенерировать горизонтальное меню, вертикальное или выпадающее меню на CSS. Такое меню хорошо индексируется поисковиками, мало весит и исправно работает. Кроме того, отлично встраивается и работает на blogspot. Я уже приводила примеры и коды таких меню для блога. Однако, если вы совсем не понимаете в кодах, а это необходимо хотя бы для того, чтобы заменить цвета и поставить свои ссылки в код или просто не любите “ковыряться в кодах”, то этого CSS генератор CSS Menu Generator специально для вас. Вы можете скачать программу здесь >>>. Размер exe файла равен 500 kB.
Интерфейс программы CSS Menu Generator:
- Начинаем работу с первой вкладки Menu Item. Здесь добавляем пункты нашего меню, даем им названия (Item) и указываем ссылки (links). Для этого вначале нажмите на кнопкуNew Затем заполните поля:
Для того, чтобы редактировать страницу выберите нужный пункт и нажмите на кнопку Edit (редактировать). - Теперь переходите на одну из вкладок CSS Menu Generator:
- Horizontal menu (горизонтальное меню),
- Vertikal menu (вертикальное меню),
- или Combo-box menu (выпадающее меню).
в зависимости от того, какой вид меню вам нужен.
Рассмотрим на примере создания горизонтального меню. Выбираем соответствующую вкладку и выставляем нужные настройки меню:- background – фон, цвет кнопок меню,
- text color – цвет текста,
- active background – цвет фона выбранного (активного) пункта меню,
- active text color – цвет текста активного пункта меню.
- border color – цвет рамки,
- separator color – цвет разделительных линий кнопок.
- selected item – активный по умолчанию пункт меню.
- font-family – шрифт,
- font-style – стиль шрифта,
- font-weight – толщина шрифта,
- top, left, bottom, right – сверху, слева, снизу и справа соответственно означают сколько пикселей толщина линии рамки.
Если пункты меню вы писали на русском языке, то в превью названия пунктов вашего меню будут выглядеть некорректно:
Вы можете ничего не исправлять, так как после того, как вы вставите в шаблон блога сгенерированный в CSS menu generator код меню, оно будет отображаться на blogspot нормально. - Получение кода CSS меню во вкладке HTML/CSS код
- Копируйте CSS код из верхнего окошка (выделено оранжевым цветом). Для того, чтобы скопировать код нажмите кнопку “Copy to clipboard”. Его нужно вставить в шаблон блога между тегами <head> и </head>. Переходите в html редактор шаблона, воспользовавшись поиском по странице (горячие клавиши Ctrl + F), найдите отрезок кода </head> и вставьте перед ним css код меню для блога.
- Копируйте html код меню для блога (выделено желтым цветом), в блоге перейдите во вкладку “Дизайн” и вставьте код меню в виджет HTML/JavaScript в нужное место страницы.
День добрый. Спасибо за информацию. Попробую это вариант, если не разберусь со своей проблемой. Но прежде хотела бы у вас спросить, может подскажете.
Скачала сторонний шаблон. И все бы хорошо, но вот панель меню мертвая. Как ее редактировать ума не приложу. Ну да, перевести вкладки можно в коде HTML. Но дальше все. Вкладки не наполнить, не открыть...Если сможете, подскажите. В HTML я пока не сильна, так что по возможности попроще.
Заранее спасибо за ваше время.
Извините, вот шаблон, забыла прикрепить
http://btemplates.com/2012/blogger-template-creativa/demo/
Скачала и установила шаблон в один из своих тестовых блогов. Админка рабочая, никаких нареканий нет. Причем обе версии шаблона без багов - как со слайдером, так и без него. Попробуйте переустановить шаблон и редактировать его через браузер Google Chrome.
а где это -"скачать его на нашем форуме в разделе Дизайн » Файловый архив »"
Скачать css генератор вы можете здесь
Спасибо большое, а то не могла найти ссылку.
А вот кстати, по этой ссылке cssmenubuilder. com из другой статьи, которой собиралась радостно воспользоваться, ничего не получается - на странице выбора цвета ничего не выбирается почему-то, два дня заходила.
Теперь этот орум в полузаброшенном состоянии, от блога его открепила, поэтому вы его и не нашли.
Зашла в cssmenubuilder.com - у меня с цветом никаких проблем. Чтобы выбрать цвет, во втором шаге, нужно нажать на разноцветный квадратик, нажать на нужном цвете и одобрить кнопкой "Select".
Если вы все делаете именно так, и ничего не получается, то возможно стоит попробовать воспользоваться сервисом с другого браузера.