Меню для сайта css: Меню для сайта html и css горизонтальное — 11 вариантов меню

09.07.2023 alexxlab

Содержание

Почему в HTML\CSS меню в шапке сдвигается, когда я применяю выравнивание по горизонтали к записям внутри этого меню?

Задать вопрос

Вопрос задан 2 года 5 месяцев назад

Изменён 2 года 5 месяцев назад

Просмотрен 91 раз

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

.container .head .logo {
  position: relative;
  height: 120px;
  width: 120px;
  float: left;
  display: inline-block;
}
.container .head .menu {
  position: relative;
  height: 120px;
  width: 60%;
  background: grey;
  display: inline-block;
  padding-left: 10px;
  margin-left: 10%;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Страница 2</title>
  <link rel="stylesheet" type="text/css" href="page3.  css">
  <link rel="shortcut icon" type="image/png" href="favicon.png" />
</head>
<body>
  <div>
    <div>
      <div>
        <img src="logo.png">
      </div>
      <div>
        <h4>Проекты</h4>
        <h4>Слайды</h4>
        <h4>Контакты</h4>
      </div>
    </div>
  </div>
</body>
</html>

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

.container .head .logo {
    position: relative;
    /* float: left; */
    height: 120px;
    width: 120px;
    display: inline-block;
}
.container .head .menu {
    position: relative;
    height: 120px;
    width: 60%;
    background: grey;
    display: inline-block;
    padding-left: 10px;
    margin-left: 10%;
}
.container .head .menu h4 {
    display: inline;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Страница 2</title>
        <link rel="stylesheet" type="text/css" href="page3. css">
        <link rel="shortcut icon" type="image/png" href="favicon.png"/>
    </head>
    <body>
        <div>
            <div>
                <div>
                    <img src="logo.png">
                </div>
                <div>
                    <h4>Проекты</h4>
                    <h4>Слайды</h4>
                    <h4>Контакты</h4>
                </div>
            </div>
        </div>
    </body>
</html>

Что это такое? Как решить данную проблему? Буду благодарен за любые конструктивные подсказки.

html
css
выравнивание
inline-block

.container {
      display: flex;
      max-width: 100%;
    }
    .container .logo {
        height: 120px;
        width: 120px;
        border: 1px solid red;
        margin-right: 100px;
    }
    .container .logo img {
        max-width: 100%;
    }
    .container .  menu {
        background: grey;
        padding: 10px;
        display: flex;
    }
    .container .menu h4 {
      margin: 0;
    }
    .container .menu h4:not(:last-child) {
      padding-right: 20px;
    }
<div>
  <div>
    <img src="logo.png">
  </div>
  <div>
    <h4>Проекты</h4>
    <h4>Слайды</h4>
    <h4>Контакты</h4>
  </div>
</div>

Если раскомментировать строку в этом коде, то всё заработает как надо)

.container .head .logo {
    position: relative;
    /* float: left; */
    height: 120px;
    width: 120px;
    display: inline-block;
}

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Пример простого меню из картинок с CSS анимацией

Продолжая изучать свойства анимации CSS3, решил применить полученные знания на практике — сделать какое-нибудь простенькое
анимированное меню. В итоге получилось довольно симпатичное и очень простое меню с использованием иконок. Смысл его в том, что при наведении курсора картинка и тест плавно увеличиваются, как бы приближаясь к посетителю, анимация выполнена с помощью CSS3.
Сразу смотрим:
DEMO
Для реализации данного меню у себя на сайте или в блоге не нужно ничего дополнительно подключать, достаточно лишь добавить не большой HTML и короткий CSS коды. В Blogger-блоге можно использовать для этих целей стандартный гаджет HTML/JavaScript.
Итак, по кодам. HTML для меню выглядит так:

<div>
<div>
<a href=»#»><img src=»

…/image/home.png«>Главная</a>
<a href=»#»><img src=». ../image/news.png«>Новости</a>
<a href=»#»><img src=»…/image/photo.png«>Фотографии</a>
<a href=»#»><img src=»…/image/music.png«>Музыка</a>
<a href=»#»><img src=»…/image/docs.png«>Документы</a>
<a href=»#»><img src=»…/image/fav.png«>Избранное</a>
</div>
</div>

И стили CSS:

.macmenu {
height: 128px; /*высота общего блока*/
}
.button {
margin: 0 auto; /*выравнивание блока по центру*/
width: 720px; /*ширина всего блока с меню*/
}
.button a img,
.button a {
display: block;
float: left;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
height: 70px;
width: 70px;
}
.button a {
margin: 5px 15px;
text-align: center;
color: #fff;
font: normal normal 10px Verdana;
text-decoration: none;
word-wrap: normal; /*запрещает автоматически разрывать слова на перенос*/

}
.

macmenu a:hover img {
margin-left: -30%; /*смещает картинку левее, выравнивая ее по центру*/
height: 128px;
width: 128px;
}
.button a:hover {
font: normal bold 14px Verdana;
}

Если меню нужно расположить вертикально, то CSS будет таким:

.macmenu {
height: 720px; /*высота всего блока*/
}
.button {
text-align: center;
margin: 0 10px; /*внешние отступы*/
}
.button a img,
.button a {
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;

transition: all 0.5s ease;
height: 70px;
width: 70px;
}
.button a {
margin: 15px 5px;
text-align: center;
color: #000;
font: normal normal 10px Verdana;
text-decoration: none;
word-wrap: normal;
}
.macmenu a:hover img {
margin-left: -30%;
height: 128px;
width: 128px;
}
.button a:hover {
font: normal bold 14px Verdana;
height: 128px; /*высота ссылки при наведении курсора*/
}

Вот и все, размещаем и радуемся.

Благодарю за внимание.

Учебное пособие по CSS: Создание меню навигации | Учебники по веб-разработке #23

Введение в HTML, CSS, JavaScript и как работают веб-сайты? | Учебники по веб-разработке #1

Учебник по HTML: установка VS Code и Live Server | Учебники по веб-разработке #2

Учебник по HTML: базовая структура веб-сайта | Учебники по веб-разработке #3

Учебник по HTML: заголовок, сценарий, ссылка и метатеги | Учебники по веб-разработке #4

Учебник по HTML: заголовки и абзацы | Учебники по веб-разработке #5

Учебник по HTML: теги Img и Anchor | Учебники по веб-разработке #6

Учебник по HTML: списки и таблицы | Учебники по веб-разработке #7

Учебник по HTML: формы и теги ввода | Учебники по веб-разработке #8

Учебник по HTML: встроенные и блочные элементы | Учебники по веб-разработке #9

Учебник по HTML: Идентификаторы и классы в HTML | Учебники по веб-разработке #10

Учебник по HTML: Объекты HTML | Учебники по веб-разработке #11

Учебник по HTML: семантические теги в HTML| Учебники по веб-разработке #12

Учебник по CSS: Введение в CSS | Учебники по веб-разработке #13

Учебник по CSS: Встроенный, внутренний и внешний CSS | Учебники по веб-разработке #14

Учебник по CSS: Селекторы в CSS | Учебные пособия по веб-разработке #15

Учебное пособие по CSS: Использование инструментов разработчика Chrome | Учебные пособия по веб-разработке #16

Учебное пособие по CSS: Шрифты в CSS | Учебники по веб-разработке #17

Учебник по CSS: Цвета в CSS | Учебники по веб-разработке #18

Учебник по CSS: границы и фон | Учебники по веб-разработке #19

Учебное пособие по CSS: блочная модель CSS, поля и отступы | Учебные пособия по веб-разработке #20

Учебное пособие по CSS: Float & Clear объяснил | Учебники по веб-разработке #21

Учебник по CSS: Стилизация ссылок и кнопок | Учебники по веб-разработке #22

Учебник по CSS: Создание меню навигации | Учебные пособия по веб-разработке #23

Учебное пособие по CSS: Свойство отображения CSS | Учебники по веб-разработке #24

Учебник по CSS: абсолютное, относительное, фиксированное и липкое положение в CSS | Учебники по веб-разработке #25

Проект 1: Создание веб-сайта тренажерного зала с использованием HTML5 и CSS3 | Учебники по веб-разработке #26

Учебник по CSS: Объяснение видимости и z-index | Учебные пособия по веб-разработке #27

Учебное пособие по CSS Flexbox на хинди | Учебники по веб-разработке #28

Учебник по CSS: единицы em, rem, vh и vw + Объяснение адаптивного дизайна | Учебные пособия по веб-разработке #29

Учебное пособие по CSS: объяснение медиа-запросов | Учебные пособия по веб-разработке #30

Учебное пособие по CSS: Дополнительные сведения о селекторах CSS | Учебники по веб-разработке #31

Учебное пособие по CSS: псевдоселекторы атрибутов и n-го потомка | Учебники по веб-разработке #32

Учебник по CSS: до и после псевдоселекторов | Учебные пособия по веб-разработке #33

Учебное пособие по CSS: тень блока и тень текста | Учебники по веб-разработке #34

Учебник по CSS: переменные и пользовательские свойства | Учебники по веб-разработке #35

Учебник по CSS: Создание анимации и ключевых кадров | Учебные пособия по веб-разработке #36

Учебное пособие по CSS: Создание переходов в CSS | Учебники по веб-разработке #37

Учебное пособие по CSS: преобразование свойства в CSS | Учебные пособия по веб-разработке #38

Создание проекта полностью адаптивного веб-сайта с использованием HTML и CSS на хинди | Учебники по веб-разработке #39

CSS Grid: введение и создание базовой сетки | Учебники по веб-разработке #40

CSS Grid: создание строк и пробелов в сетке | Учебники по веб-разработке #41

CSS Grid: объединение нескольких строк и столбцов в сетке | Учебники по веб-разработке #42

CSS Grid: Autofit & MinMax | Учебники по веб-разработке #43

CSS Grid: создание макетов с использованием области шаблонов сетки | Учебники по веб-разработке #44

Использование медиа-запросов с CSS Grid | Учебники по веб-разработке #45

Введение в JavaScript для внешнего и внутреннего интерфейса | Учебники по веб-разработке #46

Написание JavaScript в браузере и консоль разработчика | Учебники по веб-разработке #47

Переменные, типы данных и операторы в JavaScript | Учебники по веб-разработке #48

Строки в JavaScript | Учебники по веб-разработке #49

Строковые функции в JavaScript | Учебники по веб-разработке #50

Область действия, условия «если-иначе» и регистр переключения в JavaScript | Учебники по веб-разработке #51

Массивы и объекты в JavaScript | Учебники по веб-разработке #52

Функции в JavaScript | Учебные пособия по веб-разработке #53

Учебное пособие по JavaScript: Взаимодействие — Оповещение, Подсказка, Подтверждение | Учебные пособия по веб-разработке #54

Учебное пособие по JavaScript: циклы for, while, forEach, Do While | Учебники по веб-разработке #55

Учебник по JavaScript: Навигация по DOM | Учебники по веб-разработке #56

Учебник по JavaScript: события и прослушивание событий | Учебники по веб-разработке #57

Учебник по JavaScript: setInterval и setTimeOut | Учебники по веб-разработке #58

Учебник по JavaScript: дата и время в JavaScript | Учебники по веб-разработке #59

Учебник по JavaScript: стрелочные функции в JavaScript | Учебники по веб-разработке #60

Учебник по JavaScript: математический объект в JavaScript | Учебники по веб-разработке #61

Учебник по JavaScript: работа с JSON в JavaScript | Учебные пособия по веб-разработке #62

Учебное пособие по серверной части: Введение и установка Node. Js | Учебные пособия по веб-разработке #63

Учебное пособие по серверной части: модули Node.Js с примерами | Учебные пособия по веб-разработке #64

Учебное пособие по серверной части: блокировка и неблокирующее выполнение | Учебные пособия по веб-разработке #65

Учебное пособие по серверной части: блокировка и неблокирующее выполнение | Учебные пособия по веб-разработке #66

Учебное пособие по серверной части: создание пользовательской серверной части с использованием NodeJs | Учебники по веб-разработке #67

Backend Tutorial: Создание пользовательских модулей в узле с помощью NodeJs | Учебные пособия по веб-разработке #68

Учебное пособие по серверной части: npm: Учебное пособие по диспетчеру пакетов Node | Учебные пособия по веб-разработке #69

Учебное пособие по серверной части: установка Express и Postman | Учебные пособия по веб-разработке #70

Учебное пособие по серверной части: написание нашего первого экспресс-приложения | Учебные пособия по веб-разработке #71

Учебное пособие по серверной части: статические файлы и установка механизма шаблонов Pug | Учебники по веб-разработке #72

Backend Tutorial: Использование необработанного HTML в шаблонизаторе Pug | Учебные пособия по веб-разработке #73

Учебное пособие по серверной части: Завершение серверной части NodeJs нашего веб-сайта Gym | Учебные пособия по веб-разработке #74

Учебное пособие по серверной части: танцевальный веб-сайт с использованием Pure Pug + NodeJs | Учебные пособия по веб-разработке #75

Учебное пособие по серверной части: разработка карт с использованием Pure Pug + NodeJs | Учебные пособия по веб-разработке #76

Учебное пособие по серверной части: веб-сайт Continuing Dance с использованием Pug + NodeJs | Учебники по веб-разработке #77

Backend Tutorial: Добавление спонсорского раздела с помощью Pug + NodeJs | Учебные пособия по веб-разработке #78

Учебное пособие по серверной части: добавление контактной формы с помощью Pug + NodeJs | Учебные пособия по веб-разработке #79

Учебное пособие по MongoDb: Введение в MongoDb + установка | Учебные пособия по веб-разработке #80

Учебное пособие по MongoDb. Вставка данных в базу данных Mongo | Учебные пособия по веб-разработке #81

Учебное пособие по MongoDb. Поиск/запрос данных из базы данных Mongo | Учебники по веб-разработке #82

Учебное пособие по MongoDb. Удаление данных из базы данных Mongo | Учебные пособия по веб-разработке #83

Учебное пособие по MongoDb. Обновление данных из базы данных Mongo | Учебники по веб-разработке #84

MongoDb Tutorial: MongoDb Compass и установка Mongoose | Руководства по веб-разработке #85

MongoDb Tutorial: Использование Mongoose в NodeJs | Учебники по веб-разработке #86

Отображение случаев заражения коронавирусом на карте мира — интерактивная информационная панель с использованием JavaScript и MapBox

Backend Tutorial: Сохранение данных в базе данных с помощью Pug + NodeJs | Учебные пособия по веб-разработке #88

Учебное пособие по хостингу: Где разместить свой веб-сайт? | Учебные пособия по веб-разработке #89

Учебное пособие по хостингу: создание нашего первого VPS | Учебные пособия по веб-разработке #90

Учебное пособие по хостингу: установка Putty + основные команды Linux | Учебные пособия по веб-разработке #91

Учебное пособие по хостингу: Установка веб-сервера Apache2 на VPS | Учебные пособия по веб-разработке #92

Учебное пособие по хостингу: информационный веб-сайт CoronaVirus с хостингом | Учебники по веб-разработке #93

Учебное пособие по хостингу: использование Filezilla и WinSCP для загрузки файлов | Учебные пособия по веб-разработке #94

Учебное пособие по хостингу: привязка домена к серверу веб-хостинга | Учебные пособия по веб-разработке #95

Учебное пособие по хостингу: Размещение нескольких веб-сайтов на одном сервере хостинга | Учебные пособия по веб-разработке#96

Учебное пособие по хостингу: развертывание приложений NodeJs в рабочей среде на Linux VPS | Учебники по веб-разработке#97

Установка MongoDb и размещение нашего танцевального веб-сайта на Ubuntu VPS | Учебники по веб-разработке #98

Получите бесплатный SSL-сертификат https для вашего домена на Ubuntu VPS | Учебники по веб-разработке #99

Учебник по Git: Как загрузить свои проекты на Git и GitHub | Учебники по веб-разработке #100

Прозрачная форма входа с использованием HTML и CSS | Учебники по веб-разработке #101

Я создал приложение для чата в реальном времени с использованием NodeJs и SocketIO

Создание адаптивного веб-сайта с использованием HTML, CSS и JavaScript на хинди

Аналоговые часы с использованием чистого HTML, CSS и JavaScript

Анимация движущегося автомобиля Lamborghini с использованием чистого HTML, CSS и JavaScript

Я создал экшн-игру на чистом HTML, CSS и JavaScript Шаблон CheatSheet с использованием HTML, CSS и JavaScript

Программирование игры в змейку на JavaScript

Я создал Windows 11 с использованием HTML, CSS и JavaScript

Создание адаптивных панелей навигации для настольных и мобильных веб-сайтов

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

Адаптивный дизайн

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

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

Скелет панели навигации

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

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

Помните HTML-теги неупорядоченного списка

? Мы будем использовать его в качестве скелета.
```
 <ул>
Главная
Товары
Компания
Контакт
```

Самое приятное в этом то, что вам нужно будет только обновить CSS, чтобы изменения появились в вашем меню – никаких дополнительных настроек в теле HTML не требуется!

Форматирование списка ссылок

Так как же превратить простой маркированный список ссылок во что-то подобное?

Во-первых, используя CSS (который мы введем между тегами