Меню для сайта

CSS меню для сайтаМеню для сайта (англ. menu) — важнейший элемент навигации, позволяющий посетителю оценить размеры и содержание сайта по одной его странице.

Хорошее меню (с использованием привлекательных кнопок и ссылок, выполненных в едином стиле) позволяет быстро найти нужную информацию, чем повышает авторитет сайта в глазах пользователей и поисковых систем.

При помощи специальной утилиты CSS Menu Generator, представленной на этой странице, даже начинающий вебмастер сможет создать удобное многоуровневое анимированное меню для своего сайта!

CSS Menu Generator 4.1

Меню для сайта CSS Menu Generator 4.1
Рейтинг:
Размер:
3.8 МБ (инсталлятор)
Интерфейс:Английский/Русификатор
Платформа:
Windows XP/Vista/7 32-bit
Обновлено:2012-09-27
Разработчик:
Платный аналог:  


Похожая программа: Кнопки для сайта DeKnop





CSS Menu Generator 4.1

Программа для создания в визуальном режиме удобного и красивого меню для сайта. Преимуществом данного приложения является чистый, валидный, кроссбраузерный код готового меню. Дополнительный плюс такого меню в том, что технология CSS, которая используется при его создании, позволяет не зависеть от настроек браузера пользователя, как в случае с использованием меню на JavaScript.

CSS (англ. Cascading Style Sheets) — каскадные таблицы стилей, содержащие описание разметки сайтов.

Предисловие

Где-то с год назад в моем списке программ появилась небольшая бесплатная программулина, позволяющая создавать многоуровневые выпадающие меню для сайтов.

Менюшки в ней делались по одному из заданных шаблонов, а пользователь, по сути, мог изменять только цвета заливки и текста.

Мне казалось, что можно найти бесплатное приложение и получше, однако выяснилось, что то, что я нашел из халявного оказалось самым хорошим :)

Сегодняшнюю статью я хотел бы посвятить одному нашему постоянному читателю – Умбреку! Ведь именно благодаря нему я провел достаточно глобальное «перелопачивание» Интернета на предмет нахождения лучшей бесплатной программы для создания меню на сайт.

Что из этого вышло – судите сами… :)

Сравнение с платным аналогом

Похожего результата можно добиться при помощи использования JavaScript. Такой подход предлагает нам платная программа AllWebMenus:

Особенности CSS Menu Generator AllWebMenus
Стоимость бесплатно/$19 от 1558,50 руб.
Кроссбраузерность меню IE6 и выше IE6 и выше
Многоуровневые «выпадающие» меню + +
Настройка фонового цвета кнопок + +
Возможность изменять стиль меню +/- (только правка кода) +
Шаблоны меню под популярные CMS - +
Возможность добавления иконок - +

Несомненный плюс платного конкурента в том, что с его помощью мы можем довольно сильно разнообразить наше меню за счет возможности полностью настраивать все его элементы.

Однако есть и один достаточно весомый минус в создании навигации при помощи JavaScript! У некоторых пользователей скрипты автоматически блокируются, что означает невозможность использования такого меню в их браузере!

Поэтому подход к созданию навигации на чистом CSS, по крайней мере мне, представляется более удачным…

Справедливости ради стоит отметить, что у CSS Menu Generator есть и платная PRO-версия, за которую нужно «отвалить» ни много, ни мало $19.

За эти деньги мы получим возможность в визуальном режиме работать с фоновыми картинками для кнопок, а также добавлять на эти же кнопки нужные иконки.

И да! Мы получим право использовать программу в коммерческих целях :).

Начало работы с программой для создания меню сайта

Для начала работы с CSS Menu Generator нам потребуется установить программу. Для этого запустите инсталлятор из скачанного архива и пройдите несложную процедуру установки, нажимая кнопку «Next».

Программа на английском языке, но специально для Вас я сделал ее частичную русификацию. Русификатор Вы найдете в скачанном архиве в папке BONUS ;).

