Красивые меню: меню » Скрипты для сайтов

Содержание

меню » Скрипты для сайтов

4 408 Codepen

Боковое выезжающее меню

При клике на иконку стрелки выезжает боковая панель с навигацией. Анимация сделана с помощью GSAP.

7 168 Скрипты / Menu & Nav

Эффект зачеркивания при наведении в меню

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

15 767 Скрипты / Menu & Nav

Slinky — адаптивное многоуровневое меню

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

4 998 Скрипты / Menu & Nav

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

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

Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню — «три точки». Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.

8 451 Скрипты / Menu & Nav

Slide out sidebar меню

  Плавно выдвигающееся меню боковой панели. Реализации данного меню уже несколько лет, однако мы решили вспомнить о нём и прикрутить иконки font-awesome, шрифт roboto и обновить modernizr.

6 458 Скрипты / Menu & Nav

Mega dropdown меню

Mega dropdown меню — jQuery плагин для реализации большого выпадающего меню с множеством подкатегорий для сайтов с большим количеством контента.

12 212 Скрипты / Accordion

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

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

4 418 Скрипты / Accordion

Flat accordion menu — вертикальный аккордеон

Вертикальное раскрывающееся меню типа аккордеон в стиле flat design. Простое в понимании и стилизации.

5 347 Скрипты / Menu & Nav

Диагональное меню на CSS

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

3 614 Скрипты / Menu & Nav

Lavalamp меню на CSS3

Скользящий эффект для меню при наведении, который более известен, как lavalamp эффект. Эффект реализован только на CSS с помощью transitions и селектора ~.

4 147 Скрипты / Menu & Nav

Анимированный border с меню

Создание off-canvas (вне основной страницы) навигации с анимированным border эффектом.

13 907 Скрипты / Menu & Nav

Адаптивное много-уровневое меню

Сегодня сделаем адаптивное много-уровневое меню. Для мобильной версии добавим несколько строчек jаvascript кода. Для лучшего восприятия пунктов навигации, добавим для каждого иконки, воспользовавшись уже знакомым нам по предыдущим урокам — font-awesome.css

Меню и навигация » Страница 4

1 380 Скрипты / Menu & Nav

jSlickmenu — плагин CSS3 меню

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

4 519 Скрипты / Menu & Nav

Меню аккордеон на CSS3

Меню в стиле аккордеона сделанное на CSS3 с использованием изображений к пунктам навигации.

1 742 Скрипты / Menu & Nav

Зафиксированная навигация

Зафиксированная на странице навигация с выезжающими пунктами меню при наведении на jquery. Элементы полупрозрачные.

3 501 Скрипты / Menu & Nav

Breadcrumbs на CSS

Хлебные крошки сделанные с помощью CSS3 — breadcrumbs. Иерархическая структура навигации позволяющая пользователю определить, как глубоко он находится в структуре сайта.

1 743 Скрипты / Menu & Nav

CSS3 меню

Аккуратненькое и стильное меню на css3. Впрочем его элементы можно использовать и как кнопки для сайта.

1 523 Скрипты / Menu & Nav

Летающее за курсором меню

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

1 186 Скрипты / Menu & Nav

Навигация со слайд эффектом

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

3 228 Скрипты / Menu & Nav

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

Меню с использованием затемнения FADE на jQuery или же просто на CSS — выбор за вами. Подойдет для сайтов с темными дизайнами.

1 994 Скрипты / Menu & Nav

Размытое меню с переходами на CSS3

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

1 244 Скрипты / Menu & Nav

Меню — «сюрприз»

Меню под названием «сюрприз» с эффектами easing . Простенько исимпатично. Реализовано на jQuery и CSS3.  

1 530 Скрипты / Menu & Nav

Летающий навигационный тулбар

Фиксированный тулбар на странице с анимированным появлением описания навигационных кнопок. Реализовано на CSS3 свойствах. 

2 600 Скрипты / Menu & Nav

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

Простое, красочное и элегантное вертикальное меню анимированное с помощью CSS3.

