Горизонтальное меню на css3 и html5: Горизонтальное меню на CSS

Ссылки: Исходный код / ​​демонстрация

Созданы: 9000 октября 2013

Сделано с: HTML, SCSS

Теги: Horizontal, Men чистый css

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

Красивое горизонтальное меню, разработанное Майком на чистом CSS.

Автор: Alireza (Meness)

Ссылки: Исходный код / ​​демонстрация

Созданы по адресу: 8 октября 2013 г.

Сделано с: HAML, меньше

CSS Pre-Processor: Меньше

Препроцессор JS: Нет

Препроцессор HTML: Haml

Теги: горизонтальное, меню, плоское, pure-css, font-awesome

19. #1226 — Горизонтальное меню со слайдом вниз при наведении

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

Автор: Littlesnippets.net (littlesnippets)

Ссылки: Исходный код / ​​демонстрация

Созданы: 25 ноября 2015 г.

Сделано с: HTML, CSS

Теги: MENU 9000, CSS

.0007

20. Простая отзывчивая горизонтальная навигация

Создано для http://css-snippets.com/simple-horizontal-navigation/ Изучение двух разных методов горизонтальной навигации на больших экранах. Фрагмент отзывчивый. Это вертикальное меню на небольших экранах и горизонтальное меню на больших экранах.

Автор: Лиза Каталано (lisa_c)

Ссылки: Исходный код / ​​демо

Сделано с: HTML, CSS

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

Автор: ILIC DARUS Метки: horizontal, menu, flat, pure-css

22. #1189 — Горизонтальные пункты меню

Горизонтальные пункты меню угловая анимация при наведении

Автор: LittleSnippets.net (littlesnippets)0007

Ссылки: Исходный код / ​​демонстрация

Создано: 6 ноября 2015 г.

Сделано с: HTML, CSS

Теги: Horizontal, Menu, Navigation, CSS3

23. #1175 #1175 # — Скользящая граница меню при наведении курсора

Горизонтальные элементы меню скользят по границе при наведении курсора

Автор: LittleSnippets. net (littlesnippets)

Ссылки: Исходный код / ​​Демо

Дата создания: 2 ноября 2015 г.

Сделано с помощью: HTML, CSS

Теги: меню, рамка

24. #1217 — Горизонтальное меню

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

Автор: LittleSnippets.net (littlesnippets)

Ссылки: Исходный код / ​​Демо

Дата создания: 23 ноября 2015 г.

Сделано с помощью 60 HTML, HTML0007

Теги: меню

Создание горизонтальной строки меню с помощью HTML и CSS

Для любого веб-разработчика почти обязательно знать, как создать горизонтальную или вертикальную строку меню с помощью HTML и CSS. Строка меню помогает классифицировать содержимое и повышает удобочитаемость веб-сайта. В этой статье мы шаг за шагом обсудим, как создать горизонтальную строку меню с помощью HTML/CSS, а в следующей статье — как создать вертикальную строку меню с помощью HTML/CSS. Это самый простой способ создать выпадающее меню css, но он лучше всего подходит для начинающих веб-разработчиков. Чтобы сделать панель меню более интерактивной, вы можете использовать JQuery, HTML 5 и CSS3.

Чтобы написать скрипт, вы можете использовать любой редактор html css, но не забудьте сохранить файл с расширением .HTML. Здесь я использовал Notepad++ для написания скрипта.

Шаг 1:  Откройте любой HTML-редактор и напишите HTML-скрипт в порядке ul-li без какого-либо CSS-скрипта и сохраните файл с расширением .html.

   

Link1

   

Link2
         

           
• Link2.1

           
• Link2.2

           
• Link2.3

        

   

   

Link3
         

         
• Link3. 1

         
• Link3.2

         

   
   

Link4

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

• Ссылка1
• Ссылка2
  • Ссылка 2.1
  • Ссылка2.2
  • Ссылка2.3
• Ссылка3
  • Ссылка 3.1
  • Ссылка3.2
• Ссылка4

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

Для простоты мы добавили внутренний CSS. Чтобы добавить внутренний css, создайте тег «Style» в разделе HEAD HTML и напишите скрипт css внутри блока

После добавления CSS:

Шаг 3: Теперь добавьте изогнутый угол, чтобы придать ему красивый вид. Для этого используйте команду css border-radius . установите его на 50px.

    #menu{
    ширина: 100%;
    поле: 0;
    padding: 10px 0 0 0;
    стиль списка: нет;
    фон: #111;
    радиус границы: 50 пикселей;
}

После добавления CSS: 

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

Шаг 4:  Теперь придайте красивый плавающий вид, где все элементы «li» будут в одной строке, а все элементы «ul» будут ниже этой линии.
    #menu li{
    float: left;
    padding: 0 0 10px 0;
    положение: относительное; }

После добавления CSS:         

Шаг 5: Задайте свойства для тега «A» (наведение), такие как цвет, оформление текста, шрифт
    #menu a{

    float: left;
    высота: 25 пикселей;
    padding: 0 25 пикселей;
    цвет: #CC6600;

    шрифт: жирный 12px/25px Arial, Helvetica;
    text-decoration: нет;
    text-shadow: 0 1px 0 #000; }

Шаг 6:  Добавьте еще одно свойство, чтобы изменить цвет, когда вы удерживаете мышь на этих ссылках
    #menu li:hover > a{
    color: #CC3333; }

Шаг 7: Теперь добавьте два блока css для элементов ul. Первый блок скрывает все элементы «ul», а также устанавливает свойства отображения, такие как цвет, отступы, положение. Второй блок — отображение всех элементов «ul», когда мы наводим курсор на элементы «li».
   #menu ul{
    стиль списка: нет;
    поле: 0;
    заполнение: 0;
    отображение: нет;
    позиция: абсолютная;
    верх: 35 пикселей;
    слева: 0;
    фон: #222; }
   #menu li:hover > ul{
    display: block; }

Шаг 8:  Установите отступы на 0, поля 0, чтобы все элементы выглядели лучше

    #menu ul li{
    float: none;
    поле: 0;
    заполнение: 0;
    отображение: блок; }

Шаг 9: Установите свойства для всех элементов «a», которые находятся под тегом «ul»
    #menu ul a{   
    padding: 10px;
    высота: авто;
    высота строки: 1;
    отображение: блок;
    пробел: nowrap;
    с плавающей запятой: нет;
    преобразование текста: нет; }

Шаг 9: Теперь добавьте еще несколько строк для улучшения визуальных эффектов, установите правильный размер черного фона, отобразите все элементы
    #menu:after{
    visibility: hidden;
    отображение: блок;
    размер шрифта: 0;
    содержание: ” “;
    ясно: оба;
    высота: 0; }

После добавления CSS:

Вот и все.