Заработок в сети Интернет. Как заработать на дому в Интернете. Удаленная работа в сети.

Заработок на разработке сайтов, фриланс, своя страничка в интернете, заработать в Интернете на написании сайтов, веб мастер, вебмастер, веб программист, вебпрограммист.

Заработок в Интернет.
Удаленная работа на дому.
Все о надомной работе.

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

Добавлено автор alexxlab

Содержание

Как сделать навигационное меню — учебник CSS

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

Создание навигации

Что такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием HTML-тега списка <ul>, где в каждом пункте <li> содержится одна ссылка <a>. В HTML5 для навигации ввели отдельный тег <nav>, куда можно просто помещать теги ссылок. После создания HTML-каркаса можно переходить к его стилизации с помощью CSS, где вы можете определять, каким будет ваше меню — вертикальным, горизонтальным, выпадающим и т.

 п.

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


<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contacts</a></li>
</ul>

Изначально, без стилей наша навигация выглядит, как обычный список:


Чтобы сделать этот элемент более похожим на навигационную панель, необходимо проделать несколько обязательных шагов. Во-первых, возле пунктов меню не нужны маркеры, а во-вторых, стандартные значения margin и padding, заданные браузером для списка, могут мешать, поэтому мы обнуляем их. В итоге получается следующее:


.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

По сути, идентичные действия по отношению к спискам делает файл сброса стилей Reset.

css, поэтому, если вы используете его на вашем сайте, то код выше можно не записывать.

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

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

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

Блочные ссылки

Прежде всего нужно сделать все теги <a> блочными элементами:


.menu a { display: block; }

Существует несколько причин для этого:

  1. Вы сможете задавать отступы для ссылок.

  2. Блочный элемент занимает всю ширину контейнера, тогда как ширина строчного элемента зависит от его содержимого. Из-за этого могут появиться проблемы, если вы, например, решите установить для ссылок фоновый цвет:



    GIF

    Строчные ссылки могут быть разной длины, что негативно отразится на внешнем виде.

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

 

Ширина меню

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

. menu, например:


.menu { width: 300px; }



Вместо этого можно установить ширину для пунктов <li> либо для ссылок <a> — визуально эффект может быть одинаковый, но учтите, что в таком случае ширина элемента .menu всё равно останется 100%.
 

Разделение пунктов

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

.menu:


.menu a {
    border-top: 1px solid blue;
}
.menu {
    border-bottom: 1px solid blue;
}



Высота пунктов и вертикальное выравнивание

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


. menu a {
  height: 30px;
  line-height: 30px;
}


GIF

Как видно на анимации, свойство height влияет на высоту ссылки, а межстрочный интервал line-height изменяет уже высоту самой текстовой строки. Обязательно задавайте одинаковые значения для этих двух свойств, если хотите, чтобы текст ссылки был вертикально отцентрирован.

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

Основная задача при создании горизонтальной навигации — расположить пункты меню в один ряд. Это можно сделать несколькими способами.
 

Способ первый

Первый вариант — задать пунктам списка свойство display со значением inline либо inline-block:

 

.menu li {
  display: inline;
}



При этом теги <a> внутри <li> нельзя делать блочными, иначе пункты перестанут выстраиваться горизонтально и снова встанут в вертикальную позицию. Ссылкам можно также задать значение inline или inline-block. Выберите второе, если вы собираетесь в дальнейшем создавать отступы для ссылок.

После этого можно заняться оформлением ссылок. Например, можно сделать такой стиль:


.menu a {
  text-decoration: none;
  font-family: sans-serif;
  color: #5757a0;
  display: inline-block;
  padding: 10px 20px;
  background-color: lavender;
  border-bottom: 5px solid #5757a0;
}



Мы добавили фоновый цвет и нижнюю границу для каждой ссылки, а также увеличили ее размеры при помощи внутренних отступов padding. Заметьте, что между пунктами меню есть небольшие промежутки, хоть мы и не добавляли их через стили. Они возникают, потому что браузер так воспринимает символ возврата каретки между закрывающим и открывающим тегами <li>. Эти промежутки можно убрать, записав HTML-код списка в одной строке:


<ul>
 <li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Gallery</a></li>
 .
 
 ..
</ul>