Обзор 30 лучших бесплатных jQuery меню навигации

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

С помощью возможностей JQuery мы можем превратить меню навигации в динамическое меню. Хотя сейчас для создания динамической навигации можно использовать только CSS3, JQuery делает меню еще более функциональным.

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

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

Сегодня я представляю вам 30 отличных примеров JQuery меню навигации.


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

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


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

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


Это простое адаптивное всплывающее меню с очень интересными функциями. При нажатии на иконку меню, всплывает окно меню с иконками элементов. Посмотрите демо.

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


Slidebars — JQuery фреймворк для быстрой и простой реализации стилей приложения без привязки к холсту. Slidebars также обрабатывает изменения ориентации и изменение размеров.

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


JQuery меню, которое выводит квадратное анимированное меню сайта с помощью JQuery и CSS3. Убедитесь в этом, посмотрев демо.

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


Это jQuery меню навигации превращает страницу в 3D меню. Идея заключается в том, чтобы создать дизайн мобильного приложения, в котором при клике по иконке меню, содержимое страницы сдвигается в сторону, а меню выводится на передний план.

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


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

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


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

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


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

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


slimMenu — это небольшой jQuery плагин, который поможет вам в разработке адаптивных, многоуровневых меню навигации. Что самое классное в нем, так это то, что вы можете иметь несколько разных меню, и все они будут абсолютно адаптивны.

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


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

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


Это mobile-first пример использования медиа запросов и JavaScript для создания отличного многоуровневого меню с поддержкой сенсорных экранов, эффектов наведения и навигации с помощью клавиатуры.

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


jQuery меню, которое запускает события при наведении курсора мыши на выпадающий элемент меню. Идеально подходит для создания адаптивных выпадающих меню, как на Amazon.

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


Плагин jQuery меню, который предлагает простой и интуитивный способ вывода меню. Создает адаптивные списки меню. Работает на всех устройствах!

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


Shifter — простой в использовании mobile-first jQuery плагин для создания слайд-меню, выезжающих с правой стороны при нажатии на кнопку переключения. Для настройки существует только одна опция maxWidth. Она позволяет настроить разрешение/ориентацию для мобильных устройств.

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


Hamburger — это jQuery плагин для создания слайд-меню в стиле Android App, в котором по правому краю экрана размещается всплывающее меню. При раскрытии меню в полном размере, оно перекрывает область контента, но не панель действий.

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


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

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


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

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


Datmenu — премиум jQuery адаптивное меню с различными функциями CSS3 анимации. Что самое замечательное в этом плагине, так это возможность полной настройки с помощью js-опций.

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


jPanelMenu — красивое и современное jQuery меню, позволяющее создавать панельное меню навигации с функциями переходов CSS3 анимации. Стиль jPanelMenu напоминает мобильные версии Facebook и Google. Плагин может использоваться для разнообразных мобильных приложений.

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


Fly Side Menu — крутой плагин меню навигации, который использует CSS3 для создания бокового меню с 3D преобразованиями и переходами.

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


PageScroll — настраиваемое мобильное jQuery-меню, рекомендованное для использования на любых веб-сайтах, а также целевых страницах.

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


DD Icon Menu — это jQuery плагин, который позволяет создавать вертикальное меню иконок, расположенное на краю экрана с разворачивающимися при наведении подпунктами меню.

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


jQuery меню, позволяющее осуществлять навигацию по датам в выбранном диапазоне (неделя, месяц или год). Идеально для запросов информации с помощью вызовов AJAX.

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


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

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

26. Multi-Level Push Menu


Multi-Level Push Menu — это Javascript библиотека, созданная MARY LOU из Codrops. Она создает многоуровневые меню, выезжающие с левой стороны экрана и сдвигающие контент вправо.

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


Box Lid — простой jQuery плагин. позволяющий создавать боковое меню навигации с 3D-эффектами ‘Box Lid’, использующими переходы и преобразования CSS3.

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


jQuery слайд-меню, внешне похожее на мобильные меню Facebook и Path.

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


