Горизонтальное меню css html: Горизонтальное меню на CSS

Разное 

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

Главная » HTML-CSS-JQUERY

HTML-CSS-JQUERY

На чтение 5 мин Просмотров 2.7к. Опубликовано Обновлено

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

HTML код горизонтального меню

Общепринятым считается создание меню с помощью стандартного списка с помощью тега <ul> обрамленного тегом <nav>. И так, создадим файл index. html и запишем в него следующий код:

 
<nav>
    <ul>
      <li><a href="">Страница-1</a></li>
      <li><a href="">Страница-2</a></li>
      <li><a href="">Страница-3</a></li>
      <li><a href="">Страница-4</a></li>
      <li><a href="">Страница-5</a></li>
      <li><a href="">Страница-6</a></li>
      <li><a href="">Страница-7</a></li>
    </ul>
 </nav>

Тег <nav> (от англ. Navigation перевод: Навигация), который обрамляет наш список и в HTML верстке и указывает на блок с навигационным меню сайта.

Сохранив и открыв файл index.html в браузере мы увидим следующую картину:

Элементы меню стандартно расположились вертикально и у каждого элемента <li> появилась точка слева (так называемая маркером). Давайте оформим меню согласно нашим условиям.

Стилизация menu с помощью CSS

Для того чтобы начать оформлять наше меню создадим файл style.css, куда мы будем вписывать код CSS. А в index.html пропишем путь до созданного файла style.css. Полный код HTML будет выглядеть следующим образом:


<!DOCTYPE html>
<html lang="ru">
<head>
  <title>Sample</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css"> <!-- Путь до нашего файла style.css -->
</head>
<body>
  <nav>
    <ul>
      <li><a href="">Страница-1</a></li>
      <li><a href="">Страница-2</a></li>
      <li><a href="">Страница-3</a></li>
      <li><a href="">Страница-4</a></li>
      <li><a href="">Страница-5</a></li>
      <li><a href="">Страница-6</a></li>
      <li><a href="">Страница-7</a></li>
    </ul>
  </nav>
</body>
</html>

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

 
nav {
  padding: 16px 0;
  background-color: #199BCA;
}

В результате фон нашего меню стал голубым и появились внутренние отступы сверху, слева, справа и снизу.


Далее убираем маркеры в виде точек у тега <ul>, а также сбрасываем на ноль значения padding и margin, чтобы убрать лишние отступы у меню. И центрируем наш список по центру горизонтали.



nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

Ну и наконец выравниваем список меню по горизонтали с помощью display: inline-block. Делаем отступы слева для каждого элемента <li> с помощью margin-left: 10px. Для первого элемента <li> используем псевдокласс :first-child со значением margin-left 0px. Для более четкого восприятия ссылок сделаем все буквы и цифры строчными с помощью text-transform со значением uppercase.



nav ul li {
display: inline-block;
  margin-left: 10px;
  text-transform: uppercase;
}
nav ul li:first-child {
  margin-left: 0px;
}

А теперь немого приведем в порядок визуальное оформление горизонтального меню убрав нижнее подчеркивание и окрасим текст в белый цвет. Для этого тегу <a> применим следующие CSS свойства:



a {
  color: #fff;
  text-decoration: none;
}

В результате получим окончательный пример меню:

Итог: в этой статье мы рассмотрели как сделать меню горизонтально с помощью CSS.

В следующей статье мы рассмотрим как сделать мобильное меню с помощью CSS и JQUERY

Адаптивное горизонтальное меню html css + ssi | Делать сайт

Будем превращать вертикальное меню шаблона, представленного в статье «Создать сайт html css + динамические страницы ssi. Этап #3», в адаптивное горизонтальное меню на большом экране, которое автоматически становится вертикальным на малом мобильном. Соответственно исходный трехколоночный шаблон мы преобразуем в двухколоночный.

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

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

Общие принципы

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

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

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


Детали процесса

Рассмотрим все вышеперечисленные действия более подробно. Будут редактироваться коды в файлах general-includes/header.shtml и general-styles/style.css, а файл general-styles/left.shtml будет удален. Для этого потребуется доступ к коду, как это представлено в «Создать сайт html css + динамические страницы ssi. Этап #3».

header.shtml