Однако это неудобно, ведь эти изменения придется вносить в HTML вручную, да и чтение кода затрудняется. Поэтому попробовать избавиться от промежутков можно с помощью отрицательного значения margin-right:


.menu li {
  margin-right: -5px;
}

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

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

Способ второй

Возможно, вы уже догадались, что второй вариант создания горизонтального меню заключается в использовании свойства float. Для этого добавьте стиль для тегов <li>:


.menu li {
  float: left;
}



Как видим, промежутков между пунктами уже нет. Все остальные стили работают, как и прежде. Но если вы добавите после навигации другой HTML-элемент (допустим,

<h2>), то на него повлияет обтекание и он встанет в один ряд с пунктами меню. Отменить это действие можно, добавив заголовку свойство clear: left. Но при разработке сайта с большим количеством разных страниц может стать сложно следить за тем, нигде ли вы не забыли указать данное свойство. Гораздо легче отменить обтекание со стороны навигации. В этом поможет такая запись:


.menu {
  overflow: hidden;
}

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



GIF

Примечание: если вы установите фон для элемента .menu, то вы не увидите его до тех пор, пока не примените к нему overflow: hidden. Логично, ведь как можно увидеть фон элемента, чья высота равна нулю?

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

Как сделать фиксированное меню


Узнайте, как создать «фиксированное» меню с помощью CSS.

Как создать фиксированное верхнее меню

Шаг 1) добавить HTML:

Пример


  Home
  News
  Contact

<div>
  <p>Some text some text some text some text..</p>
</div>

Шаг 2) добавить CSS:

Чтобы создать фиксированное верхнее меню, используйте position:fixed и top:0. Обратите внимание, что фиксированное меню будет накладывать другое содержимое. Чтобы исправить это, добавьте margin-top (к содержимому), которое равно или больше, чем высота вашего меню.

Пример

/* The navigation bar */
.navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
}

/* Links inside the navbar */
.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change background on mouse-over */
.navbar a:hover {
    background: #ddd;
    color: black;
}

/* Main content */
.main {
    margin-top: 30px; /* Add a top margin to avoid content overlay */
}

Как создать фиксированное нижнее меню

Чтобы создать фиксированное нижнее меню, используйте position:fixed и bottom:0:

Пример

/* The navigation bar */
. navbar {
    position: fixed; /* Set the navbar to fixed position */
    bottom: 0; /* Position the navbar at the bottom of the page */
    width: 100%; /* Full width */
}

/* Main content */
.main {
    margin-bottom: 30px; /* Add a bottom margin to avoid content overlay */
}

Совет: Чтобы узнать больше о навигационных панелях, перейдите в наш Учебник CSS Navigation.


Большой обзор красивых многоуровневых меню с codepen / Блог компании mr. Gefest / Хабр

Хабр, привет!

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

Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.

В этом обзоре мы рассмотрим многоуровневые меню.

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-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs

CSS3 Dropdown Menu

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

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

Pure Css3 Menu

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

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

П.С.
Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.

Пункты меню меняют свое положение в меню html/css при расширении подменю



У меня есть простое меню, сделанное в html/css, и проблема, с которой я столкнулся, заключается в том, что если я наведу указатель мыши на пункт меню (test2), чтобы развернуть подменю, то другие пункты из раздела меню (test1) изменят свои позиции: https://jsfiddle.net/dsb87pxz/

<nav>
  <ul>
    <li>test1</li>
    <li>
      test2
      <ul>
        <li>test2.1</li>
        <li>test2.2</li>
      </ul>
    </li>
  </ul>
</nav>


nav > ul > li {
  display: inline-block;
}

nav > ul > li > ul {
    display: none;
}

nav > ul > li:hover > ul {
    display: block;
}

nav > ul > li > ul > li {
  display: block;
}

Можете ли вы предложить решение этой проблемы?

html css
Поделиться Источник wwwww     16 декабря 2017 в 14:01

4 ответа

  • Меню подменю при наведении меню

    Описание : я построил меню,которое отображает подменю, когда пользователь наводит на него курсор. (В меню используется jQuery). Кроме того, способ настройки моего меню заключается в том, что если пользователь наводит курсор на определенный div в меню, jQuery берет это имя div и добавляет…

  • Скрыть активное подменю при наведении курсора на другие пункты меню

    Я использую класс css: #navbar .current-menu-ancestor ul.sub-menu {display:inline;} чтобы сделать подменю своей страницы липким. Мне нужно скрыть его (через jQuery), если я навожу курсор на другие пункты меню верхнего уровня. пример: Верхний Пункт 1 — Меню 1А — Меню 1b Верхний Пункт 2 Верхний…