scrollNav — это jQuery плагин, который выводит существующий контент веб-страницы, разбивая его на логические разделы и создавая настраиваемый слайд сайдбар навигации.

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


DoubleTapToGo — это jQuery плагин, который помогает создать удобное многоуровневое адаптивное выпадающее меню.

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

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

Данная публикация представляет собой перевод статьи «The Listed Voyage: 30 Free jQuery Navigation Menus» , подготовленной дружной командой проекта Интернет-технологии.ру

Дизайн меню. 8 советов идеального шрифта — Дизайн на vc.ru

{«id»:64689,»url»:»https:\/\/vc.ru\/design\/64689-dizayn-menyu-8-sovetov-idealnogo-shrifta»,»title»:»\u0414\u0438\u0437\u0430\u0439\u043d \u043c\u0435\u043d\u044e. 8 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430″,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/64689-dizayn-menyu-8-sovetov-idealnogo-shrifta»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/64689-dizayn-menyu-8-sovetov-idealnogo-shrifta&title=\u0414\u0438\u0437\u0430\u0439\u043d \u043c\u0435\u043d\u044e. 8 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/design\/64689-dizayn-menyu-8-sovetov-idealnogo-shrifta&text=\u0414\u0438\u0437\u0430\u0439\u043d \u043c\u0435\u043d\u044e.

8 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430″,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/design\/64689-dizayn-menyu-8-sovetov-idealnogo-shrifta&text=\u0414\u0438\u0437\u0430\u0439\u043d \u043c\u0435\u043d\u044e. 8 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430″,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/64689-dizayn-menyu-8-sovetov-idealnogo-shrifta»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u0414\u0438\u0437\u0430\u0439\u043d \u043c\u0435\u043d\u044e.
8 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430&body=https:\/\/vc.ru\/design\/64689-dizayn-menyu-8-sovetov-idealnogo-shrifta»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

7551 просмотров

Красивые многоуровневые меню с codepen — IT портал


На Сodepen появляется много хороших решений от разных специалистов, и студия по созданию сайтов «Движок» решила их опубликовать в нашем любимом it портале. В этом обзоре мы рассмотрим многоуровневые меню. Надеемся они будут Вам полезны.
С начала опишем как использовать сервис Сodepen — все интуитивно понятно, но все же.
При переходе по любой ссылке из меню — открывается 3 окна + демо меню:

— Суть в том, что Вы видите отдельно html код, css стили и js скрипты вашего меню. И если скопируете и перенесете это все к себе в сайт у вас появится меню как в демо — показанное на той же странице. Очень удобный сервис всем рекомендуем.

Сборник многоуровневых меню

Pure Css3 Menu


Оригинальное меню. С простым и чистым кодом без js. Применяйте для «вау» эффектов.
http://codepen.io/Sonick/pen/xJagi

CSS3 Dropdown Menu


Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg

Flat Horizontal Navigation


Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
http://codepen.io/andytran/pen/kmAEy

Material Nav Header w/ Aligned Dropdowns


Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
http://codepen. io/colewaldrip/pen/KpRwgQ

Smooth Accordion Dropdown Menu


Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ

Pure CSS Dark Inline Navigation Menu


Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Pure CSS3 Mega Dropdown Menu With Animation



Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs

Simple Pure CSS Dropdown Menu


Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
http://codepen. io/Responsive/pen/raNrEW

Bootstrap 3 mega-dropdown menu


Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/

Flat Navigation


Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
http://codepen.io/andytran/pen/YPvQQN

3D nested navigation


Горизонтальное меню с очень крутой анимацией без js!
http://codepen.io/devilishalchemist/pen/wBGVor

Responsive Mega Menu — Navigation


Горизонтальное адаптивное меню. Выглядит неплохо, но мобильная версия немного «хромает». Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc

Full CSS3 Dropdown Menu


Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi

Css3 only dropdown menu


Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
http://codepen.io/riogrande/pen/ahBrb

Dropdown Menus


Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa

Pure CSS DropDown Menu


Примитивное, но эффективное решение. Только css и html.
http://codepen.io/andornagy/pen/xhiJH

Pull Menu — Menu Interaction Concept


Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
http://codepen.io/fbrz/pen/bNdMwZ

Make Simple Dropdown Menu


Чистый и простой код, без js. В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb

Pure CSS dropdown [work for mobile touch screen]


Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR

Dropdown Menu


Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
http://codepen.io/MeredithU/pen/GAinq

CSS 3 Dropdown Menu


Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR

KVdKQJ (продуманное название))))


Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ

CSS3 Menu Dropdowns


Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz

Вот эти меню работают на девайсе без мыши:

— Smooth Accordion Dropdown Menu
— Bootstrap 3 mega-dropdown menu
— Full CSS3 Dropdown Menu
— Pull Menu — Menu Interaction Concept — на планшете не работает. мобильная версия на телефоне работает

Вот и все, если Вы хотите «поблагодарить» наше IT сообщество — у вас есть такая возможность: справа есть варианты для пожертвований на развитие портала. Или поделитесь статьей в ваших соц.стеях через сервисы ниже.

Вам интересны такие подборки по разным тематикам? (кнопки, вкладки, подсказки и так далее) — ответьте в комментариях.

Похожие материалы:

Готовое меню для сайта на css и jQuery

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

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

Не пропустите

Выпадающее меню для сайта на CSS

Выпадающее меню для сайта на CSS — это выпадающее меню я когда-то успешно использовал у себя на сайте (верхнее меню), разумеется подкорректировав его под себя в стилях CSS.

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

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

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

Скачать горизонтальное выпадающее меню

Простое анимированное меню

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

Скачать простое анимированное меню

Красивое выпадающее меню на JQuery

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

Скачать красивое выпадающее меню на JQuery

Простое меню для сайта на CSS

Ещё одно простенькое меню для сайта на CSS в серых тонах с наложенным градиентом и соответственно прост в изменениях под свои нужды.

Скачать простое меню для сайта на CSS

Горизонтальное многоуровневое меню на jQuery

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

Скачать горизонтальное многоуровневое меню на jQuery

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

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

Скачать горизонтальное выпадающее меню на jQuery

Выезжающее меню на CSS

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

Скачать выезжающее меню на CSS

Готовое меню на CSS

Довольно простое и симпатичное Готовое меню на CSS. Очень простое в редактирование и в установке на свой сайт.

Скачать готовое меню на CSS

Меню на CSS 3 в одном

Меню на CSS 3 в одном — включают в себя сразу три расцветки готового меню, одно из которых более подходящее, вы можете сразу использовать на своём сайте.

Скачать меню на CSS 3 в одном

Готовое многоуровневое меню на CSS

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

Скачать готовое многоуровневое меню на CSS

Готовое анимированное меню на jQuery

Готовое анимированное меню на jQuery — данное меню работает на трёх скриптах и имеет презентабельный вид, которое будет хорошо сочетаться с вашим дизайном на сайте.

Скачать готовое анимированное меню на jQuery

Готовое меню на CSS 6 в одном

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

Скачать готовое меню на CSS 6 в одном

24 меню Bootstrap

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

  1. Меню CSS
  2. Меню jQuery
  3. Меню JavaScript
  4. Меню React JS
Автор
  • Начальный
О коде

Bootstrap Sticky Navbar

Создайте липкую верхнюю панель навигации с помощью служебных классов Bootstrap 4.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.3.1

Автор
  • Swarup Kumar Kuila
О коде

Меню с Awesome Hover

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Версия начальной загрузки: 4.1,3

Автор
  • Омкар Байлкери
О коде

Бутстрап 4 мега

Bootstrap 4 мега-панель навигации меню со значками.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.3.1

Автор
  • Начальный
О коде

Bootstrap Прозрачная панель навигации

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.3.1

Автор
  • BBBootstrap Команда
О коде

Bootstrap 4 Выпадающее меню Megamenu

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 4.3.1

Автор
  • Rajesh Kr. Das
О коде

Меню начальной загрузки

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: popper.js

Версия начальной загрузки: 4.3.1

О коде

Многоуровневое меню начальной загрузки

