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

HTML, CSS — Меню — Stack Overflow на русском

Вопрос задан 3 года назад

Изменён 3 года назад

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

Доброй день, друзья. Интересует вопрос касательно меню. Имеются 2 проблемы при его верстке:

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

2. Попытался импровизировать, но возникла следующая проблема. Бордер сверху над пунктом меню должен быть статичным при наведении на кнопочку, но проблема в том, что после того как срабатывает :hover, этот бордер толкает все меню вниз.

Буду благодарен за любые советы.

• html
• css
• вёрстка

5

Вариант при помощи border-top.

Суть в чём, изначально border-top есть, но его не видно, ибо его цвет transparent (прозрачный), при наведение он становится нужным цветом. Эффект затухания\появления.

.item {
  display: inline-block;
  padding: 7px 12px 10px; /* 7px - это верхний отступ, он как и нижний 10px - 3px бордера сверху */
  background: #e8ebf1;
  color: #000;
  border-top: 3px solid transparent;
  transition: all .3s linear;
  font-size: 140%;
}

.item:hover {
  border-top-color: #2aacc8;
  color: #2aacc8;
  background: #fff;
}

<div>Наведи на меня</div>

В принципе, можно сделать эффект «выезда», через border-top, но при анимации мы будет наблюдать дёрганье:

. item {
  display: inline-block;
  padding: 10px 12px;
  background: #e8ebf1;
  color: #000;
  border-top: 0 solid #2aacc8;
  transition: all .3s linear;
  font-size: 140%;
}

.item:hover {
  border-top-width: 3px;
  padding-top: 7px; /* те же 10px - 3px */
  color: #2aacc8;
  background: #fff;
}

<div>Наведи на меня</div>

---

По этому, считаю, что для реализации нужной вам фишки, лучше всего использовать box-shadow.
К тому же не придётся трогать padding вообще, ибо box-shadow идёт от границ элемента и по факту игнорирует отступы.

Эффект затухания\появления:

.item {
  display: inline-block;
  padding: 10px 12px;
  background: #e8ebf1;
  color: #000;
  transition: all .3s linear;
  font-size: 140%;
  box-shadow: 0 3px 0 0 transparent inset;
}

.item:hover {
  box-shadow: 0 3px 0 0 #2aacc8 inset;
  color: #2aacc8;
  background: #fff;
}

<div>Наведи на меня</div>

Эффект «выезда»:

. item {
  display: inline-block;
  padding: 10px 12px;
  background: #e8ebf1;
  color: #000;
  transition: all .3s linear;
  font-size: 140%;
  box-shadow: 0 0 0 0 #2aacc8 inset;
}

.item:hover {
  box-shadow: 0 3px 0 0 #2aacc8 inset;
  color: #2aacc8;
  background: #fff;
}

<div>Наведи на меня</div>

Получите ваше меню и распишитесь:

nav {
  background-color: #f1f1f1;
  padding: 2px 10px 0 10px;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  border-top: 1px solid transparent;
}

li:hover {
  background-color: white;
  border-top: 1px solid white;
}

a {
  display: inline-block;
  position: relative;
  padding: 10px 10px 12px 10px;
  text-decoration: none;
  text-transform: uppercase;
  color: black;
  font-weight: bold;
  padding-top: 10px;
}

a:before,
a:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  height: 4px;
  width: 0;
  background-color: skyblue;
  transition: width 0.
  4s ease-in-out;
}

a:before {
  left: 0;
}

a:after {
  right: 0;
}

li:hover a:before {
  width: 50%;
}

li:hover a:after {
  width: 50%;
}

li:hover a {
  color: skyblue;
}

<nav>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About us</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">Portfolio</a></li>
    <li><a href="">Blog</a></li>
  </ul>
</nav>

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

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

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

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

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

Почта

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

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

Почта

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

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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

В своей работе, немало времени уделял разработке различных видов меню навигации для сайтов, как с применением 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. В интернете представлено много версий меню выполненных в этом стиле, опираясь на полученные знания из урока, вы свободно сможете создать что нибудь свое индивидуальное.