Весь код из left.shtml переносится в header.shtml и помещается после блока <header> … </header> (после стр. 12), при этом из перенесенного кода удаляются все теги <p> и </p>, но их содержимое сохраняется, как это представлено ниже:


<link rel=»icon» type=»image/png» href=»/favicon.png»> <link rel=»stylesheet» type=»text/css» href=»/general-styles/style.css» media=»screen»> </head> <body> <!—noindex—> <header> <!—#if expr=»$DOCUMENT_URI=/^\/index. \/map\//» —> <a href=»/map/index.html»> Карта сайта </a> <!—#else —> <a href=»/map/index.html»> Карта сайта </a> <!—#endif —> </nav>

Больше файл left.shtml нам не понадобится, его можно удалить.


style.css

1) Наряду с упрощением верстки инициируется или отменяется внешняя рамка. Если первое обязательно, то второе по желанию. Можно оставить, удалить или закомментировать стр. 6, это дело вкуса, я предпочитаю сайт в рамке. А вот стр. 13 и 14 удаляются.

2) Вносим небольшие коррективы в настройку «шапки» — заменяем блок /* Общие правила оформления «шапки» */ на следующий:


/* Общие правила оформления «шапки» */ header { color: #fff; background: #993333; padding: 20px 0 10px 0; border-bottom: solid 1px #cccccc; text-align: center; }

3) Обновление правил навигации. Заменяем строки, находящийся между /* !!! ОФОРМЛЕНИЕ БЛОКА НАВИГАЦИИ !!! */ и /* !!! ОФОРМЛЕНИЕ ЦЕНТРАЛЬНОЙ КОЛОНКИ !!! */ на следующие:


/* !!! ОФОРМЛЕНИЕ БЛОКА НАВИГАЦИИ !!! */ nav { padding: 5px 0 5px 0; background: #993333; text-align: center; border-bottom: solid 5px #cc6666; } /* Оформление ссылок навигации */ nav a, nav span { background-color: #993333; padding: 2px 2px 2px 20px; } /* Оформление ссылок навигации при взаимодействии с «мышкой» */ nav a { color: #cccccc; text-decoration: none; } nav a:link, nav a:visited { background: #993333; border: solid 2px #993333; } nav a:hover, nav a:active, nav a. current:link, nav a.current:visited, nav span { border-style: solid dotted; border-width: 2px; border-color: #993333; color: #f5f5f5; /* цвет кнопок 1-го и 2-го уроаня при наведении */ text-decoration: none; } nav a.current:link, nav a.current:visited, nav span { background: #993333; color: #999999; /* опредлеяет цвет 3-го уровеня */ } nav a.current:hover, nav a.current:active { background: #993333; color: #f5f5f5; /* меняет цвет при наведении на 3-й уровень*/ } nav span { color: #f5f5f5; /* определяет цвет кнопок 1-го и 2-го уроаня после нажатия */ text-decoration: none; }

Необходимо обратить внимание, что в этом коде отсутствует строка — display: block; . Наличие этого свойства позволяет делать элементы меню блочными (вертикальными), а ее отсутствие строковыми (горизонтальными).

4) Делаем область предназначенную для размещения основного контента максимально широкой. Необходимо найти в блоке /* !!! ОФОРМЛЕНИЕ ЦЕНТРАЛЬНОЙ КОЛОНКИ !!! */ строку — width: 63%; и заменить 63% на 81%.

5) В случае использования мобильных устройств горизонтальное меню должно превратиться в вертикальное, поскольку элементы меню в этом случае будут блочными. Для этого в блок /* Правила, определяющие версию смартфонов */ перед последней закрывающей фигурной скобкой вставляется:


nav a, nav span { display: block; }

А возможно скачать готовый результат

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

Заключение

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

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

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

Горизонтальная панель меню в HTML

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

Синтаксис:

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

  • и
      является синтаксисом для приведенных ниже основ.

       <стиль>
ул {
}
li имя_переменной: hover {
}

<тело>
<ул>

    • 

      •

    Приведенный выше код представляет собой основной синтаксис горизонтальной строки меню.

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

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

    Пример #1

    Код: 

     
<голова>
<стиль>
ул {
поле: 5;
набивка: 5;
цвет фона: зеленый;
}
ли {
плыть налево;
}
ли v {
белый цвет;
выравнивание текста: по центру;
набивка: 5;
}
жить v:наведите {
цвет фона: #111;
}
.актив {
цвет фона: зеленый;
}