Многоуровневое меню Bootstrap при наведении курсора Bootstrap3.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Версия начальной загрузки: 3.4.0

Автор
  • начальный
О коде

Начальная панель навигации с логотипом

Создайте панель навигации Bootstrap 4 с изображением логотипа.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.3.1

Автор
  • Начальный
О коде

Bootstrap Вертикальная панель навигации

Создайте фиксированную боковую панель, используя вертикальную навигацию Bootstrap 4 и медиа-объекты.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.3.1

Автор
  • Тристан Коттам Меулеманс
О коде

Bootstrap Отзывчивая навигационная панель

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Версия начальной загрузки: 3.3,7

Автор
  • Триш Рекуэро
О коде

Эффект подчеркивания меню начальной загрузки

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 4.0.0

Автор
  • Харун Коджаман
О коде

Меню начальной загрузки для одной страницы

Одностраничное меню Bootstrap + jQuery с эффектом плавной прокрутки, если щелкнуть элемент меню, измените активный статус и прокрутите до раздела.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 3.3.7

Автор
  • Райан де Андрадес
О коде

Меню начальной загрузки + подменю

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 3.3.5

О коде

Перетаскиваемое меню начальной загрузки

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js, jquery-ui.js

Версия начальной загрузки: 3.3.7

О коде

Фиксированная боковая панель навигации

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: линеариконы.js, jquery.js

Версия начальной загрузки: 3.3.6

Автор
  • Скотт Маршалл
О коде

Адаптивная анимированная навигация

Полностью адаптивное анимированное меню навигации для Bootstrap буквально копирует и вставляет, и все готово.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 3.3.1

О коде

Заголовок синий

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.1.3

О коде

Эффект меню заголовка стиля

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.1.1

О коде

Аккордеанское меню

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.0.0

О коде

Адаптивная боковая панель меню навигации

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.0.0

О коде

Адаптивное боковое меню

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 4.0.0

О коде

Мега меню начальной загрузки

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 3.3.0

О коде

Мега Меню

Мега-меню скользит вниз при наведении курсора.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 3.3.0

О коде

Мега Меню

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 3.3.0

13 Боковые меню CSS

Коллекция отобранных вручную бесплатных HTML и CSS меню боковой панели примеров кода. Обновление ноябрьской коллекции 2018 г. 1 новый предмет.

  1. Меню CSS
  2. Боковые панели Bootstrap
О коде

Эффект меню

Эффекты меню обратного цвета текста.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Навигация только CSS для боковой панели

CSS только зеркало, как навигация для боковой панели.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Боковое меню CSS

Панель навигации HTML и CSS и мегаменю боковой панели .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: bootstrap.css, font-awesome.css

Автор
  • Шон Рейснер
О коде

Фиолетовое боковое меню

Это реверс-инжиниринг дизайна «Hyperspace» из HTML5 Up! https: // html5up.сеть / гиперпространство

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Стивен Леса
О коде

Чистый CSS Fly в навигации по боковой панели

Простая многоуровневая навигационная панель . Имеет чистую суб-навигацию css, которая оставляет видимыми значки родительской навигационной панели.Элементы навигации будут прокручиваться ( overflow-y ) при необходимости. Использует преобразование с и переход с.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: ionicons.css

О коде

Боковое меню Анимация навигации

Нет ничего лучше маленького модного тела.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Винс Браун
О коде

Навигация с фиксированным наведением

Фиксированная навигация по ящику боковой панели, которая расширяется при наведении курсора.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Клаудио Холанда
О коде

Полностью адаптивное меню боковой панели CSS3

Полностью адаптивное меню боковой панели без использования JavaScript и с использованием менее 200 строк функционального кода CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Скользящее меню боковой панели CSS

CSS скользящее меню боковой панели со скроллингом, JS не использовались

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: font-awesome.css

Автор
  • Арьян Джассал
О коде

3D вращающаяся боковая панель навигации

Вертикальная панель навигации , которая переключается со значка на текст с красивой анимацией.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Ризки Курниаван Ритонга
О коде