1

С vertical-align: top

nav>ul>li {
  display: inline-block;
  vertical-align: top;
}

nav>ul>li>ul {
  display: none;
}

nav>ul>li:hover>ul {
  display: block;
}

nav>ul>li>ul>li {
  display: block;
}
<nav>
  <ul>
    <li>test1</li>
    <li>
      test2
      <ul>
        <li>test2. 1</li>
        <li>test2.2</li>
      </ul>
    </li>
    <li>
      test2
      <ul>
        <li>test2.1</li>
        <li>test2.2</li>
      </ul>
    </li>
  </ul>
</nav>

При наведении указателя мыши на элемент списка на первом уровне он влияет на элемент списка справа из-за display: inline-block .

Поэтому можно использовать float: left и display: relative для <li> на первом уровне и display: absolute для <ul> внутри <li> .

Пример

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 2px 5px;
}

nav>ul>li {
  float: left;
  position: relative;
}

nav>ul>li>ul {
  position: absolute;
  left: 0;
  display: none;
}

nav>ul>li:hover>ul {
  display: block;
}
<nav>
  <ul>
    <li>test1</li>
    <li>
      test2
      <ul>
        <li>test2. 1</li>
        <li>test2.2</li>
      </ul>
    </li>
    <li>
      test2
      <ul>
        <li>test2.1</li>
        <li>test2.2</li>
      </ul>
    </li>
  </ul>
</nav>

Поделиться Sun     16 декабря 2017 в 14:20


0

Это правда, вам просто нужно добавить vertical-align как top к вашим элементам inline-block , которые здесь являются тегами li .

display:inline-block по умолчанию выравнивает их текст блока по baseline , и именно поэтому, когда пользователь hover в приведенных выше кодах выравнивает text по базовой линии, т. е. vertical-align:baseline , поэтому измените его на vertical-align:top .

nav > ul > li{
  display: inline-block;
  vertical-align:top; /*Just add this as already suggested*/
}

Поделиться frnt     16 декабря 2017 в 15:04


0

Вы можете добавить position:absolute в свой элемент наведения, например

nav > ul > li:hover > ul {
display: block;
position: absolute;
}

Поделиться vazash     16 декабря 2017 в 14:24


0

Вы можете добавить position:absolute в свой элемент наведения, например

nav > ul > li:hover > ul {
    display: block;
    position: absolute;
}

Поделиться Dmitry T     16 декабря 2017 в 14:27

Похожие вопросы:


Длинные пункты списка подменю нарушают функциональность меню CSS nav

Наверное, проще всего просто начать здесь и посмотреть на fiddles : Меню с желаемым поведением: правильный пример Меню с нарушенным поведением из-за длинного подпункта: сломанный пример I’ll explain. ..


Как скрыть главное меню при отображении подменю в css

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


HTML/javascript контекстное меню, которое загружает пункты подменю через AJAX

Кто-нибудь знает о реализации контекстного меню HTML/JavaScript/jQuery, которая поддерживает обратные вызовы, которые позволят мне Загружать элементы верхнего уровня и подменю через AJAX? Мне нужно…


Меню подменю при наведении меню

Описание : я построил меню,которое отображает подменю, когда пользователь наводит на него курсор. (В меню используется jQuery). Кроме того, способ настройки моего меню заключается в том, что если…


Скрыть активное подменю при наведении курсора на другие пункты меню

Я использую класс css: #navbar .current-menu-ancestor ul. sub-menu {display:inline;} чтобы сделать подменю своей страницы липким. Мне нужно скрыть его (через jQuery), если я навожу курсор на другие…


Подменю раздвигает родительские пункты меню при наведении курсора в Modified WordPress TwentyTwelve

Я работаю над сайтом WordPress, который использует модифицированную версию темы TwentyTweve. Моя работа состоит в том, чтобы изменить выпадающее меню навигации, чтобы оно выталкивало содержимое…


Горизонтальные меню с подменю полной ширины CSS jfiddle включены

Я хочу сделать горизонтальное выпадающее меню, очень похожее на главное меню из HowStuffWorks: http:/ / home.howstuffworks.com/community-living Обратите внимание, что подменю охватывает всю ширину…


пункты меню не работают

Я создал пункты меню и подменю своего приложения с помощью фреймворка DOJO. Я могу щелкнуть пункты меню и перейти к пунктам подменю в chrome, но в IE и firefox я не мог нажать / Выбрать пункт. ..


Выпадающее меню <ul> 100% ширина, встроенные пункты подменю

Я нашел это обсуждение SO ( выпадающее меню-сделайте ширину подменю <ul> 100%), которое невероятно близко к тому, что я ищу, но пункты подменю сложены. Я хочу, чтобы пункты подменю были…


Подменю slidesout на другие пункты меню в выпадающем меню

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

Создание выпадающего (drop-down) меню, используя только HTML и CSS, без jQuery

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

Только CSS и HTML, невероятно, но этого вполне достаточно для создания весьма неплохих менюшек.

HTML

Обычно менюшки создаются при помощи <ul>-списков. Кстати говоря, если на WordPress меню будет сгенерировано функцией wp_list_categories или функцией wp_nav_menu(), то тоже всё будет отлично работать. Главное не напутать с классами и айдишниками элементов списка. Это предельно важно.

Пока что я покажу вам только как сделать менюшку с одним уровнем вложенности, в данном случае главное — уловить саму суть.

<ul>
	<li><a href="#">WordPress</a>
		<ul>
		<li><a href="#">плагины</a></li>
		<li><a href="#">темы</a></li>
		<li><a href="#">хаки</li>
		</ul>
	</li>
	<li><a href="#">Joomla</a>
		<ul>
		<li><a href="#">компоненты</a></li>
		<li><a href="#">модули</a></li>
		</ul>
	</li>
	<li><a href="#">Drupal</a></li>
</ul>

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

CSS

Здесь тоже всё довольно просто, к тому же часть кода ниже я использовал чисто для оформления, свой цвет фона, цвет ссылок и прочее (важное отмечено /* (!) */).

#my-drop-down-menu ul, ul#my-drop-down-menu{
	list-style:none;
}
 
#my-drop-down-menu{ 
	position:relative; /* (!) */
	z-index:3;
	width:300px;
	height:20px;
	margin:0 auto;
}
 
#my-drop-down-menu li.list{
	float:left; /* (!) */
	display:block; /* (!) */
	margin:0 5px;
}
 
#my-drop-down-menu a{
	color: #61ADB0;
	text-decoration:none;
}
 
#my-drop-down-menu ul.child{ 
	background: #463935;
	padding:5px;
	position:absolute; /* (!) */
	top:29px; /* (!) */
	left:-9999px; /* (!) */
	z-index:3;
	border-top: 1px solid #3A2E2B;
	-moz-box-shadow: 0px 3px 7px #251d1b;
	-webkit-box-shadow: 0px 3px 7px #251d1b;
	box-shadow: 0px 3px 7px #251d1b;
}
 
#my-drop-down-menu li:hover ul.child{
	left:auto; /* (!) */
}
 
#my-drop-down-menu li a.link{
	display:block;
	padding:5px;
}
 
#my-drop-down-menu li:hover a.link{
	background: #463935;
}

Аналогично можно добавлять ещё больше уровней вложенности, вставляя <ul> в <li>

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

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!

Nadin Web Design CSS Drop Menu

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Demo Menu — PSDGraphics.com</title>

<link href=»css/dropdown-menu.css» media=»screen» rel=»stylesheet» type=»text/css» />

</head>

<body>

<br />
<br />