<тело>
<ул>

  • Главная
    • 

  • О нас
    • 

  • Контакт
    •

    Пример вывода:

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

    Пример #2

    Код: 

     
<тело>

    
Главная
О нас
Контакт

    Пример вывода:

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

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

    Пример #3

    Код: 

     
<голова>
<стиль>
ул {
поле: 5;
набивка: 5;
цвет фона: #333;
}
ли {
плыть налево;
}
ли v {
белый цвет;
выравнивание текста: по центру;
набивка: 5;
}
li v:hover:not(.active) {
цвет фона: #111;
}
. актив {
цвет фона: #4CAF50;
}


<тело>
<ул>

  • Главная
    • 

  • О нас
    • 

  • Контакт
    •

    Пример вывода:

    Некоторые типы бесплатных горизонтальных меню:

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

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

    Отзывчивое горизонтальное меню навигации в оранжевом цвете:

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

    Пример: 

     
<голова>
  <скрипт src="script.js">

<тело>
<дел>
<ул>

  • Главная
    • 

  • О нас
    • 

  • Контакт
    •

    • Вывод:

    Типы горизонтального меню с зелеными вкладками:

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

    Пример: 

     
<голова>
  <скрипт src="script.js">

<тело>
<дел>
<ул>

  • Главная
    • 

  • О нас
    • 

  • Контакт
    •

    Вывод:

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

    Bubble Wrap в Horizontal Bar:

    В этой строке меню, как и в предыдущих типах, мы будем полностью использовать стили CSS в HTML. Кроме того, мы добавим свойство border-radius, которое должно быть включено, тогда оно будет выглядеть как пузырьковые типы. Мы увидим тот же пример с разными стилями CSS и вывод, показанный как приведенный ниже код с результатами.

    Пример: 

     
<голова>
  <скрипт src="script.js">

<тело>
<дел>
<ул>

  • Главная
    • 

  • О нас
    • 

  • Контакт
    •

    Выходные данные:

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

    Заключение

    Наконец, мы завершили сессию, как мы обсуждали в предыдущих темах, у каждой концепции HTML есть дополнительные функции, которые будут зависеть от версии. А также проблема совместимости браузера при переходе из одной версии в другую. В приведенной выше горизонтальной строке меню есть не только вышеупомянутые концепции, но и дополнительные концепции, а также такое же горизонтальное меню с текстурированными вкладками, и мы также использовали плагины jquery для дополнительных привлекательных для пользователя функций, если нам это нужно. Если мы не будем использовать браузер Chrome в выводе веб-страницы, мы можем добавить вкладки и дополнительно синий тип экрана в стилях CSS. По сравнению с HTML у нас есть некоторые дополнительные функции в плагинах jquery.

    Рекомендуемые статьи

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

    1. Тег объекта HTML
    2. Тег href в HTML
    3. Кнопка сброса HTML
    4. Аудиотег HTML

    Как создать горизонтальную панель навигации в HTML и CSS?

    < html >

         < head >

             < title >

                 Horizontal Navigation Bar

    заголовок >

           < стиль >

             * {

    /* Здесь я сделал поля и отступы  0 */

       margin: ;

       

         заполнение: 0;

    }

       

    . navbar {

         display: flex;

       

    /* Это используется для прилипания панели навигации, чтобы

         панель навигации остается в верхней части, даже если мы прокручиваем */

         положение: липкое;

         align-items: center;

         justify-content: center;

         верх: 0px;

       

    /*задает отображение курсора мыши

         при наведении курсора на элемент */

         курсор: указатель;

    }

       

    . nav-list {

         ширина;

         дисплей: гибкий;

    }

       

    .nav-list li {

     ; -list 9015

         отступы: 26 пикселей 30 пикселей;

    }

       

    .nav-list li a {

         9015 текст;

         цвет: белый;

    }

       

    . nav-list li a:hover {

         цвет: ;

    }

       

    .rightNav {

         ширина: 50%;

         text-align: right;

    }

       

    #search {

         ; padding: 5;

         размер шрифта: 17 пикселей;

         граница: 2 пикселя сплошного серого цвета;

         радиус границы: 9 пикселей;

    }

    .

    No related posts.

    Автор записи

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

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