Боковое меню на чистом CSS3

Мега раскрывающееся меню на чистом CSS3 Боковое меню с анимацией ..

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: font-awesome.css

Автор
  • JFarrow
О коде

Боковое меню CSS

CSS меню боковой панели с отображением / скрытием при наведении.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: font-awesome.css

Автор
  • Джон Амбас
О коде

Боковое меню CSS

Простота использования меню боковой панели с HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: font-awesome.css

Автор
  • Теренс Девайн
О коде

Фиксированный эффект наведения при навигации

Исправляет концепцию меню боковой панели с эффектом наведения псевдоэлемента с использованием перехода CSS .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: -

40 красивых и эффективных адаптивных меню навигации

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

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

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

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

НЕОГРАНИЧЕННАЯ ЗАГРУЗКА: более 50 миллионов наборов пользовательского интерфейса и дизайнерских ресурсов



СКАЧАТЬ СЕЙЧАС

Зерно и строительный раствор

Меню навигации легко доступно, а кнопка меню навигации сделана очень привлекательной.

Ваше Величество Co

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

Andculture

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

WP Двигатель

Меню навигации содержит цвета, которые отлично контрастируют с фоном.

Закон о темпе

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

Антро

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

Фиксированное цифровое агентство

Красивое меню | Etsy

Красивое меню | Etsy

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

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

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

Подробную информацию можно найти в Политике Etsy в отношении файлов cookie и аналогичных технологий и в нашей Политике конфиденциальности.

Необходимые файлы cookie и технологии

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

Настройка сайта

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

  • запомнить ваш логин, общие и региональные настройки
  • персонализировать контент, поиск, рекомендации и предложения

Без этих технологий такие вещи, как персональные рекомендации, настройки вашей учетной записи или локализация, могут работать неправильно.Узнайте больше в нашей Политике в отношении файлов cookie и аналогичных технологий.

Персонализированная реклама

Эти технологии используются для таких вещей, как:

  • персонализированная реклама
  • , чтобы ограничить количество показов рекламы
  • , чтобы понять использование через Google Analytics
  • , чтобы понять, как вы попали на Etsy
  • , чтобы продавцы понимали свою аудиторию и могли предоставить релевантную рекламу.

Мы делаем это с партнерами по социальным сетям, маркетингу и аналитике (у которых может быть собственная собранная информация).Отказ не остановит вас от просмотра рекламы Etsy, но может сделать ее менее актуальной или более повторяющейся. Узнайте больше в нашей Политике в отношении файлов cookie и аналогичных технологий.

Воспользуйтесь всеми возможностями нашего сайта, включив JavaScript. Учить больше

Волшебные, значимые предметы вы больше нигде не найдете.

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

Модуль ужасный.меню - отличная документация по API


  • Индекс

Содержание

  • Функции
  • Переменные темы
  • Столы

Библиотеки

  • отлично
  • ужас. Клиент
  • ужасно. Завершение
  • ужасно.ewmh
  • ужасно.hotkeys_popup
  • awful.hotkeys_popup.widget
  • ужас. Ключ
  • ужасно. Макет
  • ужасно.меню
  • ужасно. Мышь
  • ужас. Перемещение
  • ужас. Подсказка
  • awful.rules
  • ужас. Экран
  • ужасный.спаун
  • ужас. Тег
  • ужасно. Использовать
  • ужасно.wibox
  • красивый
  • beautiful.gtk
  • dbus
  • шестерни. Цвет
  • gears.debug
  • шестерни. Файловая система
  • шестерни. Геометрия
  • шестерни. Мат
  • шестерен.protected_call
  • шестерни. Форма
  • передач. Отсортировать
  • шестерня. Струна
  • шестерни. Поверхность
  • шестерни. Таблица
  • шестерни. Обои
  • меню
  • menubar.menu_gen
  • menubar.utils
  • мышь
  • mousegrabber
  • непослушный
  • непослушный.dbus
  • корень
  • выбор
  • wibox.hierarchy

Файлы примеров

  • RC.lua
  • theme.lua