♥ ♥ ♥ ♥ ♥

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

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

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

Прежде всего, давайте вставим наши ссылки. Итак, здесь, внутри нашей навигации, я вставлю «Возврат». Я хочу вставить… сколько вариантов у нас есть? У нас раз, два, три, четыре, пять, шесть. Круто, так что я хочу шесть A-меток. У этого довольно простое меню. Мы собираемся построить, наверное, четыре за весь курс. Простой текст, мы сделаем кнопки в следующем проекте, затем мы сделаем раскрывающийся список и классные меню jQuery Burger для мобильных устройств. Мы будем становиться все более и более привлекательными по мере продвижения вперед, но для начала неплохой простой.

Итак, что я хочу сделать, так это добавить свои шесть ссылок. Итак, в коде Visual Studio я хочу ввести A-тег. «Возврат», я собираюсь поставить решетку, «#». Так что никуда не уходит, а первый — Домой. Теперь мы можем сделать это шесть раз, и это совершенно нормально, вы можете скопировать и вставить это, а также изменить текст. Я позволю вам немного сократить путь. По мере продвижения я постараюсь ввести небольшие сокращения. Они просто забавны, и они хороши, и они полезны, и я использую их, так что я знаю, что они хороши.

Итак, что мы можем сделать в коде VS, мы можем сделать, скажем, мне нужен A-тег, упс, строчная буква ‘a’, но я хочу их три; тогда мы можем использовать ‘*6’. Итак, раз в этом ключ звездочки. Он внизу — часто в сочетании с цифрой 8. Так что, удерживая нажатой клавишу «Shift», выберите «8». Итак, «a * 6» означает, что я хочу их, я хочу шесть штук. Нажмите «Возврат». Посмотри на это, круто, да? Вы веб-дизайнер, и вы хардкор, и вы кодируете, я не знаю, кодируете быстро. Круто, да?

Итак, что я хочу сделать, так это добавить хеш во все это. Я полагаю, есть ли короткий путь для всего этого. Есть, это немного медленный процесс. Так что большую часть времени вы заканчиваете тем, что работаете над чем-то вроде нескольких групп, занимаетесь несколькими делами одновременно. Итак, что мы можем сделать, так это сделать еще один, еще один короткий путь. Вы можете просто напечатать их, но если вы на Mac, то он находится под этим здесь, это ярлык, который вы ищете. Итак, это в разделе «Просмотр», нет, в разделе «Выбор». Это здесь, Добавить курсор ниже.

На Mac это Option, Command, да, ‘Option Command’ и стрелка вниз. Итак, вы знаете, это курсоры, вверх-вниз, влево-вправо. На ПК это Ctrl-Alt-стрелка вниз. Итак, здесь, где я мигаю, так что убедитесь, что ваш курсор мигает там, на моем Mac я собираюсь удерживать «Command Alt—» Command Option и нажимать вниз, вниз, вниз, вниз, вниз. А затем я наберу решетку, ‘#’. Если вы на ПК, это «Ctrl-Alt», вниз, вниз, вниз, введите решетку, «#».

Я хочу избавиться от него сейчас, потому что я не хочу, чтобы Дом был во всех них. Так что я просто щелкну один раз в другом месте. Я могу щелкнуть по первому, и в вашем тексте где-то в файлах упражнений есть файл с именем Project1-txt. Я просто скопирую и вставлю все это. «Копировать», «Вставить», вы можете сделать то же самое. Если вы умеете печатать, вы можете просто напечатать все это. Вам не нужно ничего вводить. Я ускорю это. Хорошо, спасибо, редактор. Кстати, это Джейсон, я все время называю его редактором, но его зовут Джейсон, он классный. Спасибо, Джейсон.

Мы выполним «Сохранить все» и просмотрим его в браузере. Это обновление? Так оно и есть. Прохладный. Итак, у меня есть весь мой текст, он не совсем правильный, потому что, помните, это потому, что там есть тег А, и мы стилизовали тег А здесь внизу, эти ребята: «Эй, мы такие же, давайте сделать то же самое». Так что нам нужно будет сделать для этого определенный стиль, чтобы он выглядел как мой макет здесь, но мы можем это сделать. Первое, что мы сделаем, это отцентрируем его. Итак, что мы собираемся сделать, мы делали это раньше, мы хотим пройти и центрировать с помощью Text Center. Мы сделаем это с Nav, скажем, весь текст внутри меня будет Text-align:center. Точка с запятой. «Сохранить», «Сохранить все», кликните в браузере, посмотрите на нас.

Отступы, с которыми можно возиться, подчеркивания, с которыми можно возиться, но, по крайней мере, для этого видео это будет все. Мы вставили Navs, мы выучили несколько ярлыков. Хорошо, я вернулся назад, закончил видео и подумал: «О, я должен упомянуть об этом». Сейчас мы начали делать ярлыки. Я чувствовал, что пришло время начать делать некоторые базовые вещи, и если вы думаете: «Как я буду помнить эти вещи?», или, может быть, вы уже начали их записывать, я создал папку в ваших файлах упражнений. Итак, файлы упражнений, листы ярлыков, откройте это, и у нас есть. .. не обращайте внимания на это на данный момент, мы рассмотрим его позже, но эти два будут удобны.

Итак, код VS, рассмотрим сначала. Итак, есть Mac или ПК, в зависимости от того, что вы используете. Я собираюсь открыть свой Mac, и, скажем, это хорошая одна страница, вы можете распечатать ее, приклеить рядом с вашим компьютером, выделить те, которые вы считаете полезными, вы не запомните их все, но тот, который мы только что использовали, вы видите, выбор с несколькими курсорами, это тот, который я использую вставить курсор ниже. Так что вы можете просто выделить это сейчас. Распечатайте его, выделите и скажите: «Это было полезно, Дэн, я постараюсь запомнить это».

Вы могли бы прочитать, может быть, дальше в курсе, вы могли бы прочитать и сказать: «О, не знал, что это был короткий путь». Может быть очень удобно.
Вот этот, Сохранить все, тот, который вы никогда не сможете вспомнить, выделите его.
Итак, это код VS, другого там зовут Эммет. Итак, Эммет, мы на самом деле не говорили об этом, у него есть отдельное название, эти ярлыки, они называются ярлыками Эммета, но для вас это эти, когда мы говорим, что все Эмметовские — это что-то вроде: «Хорошо , A-tag, если я наберу A и нажму «Return», Эммет как бы делает это, но на самом деле не имеет значения, как это называется. Эммет так его зовут. То же самое раньше, мы сделали ‘a * 6’, помните? Это Эммет, вы можете увидеть его там, Эммет Аббревиатура. Вот, наверное, видели.

Итак, они зовут его Эммет, и я немного сократил его. Ну, я не сделал это, я собрал это для вас. Проблема с этим, это как 24 страницы. У него есть все, что вы можете сделать. Я считаю полезным распечатать только первые две страницы, потому что остальные, да, это довольно сложно. Они выделили действительно важные, те, которые вы, вероятно, будете использовать, но да, может быть, просто распечатайте первые два. Мне действительно интересно смотреть на такие структуры, которые вы можете сделать. Мы вернемся к ним позже, но, вероятно, самое время распечатать их сейчас, чтобы вы могли начать набрасывать на них свои новые приятные ярлыки.

Ладно, теперь конец видео. Увидимся в следующем.

Создание навигации по сайту | Документация пакета обновления Kentico 12

Это содержимое не может отображаться без JavaScript.
Включите JavaScript и перезагрузите страницу.

• Пакет обновлений Kentico 12 Документация
• Разработка веб-сайтов
• Загрузка и отображение данных на веб-сайтах

• Последнее обновление: Давид Бенёвски, 14 декабря 2022 г. Экспорт в PDF | Скопировать ссылку на страницу Основной МВК 5

Модель разработки: МВК Портальный двигатель

✖

Скопировать в буфер обмена

Навигация является необходимой частью каждого веб-сайта. Целью навигации является:

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

Kentico хранит страницы в дереве содержимого веб-сайта.

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

Для построения навигации сайта можно использовать следующие компоненты по умолчанию:

Веб-части навигации	Элементы управления навигацией
На страницах механизма портала создавайте навигацию с помощью следующих веб-частей: 9007 8 803 Повторитель/базовый повторитель (рекомендуется для плоской навигации) Иерархический просмотрщик (рекомендуется для иерархической навигации) Меню списка CSS (simple, but limited markup customizations) Breadcrumbs Tab menu Tree view Site map	Use controls to create navigation on ASPX page templates or внутри пользовательских компонентов: CMSBreadCrumbs CMSListMenu BasicTabControl CMSTabControl CMSTreeView CMSSiteMap CMSUniView

Все компоненты навигации содержат встроенный источник данных для загрузки страниц (за исключением веб-части Basic Repeater и элемента управления BasicTabControl ).

Вы можете выбрать, какие страницы загружать, настроив стандартные свойства фильтрации страниц, такие как Путь, Типы страниц или ГДЕ условие . Используйте свойства Выбрать только опубликованные

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

Обратите внимание на следующее поведение при работе с компонентами навигации:

• Компоненты навигации загружают и отображают данные в соответствии со свойствами навигации страниц.
• Если свойство Path пусто, компоненты навигации загружают все страницы веб-сайта (эквивалентно /%).

• Если свойство Типы страниц пусто, компоненты навигации загружают и отображают только страниц CMS.MenuItem . 9Компонент 0136 Breadcrumbs / CMSBreadcrumbs является исключением и по умолчанию отображает все типы страниц.

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

  Всегда начинайте предложения Order By со столбца NodeLevel , например: NodeLevel, NodeOrder  

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

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

Обратите внимание, что по сравнению с веб-частью меню списка CSS этот подход требует дополнительной настройки.

1. Поместите веб-часть Repeater на страницу, где должно отображаться меню.
2. Настройте свойства веб-части:

   • Конверт HTML -> Содержимое до :

   • Конверт HTML -> Содержимое после :

3. Создайте преобразование . В следующем примере преобразование Text/XML реплицирует веб-часть меню списка CSS с включенными свойствами Отображать выделенный элемент как ссылку , Отображать классы CSS , Отображать заголовок ссылки :

    
   {% HTMLEncode(DocumentName) %}
   

4. (Необязательно) Настройте дополнительные свойства.
   
5. Сохранить и закрыть .

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

Веб-часть Hierarchical Viewer использует иерархические преобразования.

Обратите внимание, что по сравнению с веб-частью меню списка CSS этот подход требует дополнительной настройки.

1. В типе страницы-контейнера создайте необходимые преобразования. В этом примере будут использоваться преобразования Header , Footer и Item преобразования типа Text/XML. Позже мы разместим код в преобразованиях.
2. Поместите веб-часть Hierarchical Viewer на страницу, на которой должно отображаться меню.
3. Настройте свойства веб-части:
   

   • В Иерархические преобразования выберите Заголовок t преобразование .

   • Создать новый Нижний колонтитул t преобразование .

4. Создать новый элемент Преобразование . В следующем примере преобразование Text/XML повторяет меню списка CSS 9.}

5. (необязательно) Настройте дополнительные свойства.
6. Сохранить и закрыть .

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

1. Откройте свой сайт в приложении Pages .
2. Создать новую страницу.
3. Откройте Свойства новой страницы -> вкладку Шаблон .
4. Выберите Нет в разделе Страница, вложенная , и нажмите Сохранить .
   
   • Отключение вложения страниц не является обязательным шагом для создания меню, но позволяет вам иметь полностью пустую страницу для целей примера.
5. Перейдите на вкладку Design .
6. Добавьте на страницу веб-часть меню списка CSS .
7. Настройте свойства веб-части:
   • Фильтр содержимого -> Максимальный уровень вложенности : 2 (гарантирует, что меню загружает и отображает только первые два уровня дерева содержимого веб-сайта)
   • Конверт HTML -> Содержимое до :
   • Конверт HTML -> Содержимое после :