Меню для сайта – что это и его виды.
У каждого сайта (и даже иногда у одностраничников) есть меню – это определенный список разделов сайта, нажав на которые, пользователь осуществляет переходы к ним. Иными словами, это список ссылок на категории сайта.
Современные пользователи высоко ценят комфорт и свое время. Основные требования, выдвигаемые к интернет-страницам – быстрый поиск нужной информации и высокая скорость загрузки. Клиенты ценят структуру, когда товарные предложения разложены по полкам, и их всегда можно быстро найти одним кликом мыши.
Основная роль элемента – навигация, поэтому часто используют термин навигационное меню.
Виды меню
Существуют следующие виды в зависимости от:
- Объема – главное и второстепенное. Первое находится в верхней части страницы и предоставляет возможность переходов по основным категориям. Второстепенное навигационное меню для сайта – добавочный элемент для сложноструктурированных проектов – создание списка ссылок на подкатегории
- Способа реализации – выпадающее (используют для экономии пространства экрана, появляется при наведении курсора) и раскрывающееся (подкатегории появляются при нажатии на категорию)
- Ориентации – вертикальное (в левой или правой части) и горизонтальное (верхняя часть – шапка сайта, хедер)
- Дизайна – с эффектами, картинками, иконками, гармошками и т.д.
Зачем меню сайту?
Во-первых, для навигации. Во-вторых, меню для сайта – один из важнейших элементов веб-ресурса, напрямую влияющий на ранг сайта в поисковой выдаче:
- Удобство и комфорт – быстрая навигация и перелинковка страниц. Все это относится к внутренней SEO-оптимизации. Идеальный вариант – в 3 нажатия мышкой клиент доходит до любой информации на сайте
- Поведенческие факторы – эффективное меню повышает время нахождения человека на сайте, переходы от одной страницы к другой полезны и интересны пользователям
- Структурированность – меню создается на основании семантического ядра, ключевые запросы кластеризуются в группы. Именно так можно понять специфику товарного предложения глазами покупателя
- Alt изображений – этот пункт касается тех меню, в которых используются картинки.
Правила оформления меню
- Заметность – элемент должен быть виден пользователю с первого взгляда. Незаметное меню сбивает с толку клиента, что приводит к его уходу на другой конкурирующий веб-ресурс
- Привлекательность – не делайте меню аляпистым и ярким. Оно должно лаконично вписываться в общий дизайн и быть одинаковым по оформлению на всех страницах сайта.
- Стандартное месторасположение – располагайте меню для сайта в верхней его части или на боковинах. Дублирующее меню часто располагают внизу сайта («подвал») – предоставляет доступ к навигации клиентам, скролящих до самого низа
- Индикация – клиент хочет знать ответ на свой вопрос: в каком разделе он находится
- Понятность – в качестве названий разделов выбирайте понятные слова или фразы
- Удобство – если меню многоуровневое, продумайте его до мелочей, сделайте оптимальную скорость появления и интуитивно ясное отображение подразделов
- Читабельность – выбирайте правильный размер шрифтов, чтобы пользователи смогли прочитать название категорий или разделов
- Адаптивность – меню должно быть одинаково отображаемо для всех устройств – мобильного телефона, планшета, ноутбука.
Где заказать адаптивное меню для сайта?
Создание сайта – кропотливая работа, требующая большого опыта и внимания к каждому элементу веб-ресурса. «ArtStudioDesign» — создает, поддерживает и продвигает сайты больше 12 лет. Адаптивное меню для сайта, уникальный дизайн, безграничный функционал – малый список преимуществ наших работ. Звоните и заказывайте!
Создание меню для сайта на php
Если вас интересует ответ на вопрос как создать меню сайта, то вы пришли по верному адресу.
Мы рассмотрим создание динамического меню на php, написанное специально для чайников в программировании, а также для тех, кто еще в танке.
В конце этого урока будет ссылка на скачивание архива с подробными пошаговыми инструкциями и готовым шаблоном сайта на php, и скрипт меню php для сайта.
Создание сайта на wordpress под ключ
Урок 3. Меню на php для сайта делаем динамичным — чайникам
Создадим будущий макет нашего сайта. Для этого нарисуем в фотошопе супер красивый сайт и разрежем на кусочки. Представим, что шапка, логотип, меню и подвал не написаны словами, как в данном примере, а это изысканно и красочно оформленные элементы сайта.
Создадим для примера три страницы и назовем их Раздел 1, Раздел 2, Раздел 3
Этот текст для разных страниц будет разный, но мы не будем на нем заморачиваться и оставим его как есть на всех страницах.
Приступим к созданию сайта на php.
header.html
logo.html
menu.html
footer.html
Добавим файл с этим текстом, чтобы видеть его на всех страницах. Назовем его text.html
Примечание. С этого момента дальнейшие записи буду вести непосредственно в файле text.html
2. Создадим шаблон для нашего сайта на php.
Для этого поступим просто — сохраним настоящий файл, но уже с расширением php и сотрем все текстовое наполнение. Пусть это не профессионально, зато понятно, а усложнять все будем позже. Сейчас главное понять принцип верстки.
3. Теперь файл template.html нам не нужен.
Благодаря ему мы имеем представление о том, как будет выглядеть наш сайт.
4. Нашим шаблоном является файл template.php
В него мы сейчас вставим с помощью команды include все элементы сайта.
5. Создадим три странички, как собирались изначально.
Раздел 1, назовем 1.php
Раздел 2, назовем 2.php
Раздел 3, назовем 3.php
Для этого можно воспользоваться простейшей командой сохранить как…
Для самых маленьких поясню: открываем файл template.php, затем нажимаем сохранить как… и сохраняем под названием 1.php, повторяем процедуру и последовательно сохраним страницы сайта 2.php, 3.php
У нас получилось 3 страницы с одинаковым дизайном. Достаточно вставлять вместо файла text.html другой, дополнять разными картинками или какими-либо html кодами, скриптами и содержимое каждой страницы будет уникальным.
Внимание!
Если не будет создан файл index.php для главной страницы, то в браузере, набрав адрес сайта мы не увидим сам сайт, а всего лишь структуру директории (перечень папок).
Можете посмотреть в денвере и убедиться. Исправим ситуацию — создадим файл
6. Как просмотреть сайт на php?
Что получилось — так просто не увидим. Это уже не шаблон с расширением html.
Но и не проблема. Нам нужен собственный, т.е. локальный сервер на компьютере. Для этого установим денвер и результат своей работы будем смотреть в браузере, не выходя в интернет.
Вот теперь порядок. Набрала адрес сайта и увидела все только что созданное в нормальном виде с дизайном.
Теперь возьмемся за php меню сайта.
Наша задача — научиться чувствовать сайт, созданный на php. Поэтому ссылки будем делать, как на обычном статичном сайте <a href=»1.php»>Раздел 1</a> и т.д.
Мне эта процедура создания ссылок безумно нравится в Macromedia Dreamweaver. Успевай жать ОК и пить кофе.
2. Как сделать ссылку в меню неактивной, если посетитель находится на данной странице.
Посетителю будет удобнее ориентироваться по сайту зная, на какой именно страинице он находится.
Если вы выполнили все шаги строго по пунктам, то видите, что у нас все ссылки в меню активны постоянно. Как это исправить?
Для начала вспомним определение что такое Условные операторы
– это когда какое-то действие выполняется или не выполняется в зависимости от условий.
Выполним следующие действия:
- Нам понадобятся переменные и один условный оператор:
<?php
if ($master == «Главная») // это условие. Если оно выполняется – то в данном месте меню с помощью команды echo вставляются обычные HTML-теги выводящие надпись «Главная».
{
echo «<p>Главная</p>»;
}
else //означает «иначе» — что произойдёт, если условие не выполняется. В данном случае при невыполнении условия надпись «Главная» будет ссылкой, ведущей на главную страницу.
{
echo «<p><a href=’index.php’>Главная</a></p>»;
}
?>
- Условие мы придумали, но чтобы проверить переменную – нужно её задать.
Для этого на всех страницах разместим такие блоки кода:
<?php
$master =»Главная»;
?>
<?php
$master =»Раздел 1″;
?>
<?php
$master =»Раздел 2″;
?>
<?php
$master =»Раздел 3″;
?>
Как видно для каждой страницы свой код.
Итак, наши практические шаги по созданию php меню будут следующие:
1) Открываем файл index.php
и вставляем код
<?php
$master =»Главная»;
?>
до места вставки кода, выводящего само меню сайта <?php
include «menu.html»;
?>
2) Открываем файл menu.html и вставляем код с условием вместо простой html ссылки на главную страницу.
Смотрим в браузере и любуемся! Если зайдем на главную страницу, то ссылка перестала быть активной!
3) Повторяем пункт 1 и 2 со страницами 1.php, 2.php, 3.php
Повторение 1:
1) Открываем файл 1.php и вставляем до кода, выводящего меню блок с заданной переменной
<?php
$master =»Раздел 1″;
?>
2) Открываем файл menu.html и вставляем код с условием вместо простой ссылки Раздел 1, внеся следующие изменения:
<?php
if ($master == «Раздел 1») // это условие. Если оно выполняется – то в данном месте меню с помощью команды echo вставляются обычные HTML-теги выводящие надпись «Раздел 1».
{
echo «<p>Раздел 1</p>»;
}
else //означает «иначе» — что произойдёт, если условие не выполняется. В данном случае при невыполнении условия надпись «Раздел 1» будет ссылкой, ведущей на главную страницу.
{
echo «<p><a href=’1.php’>Раздел 1</a></p>»;
}
?>
Чудо повторилось! Теперь, если мы находимся на странице Раздел 1, ссылка в меню не активна.
Повторенье — мать ученья! Или для тех, кто в танке! Еще раз
Повторенье 2
1) Открываем файл 2.php и вставляем код.
<?php
$master =»Раздел 2″;
?>
2) Снова откроем файл menu.html и вставляем код с условием
теперь вместо ссылки Раздел 2, внеся следующие изменения:
<?php
if ($master == «Раздел 2») // это условие. Если оно выполняется – то в данном месте меню с помощью команды echo вставляются обычные HTML-теги выводящие надпись «Раздел 2».
{
echo «<p>Раздел 2 </p>»;
}
else //означает «иначе» — что произойдёт, если условие не выполняется. В данном случае при невыполнении условия надпись «Раздел 2» будет ссылкой, ведущей на главную страницу.
{
echo «<p><a href=’2.php’>Раздел 2 </a></p>»;
}
?>
Повторенье 3
1) Открываем файл 3.php и задаем переменную.
<?php
$master =»Раздел 3″;
?>
2) В файл menu.html вставляем код с условием вместо ссылки Раздел 3, изменения такие:
<?php
if ($master == «Раздел 3») // это условие. Если оно выполняется – то в данном месте меню с помощью команды echo вставляются обычные HTML-теги выводящие надпись «Раздел 3».
{
echo «<p>Раздел 3</p>»;
}
else //означает «иначе» — что произойдёт, если условие не выполняется. В данном случае при невыполнении условия надпись «Раздел 3» будет ссылкой, ведущей на главную страницу.
{
echo «<p><a href=’3.php’>Раздел 3</a></p>»;
}
?>
Итог: мы вместо ссылок в меню такого вида
<p><a href=»index.php»>Главная</a></p>
<p><a href=»1.php»>Раздел 1 </a></p>
<p><a href=»2.php»>Раздел 2</a></p>
<p><a href=»3.php»>Раздел 3</a></p>
получили динамические ссылки php в меню навигации по сайту.
Этот урок о php был написан по многочисленным просьбам посетителей сайта и является практическим пособием по изучению создания динамического меню для сайта на php.
Следующая шпрагалка вебмастера расскажет о том, как сделать на php уникальные заголовки, описания и ключевики для каждой страницы.
Вы можете скачать архив со всеми файлами шаблона сайта и меню php. Новичкам в программировании рекомендуется.
Если же вы готовы к серьезному изучению php, то лучше видео курса от Попова найти сложно. У него огромный опыт и хороший слог.
]]>
]]>
Конструктор меню — База знаний uCoz
Конструктор меню
Меню сайта — один из основных функциональных элементов, состоящий из набора ссылок на ключевые страницы. По умолчанию в него входят ссылки на активные модули и стандартные страницы («Информация о сайте», «Обратная связь»). Конструктор меню позволяет изменить набор ссылок без редактирования HTML-кода шаблонов сразу для всех страниц сайта.
Когда вы добавляете страницы на сайт, они могут автоматически добавляться и в меню. Кроме того, при активации модуля ссылка на него также попадает в меню сайта. Однако при удалении страницы или модуля ссылка не будет удалена из меню.
Вы можете создавать до 10 различных меню в рамках одного сайта.
Данная инструкция состоит из следующих шагов:
- Как узнать, используется ли конструктор меню на моем сайте?
- Редактирование меню
- Создание и размещение нового меню на сайте
- Адреса модулей системы
Как узнать, используется ли конструктор меню на моем сайте?
За отображение меню отвечают переменные вида $NMENU_n$. Подобные переменные встроены во все стандартные шаблоны.
В других случаях в панели управления нужно перейти в «Дизайн» / «Редактор» / «Глобальные блоки» и найти переменную в коде шаблона «Верхняя часть сайта»:
Не всегда меню размещается в указанном шаблоне, поэтому проверьте и другие: «Нижняя часть сайта», «Первый контейнер» и т.д.
Если вы разрабатываете свой шаблон, то включайте переменные меню в HTML-код. Когда покупаете шаблон в магазине или заказываете его разработку у фрилансеров, уточняйте, будет ли в шаблон встроен конструктор меню.
Редактирование меню
Чтобы отредактировать меню, перейдите в панель управления, откройте раздел «Дизайн» / «Конструктор меню»:
Выберите меню, которое хотите отредактировать:
Слева от названия меню нажмите на «Изменить параметры меню»:
Появится окно редактирования меню:
- Название меню. Отображается только в панели управления и помогает администратору отличить одно меню от другого.
- Ориентация меню. В зависимости от выбранного значения к меню будут применены разные стили оформления — горизонтальный или вертикальный.
- Удалить. Полностью удаляет меню.
Когда закончите редактирование, нажмите на ссылку «Готово».
Изменить порядок пунктов в меню можно, перетащив его за точки с левой стороны от формы:
Чтобы изменить пункт, наведите на него курсор мыши и нажмите «Изменить»:
Появится окно редактирования пункта меню:
- Название пункта. Отображается в списке пунктов меню, например, «Главная страница».
- URL-адрес. Будет открываться при нажатии на пункт меню.
- «Открывать в новом окне» добавляет атрибут target=”_blank” к ссылке.
- CSS-класс предназначен для индивидуального оформления. Используйте его, когда нужно выделить один или несколько пунктов меню.
- Удалить пункт меню.
Когда закончите редактирование пункта меню, нажмите на ссылку «Готово».
Для добавления пункта меню нажмите на изображение «+»:
и повторите действия по редактированию меню, которые мы рассмотрели ранее.
Важно! Перед добавлением пункта меню убедитесь, что страница, на которую он ссылается, существует и доступна для пользователей.
Чтобы внесенные изменения вступили в силу и отобразились на сайте, нажмите на кнопку «Сохранить»:
Создание и размещение нового меню на сайте
Чтобы создать новое меню, в панели управления откройте раздел «Дизайн» / «Конструктор меню» и нажмите на кнопку «Добавить»:
Появится новое меню:
Настройте меню, используя второй шаг данной инструкции.
Скопируйте переменную, которая отвечает за отображение меню в шаблоне (в нашем примере это $NMENU_2$).
В панели управления откройте раздел «Дизайн» / «Редактор» и найдите в меню слева «Глобальные блоки»:
Затем выполните следующие действия:
- Выберите подходящий глобальный блок для размещения меню
- Добавьте код в шаблон глобального блока
- Нажмите на кнопку «Сохранить»
Меню появится на сайте.
Другой способ разместить меню на сайте, включив конструктор из панели инструментов сайта, — отредактировать HTML-код глобального блока:
Адреса модулей системы
В этом разделе приведена информация об адресах модулей системы, которая поможет указать корректные ссылки на них:
| Модуль | Относительная ссылка | Пример абсолютной ссылки |
| Новости | /news/ | //example.com/news/ |
| Блог | /blog/ | //example.com/blog/ |
| Каталог сайтов | /dir/ | //example.com/dir/ |
| Каталог статей | /publ/ | //example.com/publ/ |
| Каталог файлов | /load/ | //example.com/load/ |
| Доска объявлений | /board/ | //example.com/board/ |
| FAQ | /faq/ | //example.com/faq/ |
| Интернет-магазин | /shop/ | //example.com/shop/ |
| Тесты | /tests/ | //example.com/tests/ |
| Видео | /video/ | //example.com/video/ |
| Форум | /forum/ | //example.com/forum/ |
| Фотоальбомы | /photo/ | //example.com/photo/ |
| Онлайн-игры | /stuff/ | //example.com/stuff/ |
| Гостевая книга | /gb/ | //example.com/gb/ |
Конструктор меню
Каким бы ни был сайт, без чего ему точно не обойтись, так это без меню. Причем зачастую на одном сайте присутствует сразу несколько меню — для основной и дополнительной навигации. Чтобы сделать меню для сайта правильно, важно учитывать особенности типа этого сайта, его тематики, объема и др. На разных сайтах меню реализовано по-разному: где-то это привычное всем вертикальное или горизонтальное текстовое меню, а где-то — нестандартное флэш-меню или меню в картинках. Факторы, влияющие на выбор того или иного решения, очень разнообразны. Например, всегда больше значение придается доступности меню при разных условиях использования сайта. В частности речь идет о доступности меню при просмотре на мобильных устройствах: при выборе подходящего меню важно учесть, смогут ли с таким меню работать мобильные пользователи. Ведь, к примеру, меню, раскрывающиеся при наведении курсора мыши, по определению не могут работать на современных мобильных гаджетах с сенсорным управлением — по той простой причине, что в таких устройствах нет курсора. Другой важный нюанс использования на мобильных устройствах, касающийся разработки меню для сайта, – применение для создания меню flash-технологий. Такие варианты пусть и не столь часто, но все же встречаются, а между тем воспроизведение flash-контента в мобильных устройствах, как правило, не поддерживается. В результате, если меню выполнено во «флэше», мобильные посетители сайта не смогут им полноценно воспользоваться. Следующий фактор, на который обычно обращается внимание при создании меню для сайта, – это его дизайн. Сегодня он может быть самым разнообразным, но все же в большинстве случаев предпочтение отдается классическим вертикальным или горизонтальным меню — они привычны для посетителей, с ними легко работать. Правда, здесь тоже есть свои нюансы. Например, при разработке горизонтальных меню не принято выполнять их в две и более строки, а столбец с вертикальным меню не должен занимать слишком широкую часть страницы, в результате названия пунктов такого меню обычно короткие. В тесной связи с дизайном меню рассматривается его реализация программными средствами. Самый простой и привычный вариант — меню на HTML, но возможно создание меню сайта также с помощью Javascript и уже упоминавшегося Flash. Меню, созданное при помощи HTML и CSS, обычно предпочтительнее, поскольку такое меню умеют «читать» даже поисковые роботы, что дает возможность полноценно проиндексировать сайт. Нельзя не упомянуть о структуре меню для сайта. В большинстве случаев меню имеет иерархическую структуру, причем для удобства навигации по сайту глубина вложенности меню, как правило, не превышает 3 уровней. Если же все-таки необходимо сделать меню «глубже», то вместо иерархической структуры можно применить структуру «решетка». Подобная структуру меню в частности популярна в интернет-магазинах. В зависимости от типа и объема сайта при его создании можно обойтись только одним меню, а можно — сделать еще и несколько дополнительных. Дополнительные меню для сайта проектируются по тем же ключевым принципам, что и основные, т. е. они должны быть доступными для посетителей и для поисковых систем, должны иметь удобную структуру и не слишком большую «глубину». Грамотно разработанные основные и дополнительные меню на сайте помогают поддерживать высокий уровень его юзабилити, а значит в перспективе способствуют хорошей конверсии посетителей сайта в покупателей или клиентов компании. Так что работу над веб-дизайном меню, как и над веб-дизайном сайта в целом, лучше всего доверять тем, кто владеет необходимыми знаниями и практическим опытом в данной сфере, — специалистам студии веб-дизайна WebStudio2U. Наша веб-студия предлагает как комплексную разработку сайтов, так и отдельно разработку веб-дизайна сайтов, оптимизацию сайтов, поддержку сайтов и другие услуги, необходимые для обеспечения полноценной работы веб-сайтов. С примерами выполненных в WebStudio2U сайтов вы можете ознакомиться в нашем портфолио, а заполнив онлайн-заявку на веб-дизайн сайта, вы узнаете, как вместе с вами мы можем задействовать весь потенциал сайта для получения эффективного помощника вашего бизнеса. Теги: |
Создание вертикального меню сайта
Автор: Александр Побединский
Я уже писал про, то как сделать меню на сайте. Сегодня я решил расширить тему так, как примеры в старой статье стали, так сказать менее актуальны, да и тема была не совсем раскрыта. Ну а делать мы с вами будем вертикальное меню.
Буду основываться только на свои знания и опыт. И так начнём! Одно дело скопировать готовый код и вставить его на страницу, здесь я думаю большого ума не надо. А что если приходится делать всё с нуля? Обычно с этим вопросом сталкиваются верстальщики, которые верстают страничку из макета PSD под заказ. Давайте с вами разберёмся с чего же начать? Пожалуй сейчас со мной согласятся многие разработчики, что меню делается на основе ненумерованного списка. Что ж тогда создадим его:
<ul>
<li>Категории</li>
<li>Новости</li>
<li>Конкурсы</li>
<li>Архив сайта</li>
</ul>
Результат вы можете увидеть здесь. Согласитесь не важно выглядит, всего лишь — обычный список. Давайте-ка подумаем, а зачем вообще нужно меню на сайте? Ответ очевиден:
Меню используется для навигации по сайту и служит для удобства передвижения посетителей сайта передвигаться по страничкам, рубрикам, подкатегориям и т.п.
Не судите строго определение придумал сам. Так вот в меню обязательно должны присутствовать ссылки на другие страницы:
<nav>
<ul>
<li><a href="#">Категории</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Конкурсы</a></li>
<li><a href="#">Архив сайта</a></li>
</ul>
</nav>
Как видите, я проставил в строчках списка ссылки, а также указал что наше меню является элементом навигации с помощью тега nav. Таким образом мы с Вами добавили ещё и семантику.
В принципе можно сказать, что навигация готова, но удобно ли она посетителю? Здесь уже надо считаться с понятием юзабилити сайта.
Если смотреть с точки зрения того, что любое меню должно являться не только средством навигации, но и элементом юзабилити (удобства использования), то наше оно вообще не готово.
Стили для вертикального меню html
В создании полноценного вертикального меню в html нам поможет написание стилей с помощью CSS. Для начала уберём маркер у нашего списка и нижнее подчеркивание у ссылок:
ul{
list-style:none;
}
li a{
text-decoration:none;
}
Вот что у нас получилось в результате. Некоторые вебмастера не убирают маркер, а ставят свой. Здесь вопрос на любителя, либо требование макета, который поступил от заказчика.
Следующим шагом будет обозначение блока и пунктов списка меню:
ul{
list-style:none; /* Убираем маркер списка */
background:#F9E3C3; /* Задаём цвет фона меню или списка */
width:9em; /* Ширина блока */
padding:0.4em 0 0.4em 10%; /* Отступы внутри блока */
}
li{
width:65%; /* Ширина пункта */
margin:0.3em 1em 0.3em 0; /* задаём значение полей */
padding:0.5em; /* Задаём отступы внутри пункта */
background:#CCFFFF; /* Цвет фона */
}
li a{
text-decoration:none; /* Убираем нижнее подчеркивание у ссылок */
color:#000000; /* Цвет текста ссылки */
}
Результат можно посмотреть здесь. Осталось только сделать небольшой штрих и наше вертикальное меню будет готово. Добавим выделение пункта меню при помощи псевдокласса :hover:
li:hover, li:hover a {
background:#006666; /* Фон пункта меню при выделении */
color:#ffffff; /* Цвет ссылки */
cursor:pointer; /* Устанавливаем вид курсора при выделении пункта */
}
Окончательный вариант примет вот такой вид. Окончательный код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Вертикальное меню<title>
<style>
ul{
list-style:none; /* Убираем маркер списка */
background:#F9E3C3; /* Задаём цвет фона меню или списка */
width:9em; /* Ширина блока */
padding:0.4em 0 0.4em 10%; /* Отступы внутри блока */
}
li{
width:65%; /* Ширина пункта */
margin:0.3em 1em 0.3em 0; /* задаём значение полей вокруг пункта */
padding:0.5em; /* Задаём отступы внутри пункта */
background:#CCFFFF; /* Цвет фона */
}
li a{
text-decoration:none; /* Убираем нижнее подчеркивание у ссылок */
color:#000000; /* Цвет текста ссылки */
}
li:hover,li:hover a {
background:#006666; /* Фон пункта меню при выделении */
color:#ffffff; /* Цвет ссылки */
cursor:pointer; /* Устанавливаем вид курсора при выделении пункта меню */
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Категории</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Конкурсы</a></li>
<li><a href="#">Архив сайта</a></li>
</ul>
</nav>
</body>
</html>
В этой статье я не стал создавать какое-то супер красивое меню, с кучей свойств, здесь важно было показать как оно делается. А как получилось донести до вас тему, уважаемые читатели решать только вам.
Метки: вертикальное меню, создание меню Width против device-width Создание горизонтального меню Как создать меню для сайта?
Добрый день мои друзья! На связи как обычно Серега, кто ж еще то? В этой статье мы разберем следующую тему:
Как создать меню для сайта?
Но для начала – давай немного предыстории.
Дело было вечером, делать было нечего – сидел я и маялся от скуки. Резко меня посетила одна светлая мысль:
– С хули ж ты сидишь без дела? Возьми и сделай, что-нибудь красивое, а заодно и людям добрым покажи, как сотворить оную фигню!
И тут меня проперло создать на своем сайте красивое меню. Кто еще не знает – эта хрень называется МУЗА!
В общем, под действием сие волшебного пендаля, я на скорую руку открыл фотошоп и начал там воплощать моё горячее желание – забацать красивое и простое меню для сайта.
Получилось действительно оригинально. Вот, что значит – действовать под Музой! Пишу именно с большой буквы, так как это настоящее чудо!
Да, кстати, недавно нарвался на один прикольный сайтик. Мне его меню ну просто зверски понравилось
Да и сам сайт отлично смотрится. И не удивительно, ведь ребята делают качественные сайты. Спектр работы — от сайта визитки и до разработки интернет-магазина. И работы у них приличные.
Да елки палки, на этот сайт стоит взглянуть только ради менюшки — офигенно оригинальная!
Муза у них тоже что надо, я еще и позавидую…
Ладно, давайте вернемся к нашему хитрому плану создания меню для сайта.
Результат ты можешь посмотреть в сайдбаре моего сайта – самый верх, либо нажав ниже на кнопку демо:
Ну как? Понравилось тебе мое меню?
Надеюсь что да. И если я прав – читаем дальше!
Эта статья условно разделена на две части:
1. Для лентяев или как УСТАНОВИТЬ меню на сайт?
2. Для учеников или как СОЗДАТЬ меню для сайта?
В первой части я обойдусь текстом и кодом, так как там нет ничего тяжелого. А для второй части я записал видео урок, в котором мы будем создавать меню из демки!
Как установить меню на сайт?
Шаг 1. Для начала скачиваем файл-исходник меню: скачать rg_menu.rar
Шаг 2. Извлекаем все из архива в отдельную папку!
Шаг 3. Там будет папка image и файл стилей menu_master_css.css — создаем на своем хостинге отдельную папку и копируем их туда!
Шаг 4. Открываем в редакторе файл index.html — это файл из моего архива! И там копируем строчки кода находящиеся между комментариями «Начало/конец кода меню»:
<!-- Начало кода меню -->
<div>
<div><a href="#">Первый пункт меню</a></div>
<div><a href="#">Второй пункт меню</a></div>
<div><a href="#">Третий пункт меню</a></div>
<div><a href="#">Четвертый пункт меню</a></div>
</div>
<!-- Конец кода меню -->Шаг 5. Вставляем эти строчки в то место, где надо создать меню на сайте!
Шаг 6. Меняем названия пунктов меню на свои и прописываем ссылки. Ссылки прописываем вместо знака #. Если надо больше пунктов, или меньше, добавляете/удаляете строчки:
<div><a href="…">…</a></div>Шаг 7. Прописываете путь к файлу стилей — menu_master_css.css при помощи следующего кода:
<link rel="stylesheet" href="http://ваш_сайт/путь/menu_master_css.css" type="text/css">Где http://ваш_сайт/путь/ — путь до файла menu_master_css.css
Этот код можно вставить перед кодом из шага 4.
• папка image и файл стилей menu_master_css.css должны находиться в одном каталоге!
• Ширина меню составляет 268px – не больше не меньше!
Как создать меню для сайта?
Опять таки, дорогой друг, давай пойдем по шагам! Сразу хочу предупредить, что если ты не знаешь HTML и CSS – тебе будет много чего не понятно.
И так поехали:
1 Шаг. Скачиваем исходные файлы для работы: скачать files_rg_menu.rar
2 Шаг. Для работы с кодом необходим редактор. Поэтому если у вас его нет – можете посмотреть в статье «Что такое редактор кода?». В конце статьи есть ссылки на скачивание!
3 Шаг. После того как архив скачан, редактор кода есть – самое время смотреть обучающий видео урок:
Видео урок по созданию меню для сайта!
Скачать с народа в высоком качестве.
• Если показывает кракозяблы – проверяй кодировку файла – должен быть в utf-8.
если материал понравился – нажми на любую кнопку +1 (желательно на все)!