Классы

  • ужас. Кнопка
  • ужасно.keygrabber
  • ужасно. Всплывающее окно
  • awful.titlebar
  • awful.tooltip
  • awful.wibar
  • awful.widget.button
  • ужасно.widget.calendar_popup
  • awful.widget.clienticon
  • awful.widget.common
  • awful.widget.keyboardlayout
  • awful.widget.launcher
  • ужасно.widget.layoutbox
  • awful.widget.layoutlist
  • awful.widget.only_on_screen
  • awful.widget.prompt
  • awful.widget.taglist
  • awful.widget.tasklist
  • awful.widget.textclock
  • awful.widget.watch
  • кнопка
  • клиент
  • выдвижной
  • шестерен. Кэш
  • шестерни. Матрица
  • шестерен. Объект
  • шестерни. Таймер
  • ключ
  • меню.icon_theme
  • menubar.index_theme
  • экран
  • сигналов
  • тег
  • вибокс
  • wibox.container.arcchart
  • wibox.container.background
  • wibox.container.constraint
  • wibox.container.margin
  • wibox.container.mirror
  • wibox.container.place
  • wibox.container.radialprogressbar
  • wibox.container.rotate
  • wibox.container.scroll
  • wibox.выдвижной
  • wibox.layout.align
  • wibox.layout.fixed
  • wibox.layout.flex
  • wibox.layout.grid
  • wibox.layout.manual
  • wibox.layout.ratio
  • wibox.layout.stack
  • wibox.widget
  • wibox.widget.base
  • wibox.widget.calendar
  • wibox.widget.checkbox
  • wibox.widget.graph
  • wibox.widget.imagebox
  • wibox.widget.piechart

25 примеров интересной и красивой навигации

От нашего спонсора: Поднимите свой маркетинг с помощью Mailchimp Smarts.

Создание идеальной навигации для веб-сайта - это один из основных ключей к хорошему результату, наличие веб-сайта, привлекающего внимание пользователей и заставляющего их просматривать всю информацию (вкладка, изображение, текст и т. Д.), Которую вы есть там. Меню навигации, схемы, макеты - все имеет важный вес и требует тщательного анализа, чтобы сформировать красивый макет. Здесь вы увидите 25 примеров навигации, от горизонтальных ползунков до вертикальной прокрутки и навигации на основе меню, которые, безусловно, вдохновят вас.

полярголд

Просто наведите указатель мыши и щелкните меню, которое хотите открыть. Просто, красиво и эффективно.

Хелми Берн

Здесь вы найдете комбо-наведение + раскрывающееся меню, которое всегда интересно и всегда ведет вас туда, куда вы хотите. 😉

Напряжение

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

Батарейки не выбрасывайте

Элегантное и чистое меню.

FA Дизайн

Еще один хороший пример меню на основе типографики.

Коллекция обложек альбомов

Красивая верстка, навигация и меню.

Полиэстер Студия

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

Маки Doopsuiker

Красивое меню, приятная подача и навигация.

simpleasmilk.co.uk

Отличный макет и меню на основе типографики.Действительно красивое оформление и цветовая гамма.

IWC

Хорошая и чистая сетка навигации. Также элегантное меню.

Ручка с любовью

Хорошая и чистая вертикальная навигация. Великолепные изображения и цветовая схема!

Смещение веса

Прекрасная навигация по меню… кстати, действительно элегантное меню.

Пентаграмма

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

Кинан Уэллс

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

Prince Street Films

Красивый макет, цвета и типографика, говорят сами за себя. 😉

Комикс без уголовного

Горизонтально вертикальный, основан на типографике и приятной цветовой гамме.

Выше сгиба

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

ACC Media

Горизонтальная навигация полностью основана на изображениях.

Ткань будущего

Приятная и простая структура с навигацией на основе прокрутки и красивым меню.

Марко Ротоли

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

Makr Carry Товары

Супер чистая компоновка и навигация.

Экоформы

Красивая планировка и расцветка. Используйте слайдер изображения или меню для просмотра.

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *