Горизонтальное выпадающее меню для сайта скрипт

На это у меня все, до новых встреч!!! Ваш e-mail не будет опубликован. Пожалуйста, введите ответ цифрами: Главная Карта блога Контакты Об авторе Услуги. Горизонтальное выпадающее меню на чистом css! Создаем html файл и подключаем css стили! В итоге вы должны получить: Структура горизонтального выпадающего меню. Пока что в браузере это выглядит таким образом. Если мы посмотрим в браузере на наш список то увидим следующее: Все стало еще хуже сплошной список, где сходу не скажешь есть ли здесь вложенность или нет, ну если мы на время за комментируем reset то увидим картину получше: Пишем стили для выпадающего меню.

Весь итоговый код стилей будет выглядеть так, сравните его со своим ничего ли вы не забыли: Добавить комментарий Отменить ответ Ваш e-mail не будет опубликован. Главная Об авторе Карта блога Контакты Услуги.

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

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

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

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

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

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

Понятное дело, что что-то здесь не то, наше горизонтальное выпадающее меню работает мягко говоря неправильно. Что же мы еще не учли? Знаю, звучит запутано, но это очень важно понять. Соответственно для нашего выпадающего списка нам нужно задать свойство position: Не забываем так же для всех наших пунктов верхнего уровня прописать свойство position: Наше меню практически готово, нам остается всего лишь добавить изменения цвета фона ссылки при наведении на неё курсора, делаем:.

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

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

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

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

Как обычно идем по шагам: Убираем маркеры в списка. Выравниваем пункты списка по левому краю. В итоге получаем следующую картину: Для того чтобы наш выпадающий список располагался по вертикали нам нужно, в первую очередь, для элементов li отменить обтекание и задать для всего списка фиксированную ширину: Вот что мы получим при наведении на элемент списка: Позиционируем выпадающий список относительно своего родителя.

Сегодня же речь пойдет именно о выпадающем меню. Кстати, если вы совсем новичок и не знаете как создается обычная html страница, рекомендую прочитать статью на моем блоге где все подробно описано. Так как мой файл стилей находится в той же папке что и index.

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

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