<ul>
<li><a href=»index. html»>Главная</a></li>
<li><a href=»#»>Продукты</a>
<ul>
<li><a href=»#»>Security Software</a></li>
<li><a href=»#»>Браузеры</a></li>
<li><a href=»#»>Software для бизнеса</a></li>
<li><a href=»#»>Коммуникации</a></li>
<li><a href=»#»>Инструменты развития</a></li>
<li><a href=»#»>Цифровое фото</a></li>
<li><a href=»#»>Mac Software</a></li>
</ul>
</li>
<li><a href=»#»>Обзоры</a>
<ul>
<li><a href=»#»>3.1</a></li>
<li><a href=»#»>3.2</a></li>
<li><a href=»#»>3. 3</a>
<ul>
<li><a href=»#»>3.3.1</a></li>
<li><a href=»#»>3.3.2</a></li>
<li><a href=»#»>3.3.3</a></li>
<li><a href=»#»>3.3.4</a></li>
</ul>
</li>
<li><a href=»#»>3.4</a></li>
<li><a href=»#»>3.5</a></li>
<li><a href=»#»>3.6</a></li>
<li><a href=»#»>3.7</a></li>
</ul>
</li>
<li><a href=»#»>Загрузки</a></li>
<li><a href=»#»>Новости</a></li>
<li><a href=»#»>Контакты</a></li>
</ul>
</body>
</html>

#navigation {
margin:0;
padding: 0;
clear:both;
width:950px;
height:51px;
background: #d6eaf8 url(. ./images/dropdown-bg.gif) repeat-x left top;
}
ul.nav-main,
ul.nav-main li {
list-style: none;
margin: 0;
padding: 0;
}
ul.nav-main {
position: relative;
z-index: 597;
}
ul.nav-main li:hover > ul {
visibility: visible;
}
ul.nav-main li.hover,
ul.nav-main li:hover {
position: relative;
z-index: 599;
cursor: pointer;
background: url(../images/dropdown-bg-hover.gif) repeat-x left top;
}
ul.nav-main li {
float:left;
display:block;
height: 51px;
color: #999;
font: 14px Arial, Helvetica, sans-serif;
background: url(../images/separator.gif) no-repeat right center;
}
ul. nav-main li a {
display:block;
padding: 16px 16px 0 16px;
height: 35px;
color: #999;
font: 14px Arial, Helvetica, sans-serif;
text-decoration:none;
}
ul.nav-main li a:hover {
color:#D6D6D6;
}
ul.nav-main *.list {

padding-right: 22px;
background: url(../images/navigation-arrow.gif) no-repeat right top;
}
ul.nav-sub {
visibility: hidden;
position: absolute;
padding:10px;
top: 48px;
left: 0;
z-index: 598;
background: #353535 url(../images/dropdown-list-bg.gif) repeat-x left top;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
ul.nav-sub li {
list-style:none;
display:block;
padding: 0;
height: 27px;
float: none;
width:145px;
border-bottom: 1px solid #5a5a5a;
background: none;
}
ul. nav-sub li a {
list-style:none;
display:block;
padding: 6px 5px 6px 5px;
height: 15px;
float: none;
width:145px;
background: none;
font: 12px Arial, Helvetica, sans-serif;
}
/* nav2-sub */
ul.nav2-sub {
visibility: hidden;
position: absolute;
padding:10px;
top: 29px;
left: 20;
z-index: 598;
background: #353535 url(../images/dropdown-list-bg.gif) repeat-x left top;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
ul.nav2-sub li {
list-style:none;
display:block;
padding: 0;
height: 27px;
float: none;
width:145px;
border-bottom: 1px solid #5a5a5a;
background: none;
}
ul. nav2-sub li a {
list-style:none;
display:block;
padding: 6px 5px 6px 5px;
height: 15px;
float: none;
width:145px;
background: none;
font: 12px Arial, Helvetica, sans-serif;
}

CSS меню. Простое меню для сайта. Горизонтальное CSS меню.

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

Как и в прошлой публикации, меню сайта будет создано при помощи маркированного HTML списка (при помощи тегов <li> и <ul>). Оформлять горизонтальное меню для сайта мы будем при помощи таблицы стилей (CSS), мы не будем использовать JavaScript для создания горизонтального CSS меню. Как и в прошлый раз, мы не будем использовать изображений для создания горизонтального CSS меню.

Создание меню для сайта. Горизонтальное CSS меню. Шаг 1 -создание HTML макета меню.

Содержание статьи:

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

</p> <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Создание CSS меню</title> <link rel=»stylesheet» href=»style.css» type=»text/css» > </head> <body> <div> <ul> <li><a href=»#»>Home</a></li> <li><a href=»#»>Ссылка1</a></li> <li><a href=»#»>Ссылка2</a></li> <li><a href=»#»>Ссылка3</a></li> <li><a href=»#»>Ссылка4</a></li> </ul> <span><span><br></span></span> </div> </body> </html> <p>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

</p>

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>Создание CSS меню</title>

<link rel=»stylesheet» href=»style.css» type=»text/css» >

</head>

<body>

<div>

<ul>

<li><a href=»#»>Home</a></li>

<li><a href=»#»>Ссылка1</a></li>

<li><a href=»#»>Ссылка2</a></li>

<li><a href=»#»>Ссылка3</a></li>

<li><a href=»#»>Ссылка4</a></li>

</ul>

<span><span><br></span></span>

</div>

</body>

</html>

<p>

Сразу подключаем файл таблиц стилей, который называется style.css. При помощи тегов <ul> и <li> создаем HTML макет меню для сайта. Поскольку, пункты нашего горизонтального CSS меню должны куда-нибудь вести, делаем их ссылками при помощи тега <a>, в качестве значения атрибута href устанавливаем #(хэш), ссылки с таким атрибутом никуда не ведут. HTML список меню помещаем в контейнер <div> с идентификатором hmenu, поскольку внутри элемента <body> могут находиться только блочные HTML элементы и элементы <ins> и <del>. После созданного списка стоит тег <br> — перевод строки, он нужен для того, чтобы растянуть меню сайта по горизонтали на всю ширину окна браузера.

Создание меню для сайта. Горизонтальное CSS меню. Шаг 2 — Задаем стили для меню сайта.

Первое, что нужно сделать — это задать цвет фона и ширину контейнера <div> в CSS, хотя вы знаете, что блочные HTML элементы занимают всю доступную ширину, в отличие от строчных HTML элементов:

#menu{ width: 100%; background-color: #333; }

#menu{

width: 100%;

background-color: #333;

}

Затем нам нужно задать общий стиль для горизонтального CSS меню:

#menu ul{ margin: 0; padding: 0; float: left;}

#menu ul{

 

margin: 0;

 

padding: 0;

 

float: left;}