Чтобы он заработал, Вам нужно поместить его в папку с программой (по умолчанию: С:\Program Files\WonderWebWare CSS Menu Generator).

Если Вы хотите запускать русифицированную версию программы всегда, то Вам нужно будет создать новый ярлык для загрузки с русификатора на Рабочем столе и удалить старый.

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


Выбор и правка шаблона меню

После запуска CSS Menu Generator мы увидим следующую картину:

Основное окно программы CSS Menu Generator

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

Для выбора одного из них достаточно просто выделить нужный пункт из списка:

Выбор шаблона меню в программе CSS Menu Generator

После этого в нижнем поле программы (под списком) появится информация о выбранном шаблоне меню, а справа активируется окно предпросмотра с кнопкой «Customize», которую следует нажать для изменения шаблона под свои нужды.

После нажатия кнопки «Customize», кроме первой вкладки «1) Select Template», у нас появится две новые вкладки: «2) Customize» и «3) Get the Files». По умолчанию откроется вторая:

Окно правки цвета меню  в программе для создания динамического выпадающего меню на сайте CSS Menu Generator

Настройка внешнего вида меню

Здесь мы и можем изменять внешний вид нашего меню. Сама вкладка «2) Customize» структурно разделена на две части:

  1. верхнюю с вкладками для настройки меню,
  2. нижнюю с окном предпросмотра изменений в реальном времени.

Первая вкладка в верхней части называется «Colors & Backgrounds». По сути – это основная вкладка программы, поскольку она позволяет изменять цветовое оформление нашего меню, как нам заблагорассудится!

Делается это достаточно просто: в первом списке выбираем ту часть меню, цвет которой нужно изменить (например, «Page (body) Background» (Цвет фона странички)), а в списке «Color» находим или задаем вручную нужный оттенок.

Важным плюсом программы является возможность сделать любой элемент прозрачным. Для этого достаточно нажать кнопку «transparent».

CSS Menu Generator помимо этого поддерживает предустановки, которых по умолчанию две.

Чтобы не задавать по нескольку раз одно и то же цветовое оформление для каждого элемента меню, Вы можете просто сохранить текущую цветовую схему как шаблон и пользоваться ею в будущем.

Меню шаблонов

Меню шаблонов – это третий (и последний) список на текущей вкладке.

Перед тем, как перейти к следующим настройкам, наверное, нелишним будет дать Вам перевод всех элементов, цвета которых мы можем изменить, поскольку русифицировать список мне не удалось :(. Итак, сверху вниз:

  1. Фон странички;
  2. Фон меню;
  3. Цвет надписей основного меню;
  4. Фон подменю;
  5. Цвет надписей подменю;
  6. Фон активного пункта меню (когда курсор над ним);
  7. Цвет активной надписи меню;
  8. Фон активного пункта подменю;
  9. Цвет активной надписи подменю;
  10. Цвет рамки вокруг меню.

Настройка шрифтов

Переходим на вторую вкладку – «Fonts»:

Окно настройки шрифтов меню в программе CSS Menu Generator

Декорирование шрифта — подчёркивание, надчёркивание, либо зачёркивание текста.

Здесь мы имеем возможность работать со шрифтами нашего меню. Помимо типа шрифта мы можем задать его размеры, толщину, стиль и декорирование.

Чтобы получить доступ ко всем этим настройкам нужно всего лишь выделить в левом окошке надпись «Menu links».

Структура меню

Третья вкладка («Menus») позволяет нам настроить структуру нашего меню и задать ссылки для всех его пунктов:

Окно настройки структуры меню в программе CSS Menu Generator

Для правки меню нужно вначале выделить надпись «Main Menu» в крайнем левом списке, после чего появится структура меню.

В структуре выделяем нужный пункт и нажимаем кнопку «edit», после чего появится окно правки пункта. В нем мы можем задать название выбранного пункта, привязать к нему ссылку и указать целевую вкладку для открытия данной ссылки.

Удалить лишние пункты меню можно, выделив их и кликнув кнопку «delete».

Добавить же новые разделы можно, нажав кнопку «add». После ее нажатия появится опять же окно правки пункта меню.

Возможные проблемы с кодировкой

Стоит заметить следующее: если Вы зададите для пункта меню русскоязычное название, то в окне предпросмотра внизу оно отобразится в виде разнообразных крокозябликов :)

