Как сделать красивое меню для сайта, хорошо индексируемое поисковиками. Меню на скрипте или flesh плохо или вообще не индексируется поисковыми системами. Но нам хочется, что было красиво, поэтому будем делать меню для сайта с помощью стилей CSS.
Как сделать красивое меню
В этом нам поможет сервис www точка Izzymenu точка com, некогда описанный Евгением Поповым. Но с ним, наверное, знакомы только подписчики его рассылки, а посему я не побоюсь повториться.
Для того, что бы была возможность сохранять варианты ваших «шедевров», можно зарегистрироваться, перейдя по кнопке My Menu, но это не обязательно.
В Menu Structure вы можете изменить названия кнопок и добавить кнопки будущего меню, но это можно сделать и на своем сайте.
Для начала заходим в Menus Cataloque и выбираем понравившееся. Любой выбранный образец можно сделать как горизонтальным, так и вертикальным.
izzy menu
Выбрали меню, и жмем кнопку Vertical (после каждого изменения необходимо сгенерировать то, что получилось кнопкой Generate внизу). Далее: если вы хотите сделать меню без спец эфектов, как на моем сайте, напротив пункта Menu Animation ставим off, в противном случае выбираем нужный эффект. Для примеря я выбрал второй вариант. Посмотреть как все будет работать, можно «не отходя от кассы» после генерации.
красивое меню
Второй ряд навигации слева: Перейдя по вкладке Link мы можем изменить цветность, размер, вид текста ссылки. На вкладке Hover мы меняем вид работающих ссылок
Меню на CSS
Вобщем в настройках сложностей, думаю, не встретите. Поэкспериментируете и когда надоест жмем кнопку Download (справа от Generate).
Извлекаем из архива скачанные файлы. Две рекламные картинки можно сразу удалить. Те, кто ставит меню на CMS пользуются соответствующей папкой. А мы (для HTML) закачиваем папку images в корень сайта. Кто делает менюшку с анимацией закачивает скрипты chrome.js и jquery.js тоже в корень сайта.установка меню на сайт
установка меню на сайт
Файл IzzyMenu.html открываем любым текстовым редактором или блокнотом, можно дремвьювером и будем кусочками вставлять код меню на страницы своего сайта. Для менюшек с анимацей делаем вставку скриптов перед тегом (выделено красным прямоугольником). И не забываем прописывать правильный относительный путь к скриптам. Так для главной страницы например: он будет таким src=»chrome.js», для страниц в подпапках т.е. подразделах он будет таким src=»../chrome.js«
Теперь (касается всех) копируем код стилей начиная с #MainMenu
код красивого меню
и заканчивая закрывающей скобкой ). Что бы не вставлять стили в каждую страницу, мы этот код пропишем в файле стилей CSS. Сначала идут стили сайта, затем менюшки начиная с #MainMenu
Выделяем следующий код (под цифрой 2) от до и ставим туда, где и будет находиться само меню. Тут же мы можем добавлять пункты вставляя и редактируя код.
Ну и последний скрипт см. рис. вставляем на каждую страницу перед тегом . Лично я все эти маневры делал методом include, дабы избежать лишних телодвижений. (информация о include есть на этом сайте)
Этот же сервис помог мне сделать меню для моего сайта, только я делал без анимации.
P.S. В результате одной малюсенькой, недоработки сервиса, посетители, пользующиеся IExplorer просто напросто не видели меню на сайте.
Маленький пример для тех, кто будет создавать подобное меню. В самом начале стилей css имеется один фрагмент, который корявый браузер «Дикого Билла» воспринимает в буквальном смысле
В результате высота меню для IE равняется нулю, и оно не отображается на сайте. Что бы подобного не произошло, просто вырезаем строчку height:0; к едрени-фени и будет вам счастье