Здесь мы убираем внутренние и внешние отступы, а также «прижимаем» меню сайта к левой границе окна браузера.

Теперь можно задать стиль отображения для всех пунктов меню сайта:

#menu ul li{ display: inline;}

#menu ul li{

display: inline;}

Мы знаем, что элемент <li> относится к блочным, то есть занимает всю область, в которой он стоит, из-за этого наше меню было вертикальным, добавив CSS свойство display: inline, мы сделали элементы <li> строчными, а наше меню стало горизонтальным.

Теперь мы можем задать CSS стили для содержимого контейнеров <li>, то есть стили для навигации горизонтального меню(для тега <a>):

#menu ul li a{ float: left; text-decoration: none; color: white; padding: 10.5px 11px; background-color: #333; }

#menu ul li a{

float: left;

text-decoration: none;

color: white;

padding: 10.5px 11px;

background-color: #333; }

CSS свойство float:left выравнивает горизонтальное меню и контейнер <div> по верхней границе. Все ссылки по умолчанию подчеркиваются браузером, чтобы избавиться от этого недоразумения мы используем свойство text-decoration:none. Далее мы задаем цвет ссылок, то есть цвет текста меню сайта. Внутренними отступами мы расширяем наше горизонтальное меню.

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

</p> #menu ul li a:visited{ color: white;} #menu ul li a:hover{ color: #fff; background-color:#0b75b2;} <p>

</p>

#menu ul li a:visited{

color: white;}

 

#menu ul li a:hover{

color: #fff;

background-color:#0b75b2;}

<p>

Ну тут все понятно: мы задаем цвет текста и цвет фона для горизонтального CSS меню.

Осталось задать стиль для тега <br>, чтобы выровнять по высоте горизонтальное меню и элемент <div>:

</p> <p>br{clear:left;}</p> <p>

</p>

<p>br{clear:left;}</p>

<p>

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

Исходные коды примеров вы можете скачать на публичных страницах вконтакте: раз и два.

На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru. Не забываем комментировать и делиться с друзьями;)

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

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

Чтобы создать вертикальную панель навигации, вы можете стилизовать элементы внутри списка, помимо кода с предыдущей страницы:

Объяснение примера:

Вы также можете установить ширину

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

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