Отображение русскоязычных надписей в программе для создания меню на сайте CSS Menu Generator

UTF-8 (англ. Unicode Transformation Format, 8-bit) — формат преобразования Юникода, 8-битный.

Это связано с тем, что по умолчанию CSS Menu Generator использует для создания меню кодировку UTF-8, которая не поддерживает кириллические символы. В окне предпросмотра с этим можно бороться следующим образом:

  • вызываем контекстное меню окна предпросмотра;
  • находим пункт «Кодировка» и меняем ее с «Юникод» на «Кириллица»).

Вуаля! :) Русские надписи появились! В этом мы можем убедиться, перейдя на последнюю вкладку «Large Preview»:

Предпросмотр результата

На данной вкладке мы не можем ничего изменить – она нужна только для полномасштабного предпросмотра наших стараний.

Окно увеличенного предпросмотра в программе CSS Menu Generator

Несмотря на то, что русские названия пунктов меню здесь отображаются, это только временно :(. Как закрепить полученный результат, я расскажу немного позже.

Сохранение готового меню

А пока перейдем на третью вкладку программы – «3) Get the Files»:

Окно экспорта файлов меню в программе CSS Menu Generator

Данная вкладка служит для сохранения нашего меню в готовые файлы. Здесь у нас опять есть три раздела, первый из которых и позволяет сохранить меню.

По сути все, что мы настраивали с Вами в предыдущих вкладках, сохраняется в три отдельных файла:

  1. csshover2.htc – файл-заплатка для корректной работы полученного меню в Internet Explorer 6;
  2. style.css – таблица стилей, которая обеспечивает оформление нашего меню;
  3. index.html – готовый HTML-документ, в котором находится само меню.

Для сохранения файлов нужно в правой части вкладки, которая представляет собой, по сути, Проводник, нужно указать выходящую папку, а затем нажать кнопку «Export Files to Selected Folder».

Однако я бы советовал немного повременить с сохранением и рассмотреть два дополнительных раздела данной вкладки.

Инструкции по внедрению готового меню на сайт

Первый из них – «Template Help Info»:

Окно программы CSS Menu Generator с инструкциями по внедреню готового меню на сайт

Он содержит инструкции по размещению Вашего меню на сайте. К сожалению, инструкции – на английском, поэтому я приведу краткую выжимку из них, которая Вам, надеюсь, пригодится.

Итак, для работы созданного меню Вам потребуется:

  1. Закачать файлы csshover2.htc и style.css в корневой каталог Вашего сайта. Если файл style.css у Вас уже существует, то вам понадобится скопировать его содержимое и добавить к содержимому существующего файла.
  2. Открыть файл index.html при помощи Блокнота и скопировать из него <META>-теги и все, что находится между надписями «<!-- PULL DOWN MENU - BEGIN -->» и «<!-- END OF PULL DOWN MENU -->».
  3. Открыть Блокнотом файл index.html вашего сайта и вставить <META>-теги в секцию «<HEAD></HEAD>», а блок с меню в нужное место в теле Вашей странички, после чего сохранить все изменения.

Вот, собственно говоря, и все :)

Изменение кодировки для отображения кириллицы

Перейдем в третий раздел – «HTML/CSS Code»:

Окно правки кода готового меню в программе CSS Menu Generator

Если у Вас уже есть готовый сайт, на который нужно установить меню, то Вам совершенно необязательно сохранять все вышеописанные файлы на компьютер.

В данном разделе Вы можете скопировать все нужные данные непосредственно из кода сгенерированных файлов!

