Горизонтальное меню для сайта — уроки фотошоп

Горизонтальное меню для сайта

Горизонтальное меню представляет собой список разделов сайта, поэтому логичнее разметить внутри элемента

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

    Как сделать горизонтальное меню: разметка и примеры оформления

    HTML-разметка и базовые стили для горизонтального меню

    По умолчанию все элементы списка

  • располагаются вертикально, занимая по ширине всю ширину элемента контейнера

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

    HTML разметка для горизонтальной навигации

    • Пункт меню
    • Пункт меню
    • Пункт меню

    Горизонтальное меню, находящееся внутри тега

    , можно дополнительно помещать внутрь элемента … и/или . Благодаря этому html-разметке придается семантический смысл, а также появляется дополнительная возможность для форматирования блока меню.

    Существует несколько способов разместить их горизонтально. Для начала нужно сбросить стили браузера по умолчанию для элементов навигации:

    ul { list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/ padding-left: 0; /*убираем левый отступ, равный 40px*/ } a {text-decoration: none; /*убираем подчеркивание текста ссылок*/}

    See the Pen GJxayB by Elena Nazarova (@nazarelen) on CodePen.

    Способ 1. li {display: inline;}

    Делаем элементы списка строчными. В результате они располагаются по горизонтали, с правой стороны между ними добавляется промежуток, равный 0.4em (вычисляется относительно размера шрифта). Чтобы убрать его, добавляем для li отрицательное правое поле li {margin-right: -4px;}. Дальше стилизуем ссылки по своему желанию.

    Способ 2. li {float: left;}

    Делаем элементы списка плавающими. В результате они располагаются по горизонтали. Высота блока-контейнера ul становится равной нулю. Чтобы решить эту проблему, добавляем для ul {overflow: hidden;}, расширяя его и позволяя ему таким образом содержать плавающие элементы. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.

    Способ 3. li {display: inline-block;}

    Делаем элементы списка строчно-блочными. Они располагаются по горизонтали, с правой стороны образуется промежуток, как и в первом случае. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.

    Способ 4. ul {display: flex;}

    Делаем список ul гибким контейнером с помощью модели CSS3 flexbox. В результате элементы списка располагаются горизонтально. Добавляем для ссылок a {display: block;} и стилизуем их по своему желанию.

    1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку

    • Work
    • About
    • Blog
    • Contact

    Источник: https://html5book.ru/gorizontalnoe-menu/

    Как создать меню для сайта

    Разберем, как сделать объемное горизонтальное меню для сайта. Для начала создаем документ шириной 1600 пикселей, диной 2000 пикселей.

    Создаем новый слой.

    На боковой панели инструментов выбираем «Прямоугольная область».

    Теперь образуем рабочую область для будущего меню.

    С помощью инструмента «Заливка» заполняем выделенную область цветом. Дабы упростить вашу работу — #0391ff, именно этот цвет я задействовала. Как изменить цвет, вы найдете здесь.

    Теперь попытаемся найти середину заготовки меню. Для этого выбираем инструмент «перемещение» и кликаем по слою с заготовкой.

    Теперь мы видим середину и можем пометить ее для себя. Знание ее местонахождения нам еще пригодится.

    Установим вспомогательную линию на середине документа. Для этого нам придется переместить курсор к линейке расположенной у баковой панели инструментов и вытащить ее.

    На боковой панели инструментов выбираем «Текст» и прописываем название будущих разделов.

    Для примера я выбрала тематику мебели и решила разработать меню для сайта для следующих разделов:

    • Главная
    • Кухни
    • Спальни
    • Мягкая мебель
    • Прихожие
    • Стенки
    • О компании
    • Контакты

    Пишем в строчку. Между каждым разделом оставляем расстояние при помощи пробелов.

    Шрифт arial размер 18 пикселей. Данные параметры мы найдем на панели «Текст».

    Теперь с помощью вышеупомянутого инструмента «Перемещение» устанавливаем текст посередине рабочего документа, ориентируясь на вспомогательную прямую.

    Теперь добавим нашему меню немного объема.

    Разделим кнопки. Для этого нам необходимо выбрать инструмент «линия» на панели инструментов. Берем цвет чуть темнее поля нашего меню. Допустим #0179d6. Проводим горизонтальную линию, зажимая клавишу shift толщиной 1 пиксель. Стараемся провести ровно. От границы до границы синей области. Если с этим возникли сложности, вы можете изменить ее размер с помощью инструмента перемещение.

    Затем растрируем получившуюся линию.

    Теперь нам следует продублировать полученный элемент. Для этого в окне слоев кликаем по слою с фигурой левой кнопкой мыши и выбираем «Создать дубликат слоя».

    Кликаем по получившемуся слою и выбираем «Параметры наложения». Нам нужна вкладка «Наложение цвета». Берем цвет чуть светлее поля меню. Например, #6bbeff.

    Теперь с помощью инструмента «Перемещение» оттягиваем слой от дубля. Ставим их рядом. Для этого вам придется увеличить изображение. Фигуры следует расположить рядом, так, чтобы между ними не было просвета.

    Вот что у нас получилось. Кнопка стала объемной. Мы создали имитацию света и тени. Теперь проделаем то же самое с остальными кнопками.

    Дублируем слои, дабы сократить время работы.

    Объем появился, но чего-то не хватает. Попробуем придать объема полосе меню.

    Создадим горизонтальные линии тем же методом, задействовав цвета #0063af и #78c2fb.

    Расположим их сверху. Вот что у нас получилось.

    Простое объемное меню для сайта готово!

    Источник: http://photoshop-work.ru/kak-sozdat-menju-dlja-sajta

    Создаём дизайн для меню в Фотошоп

    В этом уроке вы узнаете, как с помощью Photoshop создать простое и стильное выпадающее меню.

    Шаг 1

    Открываем Photoshop и жмем Ctrl+N, чтобы создать новый документ с параметрами, показанными ниже на скриншоте. Активируем сетку View — Show — Grid (Вид — Показать — Сетка) и привязку к сетке View — Snap to — Grid (Вид — Прикрепить к — Сетка). На данный момент нам нужна сетка с ячейками 5 px.

    Переходим Edit — Preferences — Guides, Grid and Slices (Редактирование — Установки — Направляющие, сетка и фрагменты) и находим параметры Grid (Сетка). Для Gridline Every (Линии через каждые) вводим 5, а для Subdivision (Внутреннее деление на) — 1. Также устанавливаем цвет сетки на #a7a7a7. Закончив, жмем OK.

    Сетка очень помогает в работе, советую ею не пренебрегать. Также открываем панель информации Window — Info (Окно — Информация).

    Шаг 2

    Устанавливаем цвет переднего плана на #3f8ecf, берем Rounded Rectangle Tool(Закругленный прямоугольник) (U) и назначаем его радиус на 20 px. Создаем прямоугольник размером 160 х 40 px и дублируем его (Ctrl+J). Выбираем дубликат и меняем его цвет на белый.

    Активируем Rectangle Tool(Прямоугольник) (U), жмем кнопку Intersect shape areas (Область пересечения фигур) на верхней панели и рисуем квадрат размером 40 х 40 px, как показано на третьем скриншоте.

    Перемещаемся на панель слоев и дважды кликаем по слою с белым прямоугольником, чтобы открыть окно Layer Style (Стиль слоя).

    Применяем Inner Glow (Внутреннее свечение), Gradient Overlay (Наложение градиента) и Stroke (Обводка) с настройками, как на скриншоте ниже.

    Шаг 3

    Выделяем синий прямоугольник и еще раз дублируем его (Ctrl+J). Выделяем дубликат, меняем его цвет на белый и активируем Rectangle Tool(Прямоугольник) (U). Жмем кнопку Intersect shape areas (Область пересечения фигур) на верхней панели и рисуем прямоугольник размером 120 х 40 px, как показано ниже.

    Переходим на панель слоев, кликаем правой кнопкой по слою с белым прямоугольником, созданном в предыдущем шаге, и выбираем Copy Layer Style (Копировать стиль слоя). Переходим к белому прямоугольнику, который мы создали в этом шаге, жмем по нему правой кнопкой и выбираем Paste Layer Style (Вклеить стиль слоя).

    Шаг 4

    Берем Type Tool(Текст) (Т) и пишем текст на кнопке (цвет #a1d8ff). Затем открываем окно Layer Style (Стиль слоя) и применяем к тексту стили слоя, как показано ниже.

    Шаг 5

    Возвращаемся к синему прямоугольнику, который мы создали во втором шаге. Открываем окно Layer Style (Стиль слоя) и применяем стиль слоя Drop Shadow (Тень).

    Дублируем этот прямоугольник (Ctrl+J), выделяем копию, открываем окно Layer Style (Стиль слоя) и редактируем стиль слоя, как показано ниже. Затем выделяем все созданные на данный момент прямоугольники и группируем их (Ctrl+G).

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

    Шаг 6

    Перемещаемся к панели слоев, жмем правой кнопкой по созданной группе и выбираем Duplicate Group (Дублировать группу). Выделяем копию группы и опускаем ее чуть ниже оригинала, как показано на скриншоте.

    Шаг 7

    Теперь сосредоточимся на дубликате группы. Сначала подкорректируем текст. Меняем его цвет на #b4b4b4, затем жмем правой кнопкой по слою и выбираем Clear Layer Style (Очистить стиль слоя). Открываем окно Layer Style (Стиль слоя) и добавляем к тексту стиль слоя Drop Shadow (Тень).

    Далее нам нужно отредактировать прямоугольник. Меняем его цвет на #f5f5f5 и удаляем стили слоя. Затем открываем окно Layer Style (Стиль слоя) и применяем новые стили слоя, как показано ниже.

    Шаг 8

    Устанавливаем цвет переднего плана на #f5f5f5, берем Rounded Rectangle Tool(Закругленный прямоугольник) (U) и назначаем его радиус на 20 px. Создаем прямоугольник размером 160 х 35 px и размещаем его под кнопкой, как показано на рисунке 1.

    Затем дублируем его (Ctrl+J) и меняем цвет копии на белый.

    Активируем Rectangle Tool(Прямоугольник) (U), жмем на кнопку Intersect shape areas (Область пересечения фигур) на верхней панели и рисуем прямоугольник размером 40 х 35 px, как показано на рисунке 2.

    Переходим на панель слоев и уменьшаем Fill (Заливка) этого слоя до 0%. Затем открываем окно Layer Style (Стиль слоя) и применяем стиль слоя Inner Shadow (Внутренняя тень).

    Шаг 9

    Активируем закругленный прямоугольник, который мы создали в начале предыдущего шага, и дублируем его (Ctrl+J). Активируем копию и на панели слоев перемещаем ее выше (Shift+Ctrl+]). Уменьшаем Fill (Заливка) до 0%, открываем окно Layer Style (Стиль слоя) и применяем стили слоя.

    Шаг 10

    Активируем второй прямоугольник, созданный в восьмом шаге, и дублируем его (Ctrl+J). Перемещаем копию выше (Shift+Ctrl+]), затем копируем стили слоя из предыдущего шага и вставляем их на этот прямоугольник.

    Далее применяем к первому прямоугольнику из восьмого шага стиль слоя Drop Shadow (Тень).

    Шаг 11

    Теперь сосредоточимся на правой части кнопки, созданной в предыдущем шаге. Устанавливаем цвет переднего плана на #ebebeb, берем Rectangle Tool(Прямоугольник) (U) и создаем прямоугольник размером 10 х 5 px, как показано ниже.

    Далее жмем кнопку Add to shape area (Добавить к области фигуры) и сразу над предыдущим рисуем новый прямоугольник размером 5 х 10 px, как показано на рисунке 2. Убеждаемся, что созданный слой активен, и жмем Ctrl+T. Поворачиваем стрелку на -45 градусов и жмем Enter.

    Переходим на панель слоев, зажимаем клавишу Ctrl и кликаем по миниатюре слоя с прямоугольником, созданным в предыдущем шаге. В результате вокруг фигуры должно появиться выделение. Не снимая выделения, берем Move Tool(Перемещение) (V) и проверяем, что слой с созданной стрелкой все еще активен.

    Перемещаемся на верхнюю панель и жмем кнопки Align vertical centers (Выравнивание центров по вертикали) и Align horizontal centres (Выравнивание центров по вертикали), как показано на пятом рисунке. Открываем Layer Style (Стиль слоя) и применяем стили слоя для стрелки.

    Шаг 12

    Берем Type Tool(Текст) (Т) и пишем любое слово на кнопке, как показано ниже (цвет #b4b4b4). Затем применяем к тексту стиль слоя Drop Shadow (Тень). Выделяем слой с текстом и все слои, созданные в последних четырех шагах, и группируем их (Ctrl+G).

    Шаг 13

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

    Шаг 14

    Теперь доработаем подменю Tutorials. Активируем слой со стрелкой в группе с кнопкой Tutorials и открываем окно Layer Style (Стиль слоя). Применяем стили слоя.

    Шаг 15

    Активируем текстовый слой Tutorials и меняем его цвет на #2c95dd. Также активируем серый закругленный прямоугольник под текстом и применяем к нему стиль слоя Gradient Overlay (Наложение градиента).

    Шаг 16

    Для финального шага нам необходимо сменить параметры сетки.

    Переходим Edit — Preferences — Guides, Grid & Slices (Редактироание — Установки — Направляющие, сетка и фрагменты) и параметр Gridline Every (Линии через каждые) устанавливаем на 1. Устанавливаем цвет переднего плана на #a1d8ff, берем Rectangle Tool(Прямоугольник) (U) и создаем квадрат размером 6 х 6 px.

    Затем активируем Direct Selection Tool(Частичное выделение) (А), хватаем нижний правый узелок квадрата и тянем его к центру на 3 px. После этого удаляем левый узелок и получаем треугольник.

    Открываем окно Layer Style (Стиль слоя) и применяем для треугольника стили слоя.

    Шаг 17

    Дублируем треугольник из предыдущего шага (Ctrl+J). Активируем копию, перемещаем ее в группу созданную в пятом шаге и размещаем на первой кнопке.

    Финальный результат

    Еще вариант

    Источник: https://Photoshop-master.ru/lessons/web-and-app/sozdam-dizayn-dlya-menyu-v-fotoshop.html

    Подборка различных менюшек. 1 часть — горизонтальные меню

    Если Вас интересуют качественные и новые HTML и CSS темплейты, уникальные и свежие JavaScript решения, актуальные уроки по фотошопу и графическому дизайну, рекомендации и примеры уроков по созданию красивых и оригинальных сайтов, или Вы хотите быть в курсе последних новинок и трендов в веб разработке? Тогда Вы попали именно туда! Также не останутся в стороне вопросы связанные с продвижением сайта в поисковиках – СЕО и оптимизация. Рассмотрим основные моменты качественного наполнения сайта – копирайтинг , веб-райтинг, нейминг итд. Надеюсь у нас Вам понравиться 😉

    Театр начинается с вешалки – так принято говорить. Для большинства пользователей в сети мнение об удобности и юзабилити сайта завязано не только на его дизайне и внешней привлекательности. Большое значение имеет удобная навигация.

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

    В итоге клиент такого сайта зачастую не может с первого раза найти то, что именно ему нужно, это ведет к раздражению и не восприятию сайта – а ведь изначально задачу планировали ровно противоположную. Поэтому мой девиз – не перемудри! Старайтесь меню делать такое, чтобы клиент с первого взгляда  мог определиться в какой раздел ему нужно.

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

    Мега подборка различных менюшек на любой вкус.

    Часть первая – горизонтальные меню.

    Сетка аккордеон на JQuery

    Большая сетка аккордеон с применением Query JavaScript. Удобно для больших мега-меню. Выделенный пункт увеличивается как по горизонтали так и по вертикали.

    Демо | Скачать

    Простое меню с большими элементами

    Простое меню с применением jQuery. Полноценно работает в Safari и Chrome.

    Демо | Скачать

    Меню в стиле гаражных дверей на jQuery

    Простая менюшка с эффектом открытия гаражных ворот при наведении

    Демо | Скачать

    JavaScript выпадающего меню в несколько уровней

    Демо | Скачать

    Огромное горизонтальное меню на основе javascript #1

    Демо | Скачать

    Огромное горизонтальное меню на основе javascript #2

    Демо | Скачать

    Огромное горизонтальное меню на основе javascript #3

    Демо | Скачать

    Горизонтальное двухуровневое меню

    Демо | Скачать

    Анимационное меню  на JQuery

    Демо | Скачать

    Затухающее меню с JQuery

    Красивое простое меню с эффектом затухания.

    Демо | Скачать

    Большое выпадающее меню в верху сайта

    Демо | Скачать

    Apple style меню

    Демо | Скачать

    Выпадающее Apple style меню Nav с HTML5, CSS3 и JQuery

    Демо | Скачать

    Минималистичное мультиуровневое меню

    Демо | Скачать

    Магическая линия на JQuery

    Меню с интерсным эффектом задержки фона или подчеркивания. Базируется на JQuery.

    Демо | Скачать

    Минималистичное jQuery меню

    Минималистичное меню с выпадающим списком, работает даже в старых версиях броузеров (IE 6)

    Демо | Скачать

    Интересное вертикальное меню

    Демо | Скачать

    Необычное раздвижное меню на Mootools

    Демо | Скачать

    Интересное горизонтальное разъезжающееся меню

    Демо | Скачать

    Выпадающее  jQuery меню

    Демо | Скачать

    Горизонтальное выпадающее меню со строкой поиска

    Демо | Скачать

    Полнофункциональное меню с применением jQuery

    Демо | Скачать

    Крутая анимация при помощи CSS и JQuery

    Демо | Скачать

    Анимированные меню при помощи jQuery

    Демо | Скачать

    Размывающееся CSS меню

    Демо

    Элегантное меню на CSS

    Демо | Скачать

    Большое меню на CSS

    Демо | Скачать

    Анимированное меню с применением CSS

    Демо

    CSS выпадающее мега-меню

    Демо | Скачать

    Статичное меню на jQuery

    Демо | Скачать

    Очень стильное и красивое меню с применением jQuery

    Демо | Скачать

    Стильное анимированное меню

    Демо | Скачать

    Красивое горизонтальное выезжающее меню

    Демо | Скачать

    Стильное меню на jQuery с применением слайдов

    Демо | Скачать

    Элегантное меню

    Демо | Скачать

    Меню на основе CSS3

    Демо

    Стильное меню на основе CSS

    Демо

    Простое меню на JavaScript

    Демо

    Стильное меню-аккордеон с картинками

    Демо | Скачать

    Меню в виде перекрывающихся вкладок

    Демо | Скачать

    Горизонтальное спрайт меню

    Демо | Скачать

    CSS выпадающее меню

    Демо | Скачать

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

    Демо

    CSS меню с анимацией

    Демо | Скачать

    Стильная навигация при помощи CSS3

    Демо | Скачать

    Необычное горизонтальное меню

    Демо | Скачать

    Стильное выпадающее меню с применением jQuery а также CSS

    Демо | Скачать

    Горизонтальное меню с выпадающими списками

     Демо | Скачать

    Стильное горизонтальное меню на основе CSS

    Демо | Скачать

    Исчезаюшее меню с jQuery

    Демо

    Источник: http://blog.nardodesign.com/ru/index.php?id=52

    30 горизонтальных меню для сайта

    30 горизонтальных меню для сайта — 4.8 out of 5 based on 5 votes

    Представляем вашему вниманию подборку из 30 горизонтальных меню для сайта. Все меню сделаны только с применением CSS и HTML и проверялись на работоспособность в браузерах IE6, IE7, IE8, Firefox, Opera, Safari, Chrome. Все представленные исходники запакованы в архивы.

    В каждом из архивов вы найдете, HTML файл содержащий структуру меню, файл style.css, который содержит стили для данного меню и папку » images» в которой располагаются изображения для данного меню. Все виды меню построены на CSS и списках UL LI, что обеспечивает легкое редактирование и добавление пунктов меню при необходимости.

    1. Темно синее CSS меню.Меню в темно синем стиле 100% ширины.ДемоСкачать 2. Стильное зеленое меню.Меню в зеленом стиле подойдет для многих цветов фона.ДемоСкачать 3. Глянцевое меню.Чёрное меню с оранжевым эффектом при наведении и зеркальным отблеском, применяется на белом фоне.ДемоСкачать
    4. Стильное коричневое меню.Меню в коричневом цвете, затемняющееся при наведении кусора.ДемоСкачать 5. Черное глянцевое меню.Черное меню с глянцевым эффектом на белом фоне.ДемоСкачать 6. Округлое синее меню.Синее меню с закругленными углами и красивым эффектом при наведении, может использоваться на белом фоне.ДемоСкачать
    7. Разноцветное менюРазноцветное меню с эффектом разгибания уголка при наведении.ДемоСкачать 8. Шоколадный стиль меню.Меню в шоколадном стиле с эффектом выпуклости при наведении.ДемоСкачать 9. Блейзер меню.Блейзер меню, с интересным эффектом при наведении которое, может быть использовано на любом светлом фоне.ДемоСкачать
    10. Flasy меню.Черное меню с зеленым эффектом свечения при наведении курсора.ДемоСкачать 11. Orcom меню.Меню с удивительным эффектом при наведении курсора, ширина меню установлена в 700 px.ДемоСкачать 12. Oplaz Css меню.Css меню с простым эффектом при наведении курсора, шириной 700 px и зеркальным эффектом.ДемоСкачать
    13. Quaza CSS меню.Темно красное меню, длиной 700 px с простым эффектом при наведении и оранжевым активным пунктом.ДемоСкачать 14. Flosy CSS меню.CSS меню с эффектом рамки при наведении на пункт, меню сделано с применением одного изображения.ДемоСкачать 15. Vonso CSS меню.CSS меню с красивым фоном.ДемоСкачать
    16. Razer меню.Простое меню с двумя различными эффектами при наведении и для активного пункта меню.ДемоСкачать 17. Brány CSS меню.Простое меню с закругленными углами.ДемоСкачать 18. Capzl CSS меню.Глянцевое горизонтальное меню с зеркальным отражением.ДемоСкачать
    19. Skin CSS меню.Горизонтально меню со скругленными углами и активными пунктами в виде вкладок.ДемоСкачать 20. Nozml меню.Простое меню, сделанное без использования изображений, его можно размещать в верхней части шапки сайта, для отображения основных важных пунктов.ДемоСкачать 21. Rapak CSS меню.Горизонтальное меню с красивым фоном и эффектом рамки при наведении курсора на пункт.ДемоСкачать
    22. Czoo CSS меню.Простое горизонтальное меню 100%, ширины с эффектом при наведении курсора.ДемоСкачать 23. Sapy CSS меню.Классическое горизонтальное меню, может быть использовано практически для любого сайта.ДемоСкачать 24. Голубое CSS меню.Меню с красивым фоном, имеющим изогнутый вид.ДемоСкачать
    25. Cremy CSS меню.Меню с затемненными уголками пунктов, может быть использовано на светлых и темных фонах.ДемоСкачать 26. Sloon CSS меню.Светлое меню с оранжевыми активными пунктами.ДемоСкачать 27. Artine CSS меню.Креативное горизонтальное меню.ДемоСкачать
    28. Woody CSS меню.Меню с необычным оформлением пунктов.ДемоСкачать 29. Серебристое меню.Серебристое меню с удивительным эффектом при наведении курсора, может использоваться на белом фоне.ДемоСкачать 30. Глянцевое меню.Черное глянцевое меню с зеркальным отражением и синим эффектом при наведении курсора.ДемоСкачать

    Файлы для скачивания

    Материал подготовлен проектом: WebMasterMix.ru
    Источник

    Рекомендуем ознакомиться:

    Подробности

    Источник: http://WebMasterMix.ru/css-blanks/91-gorizontalnoe-menyu-dlya-saita.html

    Меню для сайта на css: оформление навигации сайта

    От автора: приветствую вас на нашем блоге, дорогие читатели. Сегодня я предлагаю вам сделать в html меню для сайта. Css нам тоже в этом деле поможет – с его помощью мы оформим нашу навигацию.

    Вертикальное меню

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

    12345

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

    Практический курс по верстке адаптивного лендинга с нуля!

    Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

    Узнать подробнее

    Приступаем к оформлению

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

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

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

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

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

    Вот так вот и делается вертикальное меню для сайта на css, а еще его очень легко преобразовать в горизонтальное, что мы сейчас и сделаем.

    Горизонтальное меню

    Собственно, из уже получившегося меню можно легко сделать горизонтальное. Для этого всего лишь нужно записать:

    Однако если преобразовать пункты списка в блочно-строчные, то между ними образуется небольшой отступ справа. Он равен четырем пикселям, поэтому если вы хотите от него избавиться, то нужно задать отрицательный margin:

    Практический курс по верстке адаптивного лендинга с нуля!

    Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

    Узнать подробнее

    Можно поступить и по-другому: не использовать свойство display, а отправить все блоки влево с помощью float: left, тогда никаких отступов между пунктами и не будет.

    Как сделать выпадающее меню для сайта

    Давайте оставим inline-block, дописав отрицательный отступ справа и реализуем для первого пункта раскрывающееся подменю с тремя пунктами. Для этого нам придется изменить для пунктов списка правило:

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

    Пункт 1Подпункт 1Подпункт 2Подпункт 3Пункт 2Пункт 3Пункт 4Пункт 5

    Как видите, мы добавили вложенный список в первый пункт и добавили к нему класс. Добавим такие стили, чтобы окончательно оформить наши меню.

    Мы задали абсолютное позиционирование нашей вложенной навигации, чтобы она выпала из потока. Также заметьте, что первой ссылке задан класс dropdown. Это для того, чтобы задать картинку-фон, которая показывала бы, что меню выпадающее.

    Вот такую картинку мы поставим в фон ссылке.

    background:#75CB62 url(arrow.png) no-repeat 80% 50%;

    Почти готово! Пока что наше подменю видно на странице, нужно его скрыть с помощью display: none. Осталось прописать вот такой вот не самый понятный селектор:

    .main-menu .dropdown:hover ~ .sub-menu{

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

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

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

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

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

    На этом я на сегодня с вами прощаюсь. Желаю вам удачного изучения веб-технологий.

    Практический курс по верстке адаптивного лендинга с нуля!

    Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

    Узнать подробнее

    Источник: https://webformyself.com/menyu-dlya-sajta-na-css-oformlenie-navigacii-sajta/

    Как сделать горизонтальное меню для сайта

    Классическим средством навигации по сайту является горизонтальное меню в шапке сайта. Посмотрим, как сделать простое горизонтальное меню на HTML и CSS.

    Простое HTML меню

    По смыслу меню является списком разделов сайта, поэтому логично для меню использовать тег ul — маркированный список. Кроме того, в HTML5 появился новый тег, который следует использовать для обозначения области навигации по сайту — nav. Использование этих двух тегов позволит поисковой системе точнее разобраться в структуре нашего сайта.

    В качестве примера возьмём меню из 4-х пунктов: Главная, Статьи, Услуги и Контакты. Таким образом код HTML нашего меню будет выглядеть так:

    Если у вас nav используется только для главного горизонтального меню, можно обойтись без указания класса и все стили описать с использованием nav в качестве опорного селектора.

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

    Буква A на конце класса потому, что будут еще варианты B и С

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

    В первую очередь необходимо убрать маркеры списка и лишние отступы:

    К элементам списка мы применяем режим inline-block:

    Этот режим означает, что «снаружи» элементы списка будут обрабатываться как строчные элементы, т.е. они вытянутся в одну строку. Внутри же они будут по-прежнему блочными элементами. Получается горизонтальная строка меню:

    Видите пробелы между элементами меню? Это не отступы, а реальные текстовые пробелы. Они возникли из-за того, что HTML-код был разбит на несколько строк, и «пустые» символы между пунктами меню браузер интерпретировал как пробелы между «словами». Эту особенность надо учитывать при использовании режима inline-block.

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

    Поэтому при вёрстке горизонтальных панелей inline-block-ом принято все ненужные пробелы убирать. Я исправил HTML код меню так, чтобы между тегами не было лишних пробелов.

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

    Теперь пробелы исчезли:

    Не бойтесь, что пункты меню сливаются. Сейчас мы добавим немного оформления, и всё станет намного симпатичнее:

    text-align: center используется, чтобы выровнять меню по центру страницы. Та как мы указали, что пункты меню следует воспринимать как строчные элемениты, они выравниваются при помощи text-align.

    Высоту меню я задал, указав line-height. Этот приём позволяет одновременно указать высоту блока и выровнять текст по центру блока в вертикальном направлении.

    Для тега a я также задал режим display: block, это делает ссылкой, на которую можно надать, весь прямоугольник пункта меню, а не только небольшую область текста.

    Результат:

    Как поведёт себя наше меню при уменьшении ширины страницы? Уменьшите окно браузера по ширине так, чтобы меню перестало в него помещаться. Что происходит? Меню из однострочного становистя двустрочным. (Или даже трёх- и четырёхстрочным, если сделать окно браузера совсем узким.)

    Если вы не хотите, чтобы меню становилось многострочным, вам придётся ограничить минимальную ширину страницы, подобрав подходящее значение min-width для тега body.

    Давайте добавим немного анимации. Самый простой вариант — подчёркивание пунктов меню при наведении мыши. Но так как простое подчёркивание — это совсем скучно, давайте сделаем, чтобы оно появлялось и исчезало плавно.

    Добавим к стилям следующее:

    Результат:

    Другой вариант анимации:

    Посмотрим еще несколько вариантов, как можно оформить меню. Всё ограничивается лишь вашей фантазией.

    Меню с плоскими кнопками

    Вариант меню с плоскими кнопками и появлением окантовки при наведении:

    Меню с рельефными разделителями

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

    Анимированное меню с подписями

    Красивое меню с подписями, которые появляются при наведении мыши:

    Источник: http://www.helpful-stuff.ru/2014/08/css-horizontal-menu.html

    10 Уроков по созданию отличных меню навигации для ваших сайтов

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

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

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

    ✓  Нажав на заголовок, вы попадете непосредственно на страницу с детальным описанием всего процесса, а жмякнув по картинке, перейдете на страницу с примером работы выбранного вами меню 

    1. Чистый стиль меню с помощью CSS3

    При создании этого замечательного меню использовались чистые стили и функции CSS3, без каких либо дополнительных файлов изображений и javascript.

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

    Применяя на практике данную технику создания меню, можно добиться потрясающих результатов.

    2. Меню «Аккордеон» без javascript и изображений

    Из этого урока, вы узнаете, как с помощью стилей и новых свойств CSS3, не используя javascript и изображения, можно заделать отличное, функциональное и быстро работающее меню в стиле «аккордеон».

    3. Меню «аккордеон» на основе jQuery и CSS

    Подробный мануал по созданию красивого меню в стиле «аккордеон» с помощью CSS и библиотеки jQuery. Меню тестировалось и замечательно работает во всех современных браузерах. Использование функции линейного градиента css3 в оформлении, делает это меню более выразительным и динамичным.

    4. Вертикальное меню для сайта на основе CSS

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

    5. Вертикальное меню навигации CSS с подменю

    В продолжение предыдущего урока, добавлено подробное описание варианта создания вертикального меню с вложенными подпунктами

    6. Блок навигации в стиле «Аккордеон»

    Небольшой, но в тоже время подробнейший урок, по созданию качественного, с небольшим количеством HTML, CSS и JavaScript кода, с красивым интерфейсом, блока навигации в стиле «Аккордеон».

    7. Многоуровневое меню с помощью jQuery

    Еще одно интересное решение в плане создания многоуровневого меню навигации с использованием jQuery. Кросс-браузерность конечного продукта, JQuery анимация и градиент CSS3 делает навигационный блок еще более привлекательным.

    8. Красивое меню с выпадающими подпунктами

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

    9. Отличное горизонтальное меню с CSS и jQuery

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

    10. Меню навигации в стиле Lava-Lamp

    Перевод и адаптированная версия урока по созданию красивого, горизонтального меню в стиле «Lava-Lamp. В интернете представлено много версий меню выполненных в этом стиле, опираясь на полученные знания из урока, вы свободно сможете создать что нибудь свое индивидуальное.

    ♥ ♥ ♥ ♥ ♥

    Источник: http://dbmast.ru/10-urokov-po-sozdaniyu-otlichnyh-menyu-navigacii-dlya-vashih-sajtov

    html список горизонтальный или горизонтальное меню с помощью CSS

    Приветствую Вас, уважаемые читатели блога webcodius! Обязательным элементом практически любого сайта является меню. Поэтому если Ваш сайт имеет больше одной страницы, то без навигационного меню скорей всего не обойтись. Ведь без меню пользователю будет трудно найти нужные ему странички.

    Так как любое меню представляет из себя список ссылок, которые ведут на внутренние страницы сайта. Для создания меню обычно используют маркированные списки, которые создаются с помощью html тегов

      и

    • . Но как известно элементы списка по умолчанию выстраиваются вертикально друг под другом, а что если необходимо сделать горизонтальное меню? С использованием CSS это не является большой проблемой.Для начала создадим обычный маркированный список, содержащий пункты нашего меню:
           

      • Главная
      •    

      • Новости
      •    

      • Контакты
      •    

      • О сайте

      Для того чтобы идентифицировать список и задать для него нужные css стили, я добавил к нему атрибут id с идентификатором «menu».

      По умолчанию без каких-либо правил CSS он будет выглядеть следующим образом:

      • Главная
      • Новости
      • Контакты
      • О сайте

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

      Если же требуется получить горизонтальное меню, то просто необходимо расположить элементы списка по горизонтали. Для этого к селектору LI следует добавить стилевое свойство display со значением inline или inline-block. Я буду использовать правило display:inline-block. Итак, для того, чтобы элементы списка выстроились по горизонтали просто добавляем код CSS:

      Теперь элементы списка будут расположены по горизонтали:

      Как видим пункты меню выстроились в один горизонтальный ряд. Но пока на меню похоже не очень. Теперь, чтобы получить полноценную навигационную панель, оформим меню с помощью css стилей. Для начала добавим фон для панели, растянем ссылки на весь пункт li, уберем подчеркивание ссылок, настроим отступы и др.:

      В итоге получится такое привлекательное меню:

      Вообще внешний вид меню далее зависит только от вашей фантазии и знания свойств css. Далее для примера приведу несколько вариантов оформления меню.

      Горизонтальное меню по центру

      Бесплатный видеоурок Создание Интернет-магазина на OpenCart

      Выравнять меню по центру можно так:

      Результат:

      Либо так:

      Результат:

      Горизонтальное меню с пунктами одинаковой ширины

      Бесплатный видеоурок Создание Интернет-магазина на OpenCart

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

      Результат:

      Или так:

      Результат:

      Если добавить немного трансформации:

      то получим меню со скошенными углами:

      Источник: http://webcodius.ru/recepty-dlya-sajta/kak-razmestit-elementy-spiska-gorizontalno-ili-gorizontalnoe-menyu-s-pomoshhyu-css.html

      Рисуем кнопки меню сайта в PhotoShop

      Урок о том, как нарисовать в Photoshop красивые кнопки меню для Вашего сайта, используя простые инструменты.

      Во-первых, создайте новый документ размером 500х300 пикс. и залейте его с помощью инструмента ‘Градиент’ цветами #000000 и #1b2c3e:

      Теперь выберите инструмент ‘Закругленный Прямоугольник’ (Rounded Rectangle Tool) (Радиус: 10 пикс.) с любым цветом (это не тот цвет, который Вы будете использовать на самой кнопке):

      Растеризуйте слой (Layer > Rasterize > Shape) и примените следующие стили слоя:

      Должно получиться следующее:

      Далее необходимо сделать выделение кнопки (Select > Load Selection) и сузить выделенную область на один пикс. (Select > Modify > Contract). Создайте новый слой и залейте цветом #1b1b1d:

      Время добавить сияние кнопке. Создайте еще один новый слой и используйте инструмент Эллиптического Выделения (Elliptical Marquee Tool). Выделенную область залейте цветом #479ea5:

      Используйте фильтр ‘Размытие по Гауссу’ (Filter> Blur > Gaussian Blur):

      Получится это:

      Далее примените ‘Размытие в Движении’ (Filter > Blur > Motion Blur) с такими параметрами:

      Теперь должно получиться так:

      Теперь используйте Многоугольное Лассо (Polygonal Lasso Tool), чтобы выделить область, подобную этой и заполните белым цветом:

      Опять используйте фильтр ‘Размытие по Гауссу’ (Filter> Blur > Gaussian Blur)…:

      …и ‘Размытие в Движении’ (Filter > Blur > Motion Blur) с такими параметрами:

      Теперь сделайте выделение с помощью инструмента ‘Прямоугольное Выделение’ (Rectangular Marquee Tool):

      Инвертируйте выделение (Ctrl+Shift+I) и нажмите Delete чтобы очистить выделенную область:

      Теперь добавим текстуры. Создайте новый документ с прозрачным слоем 3х3 пикс. с прозрачным слоем и закрасьте 3 клетки карандашом по диагонали:

      Теперь сохраните его как образец (Edit > Define Pattern). Вернитесь к исходному документу. Выделите верхнюю часть кнопки с помощью инструмента ‘Прямоугольное Выделение’ (Rectangular Marquee Tool) и залейте белым цветом:

      Используйте следующие параметры наложения (blending options):

      Установите непрозрачность 7% по и Вы увидите результат:

      Но это еще не все. Создайте новый слой. Используйте Многоугольное Лассо (Polygonal Lasso Tool), а выделенную область залейте белым:

      Примените ‘Размытие в Движении’ (Filter > Blur > Motion Blur):

      Результат:

      Теперь создайте новый слой и используйте карандаш, чтобы нарисовать элементы дизаина кнопки:

      Создайте дубликат слоя (Ctrl+J) и примените ‘Размытие в Движении’ (Filter > Blur > Motion Blur):

      Нарисуем горизонтальные линии. Создайте новый слой и нарисуйте линии цветом #479ea5:

      Выделите нарисованные линии с помощью инструмента ‘Прямоугольное Выделение’ (Rectangular Marquee Tool) и залейте тем же цветом, что и линии:

      Установите непрозрачность слоя 30% и объедините с предыдущим (с линиями). Затем примените ‘Размытие в Движении’ (Filter > Blur > Motion Blur):

      Результат:

      Выберите слой всей кнопки. Продублируйте её и залейте черным цветом:

      Добавьте шума (Filter > Noise > Add Noise):

      И установите непрозрачность слоя 60%. Результат:

      Теперь добавим названия к кнопкам. Выберите инструмент ‘Текст’ (Horizontal Type Tool) и напишите свой текст цветом #70ffff:

      Шрифт Electrofied (14 pt, Crisp), но Вы можете использовать другие цвета и шрифты. Все зависит от Вашей фантазии!

      Конечный результат:

      Источник: http://Makoveckij.ru/create_menu_button/

      Урок фотошоп — Как сделать шапку для сайта или блога

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

      (нажмите на картику для просмотра оригинала)

      У меня стоит Photoshop CS4 (английская версия). Будем считать что к нам поступил заказ на изготовление шапки для сайта или блога. Заказчик прислал образец будущей шапки и пояснил:

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

      (нажмите на картику для просмотра оригинала)

      И так, садитесь по удобнее, я начинаю свой рассказ

      Источник: http://blogohelp.ru/urok-fotoshop-kak-sdelat-shapku-dlja-sajta-ili-bloga

Ссылка на основную публикацию