Здесь стоит как раз упомянуть о нашей несостыковке в отображении русских букв.

На скриншоте выше можно увидеть причину этого недостатка. В атрибуте «charset>», который отвечает за кодировку странички должно быть задано значение windows-1251!

Если у Вас на сайте установлена другая кодировка или вообще отсутствует нужный МЕТА-тег, скопируйте его из кода.

Если Вы хотя бы немного разбираетесь в CSS, то в данном разделе Вы также можете внести нужные Вам коррективы в таблицу стилей, которая расположена на вкладке «CSS Code».

Что также примечательно, в каждой вкладке есть кнопки «Copy to Clipboard» и «Save File», что позволяет копировать выделенные фрагменты или целиком сохранять только отдельные файлы.

Например, удобнее всего сохранить отдельно файл csshover2.htc, а из остальных только скопировать нужные части кода.

Достоинства и недостатки программы

Плюсы программы CSS Menu Generator 4.1Плюсы:

  • возможность создавать многоуровневые выпадающие меню;
  • вертикальная и горизонтальная ориентация меню на выбор;
  • возможность изменения цветового оформления меню;
  • наличие окна предпросмотра результата;
  • прямой доступ к файлам меню без необходимости что-либо сохранять.

Минусы программы CSS Menu Generator 4.1Минусы:

  • малое количество шаблонов;
  • в FREE-версии нет возможности добавлять фоновые картинки и иконки;
  • не совсем удобная работа с кириллицей.

Выводы

Однозначный вердикт вынести сложно… С одной стороны CSS Menu Generator имеет в своем арсенале все необходимое для создания качественных многоуровневых CSS-меню для сайта.

Но с другой стороны, разработчику бы не мешало немного подумать о пользователях, которым предоставляется очень мало доступных шаблонов.

Естественно, что если Вы обладаете знаниями в области каскадных таблиц стилей, то Вы без проблем сможете вручную разнообразить полученное меню. Но для «чайника» можно было бы и побольше вариантов оформления сделать, ИМХО :).

Тем более, что за это все еще и берется $19 (если Вы захотите получить платную версию с двумя дополнительными шаблонами и возможностью работы с картинками)!

Однако, как говорят, на безрыбье и рак – рыба. А лучшей бесплатной программы для создания меню на сайт мне не попадалось.

Поэтому, если Вам нужно быстро создать навигацию по сайту, то CSS Menu Generator – именно тот инструмент, который поможет Вам сделать это в кратчайшие сроки и без лишних проблем!

P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.

P.P.S. Если Вы хотите украсить свой сайт красивыми кнопками, но плохо рисуете в графических редакторах, тогда можете воспользоваться следующей программой для автоматизированного создания кнопок для сайтов и программ:
https://www.bestfree.ru/soft/graph/button.php



Похожие программы:

HTML редактор: HtmlReader
HTML-редактор, предназначенный для разработки документов в виде html — файлов. Имеет мощный механизм для создания новых, для редактирования и просмотра существующих html — документов.
Кнопки для сайта: DeKnop
Программа, позволяющая создавать прямоугольные кнопоки для сайтов и программ.
Редактор фотографий: Paint.NET
Редактор растровых изображений (фотографий и т.д.). Отлично заменит стандартный Paint от Windows. Умеет накладывать множество эффектов, убирать "красные глаза", работать со слоями, со сканером и камерой.
Редактор иконок: icon suchi
Небольшой редактор иконок. Поддерживаются альфа-каналы, иконки размером до 128х128, библиотеки, XP-иконки и все основные форматы: ICO, BMP, PNG, PSD, EXE, DLL, ICL и т.д.
Рисование: Artweaver
Немецкая программа для рисования (по большей части), и для редактирования рисунков.





** Задавать вопросы лучше на нашем форуме. Просто зарегистрируйтесь и создайте новую тему.

Полезный совет:



Система проверки ошибок от Mistakes.ru