Товаров: 0 (0р.)

Вертикальное css меню для сайта: Вертикальное меню для сайта — разметка и примеры оформления

Содержание

Самое простое вертикальное меню на CSS

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

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

Здесь проверял на работоспособность, где будет Demo страница для просмотра.

1. Синий вариант:

2. Зеленый вариант:

Приступаем к установке:

HTML

Код

<div>
<ul>
  <li><a href=»/»>Партнерские программы</a></li>
  <li><a href=»/»>Рейтинг парт. программ</a></li>
  <li><a href=»/»>Бинарные опционы</a></li>
  <li><a href=»/»>Вопросы и ответы</a></li>
  <li><a href=»/»>Полезные SEO статьи</a></li>
  <li><a href=»/»>SEO словар</a></li>
  <li><a href=»/»>HTML-уроки и советы</a>  
  </li>
</ul>
<div>


CSS

Код

#manugcon-sedenamed {
  clear:left;float:left;width:205px;margin:0 0 0px 0;padding:0;font-size:0. 9em
}

#manugcon-sedenamed ul{list-style:none;width:100%;margin:0 0 10px 0;padding:0;font-size:12px
}

#manugcon-sedenamed li{margin-bottom:4px
}

#manugcon-sedenamed li a {
  font-weight: bold;
  height: 20px;
  text-decoration: none;
  color: #215d92;
  display: block;
  padding: 5px 0 0 8px;
  background: #fdfdfd;
  border-left: 5px solid #2a77c3;
}
#manugcon-sedenamed li a:hover {
  background: #2467a9;
  color: #f9f6f6;
  border-left: 5px solid #2a69c3;
}


Материал для создания оригинального шаблона с аналогичной навигацией.

Демонстрация

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

Комментарии и отзывы (63)

Инка

Просто шикарно, спасибо! Действительно, простой способ, особенно приятно, что это легко сделать для WP

Androi

Можно использовать Ваш код впадающего горизонтального или вертикального у себя на сайте?

flickr gallery

Wow, nice tutorial, thanks google translate 😉

Ян

Полезная статья, попадает в интересные ссылки. Но можно было сделать проще: выводить список категорий с помощью функции wp_list_categories и при добавлении/удалении рубрик не придется руками править выпадающую менюшку. Наверное напишу у себя на блоге, как это сделать.

Dims

Огромное спасибо за обзор. Очень полезно.

Веретено

Я так понял, что менять название страниц в админке менять не получится? Т.е. этот вариант без динамики? Для Joomla не имеет смысла этот способ создания выпадающих менюшек использовать? А встроить этот инструмент в сам WordPress не получится? Плагин прикрутить…

Андрей

А в IE эти выпадающие менюшки будут работать без дополнительного небольшого Java Script? Не проверяли?

Иван

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

Алексей

Спасибо за статью. Попробую…

Антоншка

Отметьте, что кнопка «Download» появляется только после регистрации на онлайн сервисе Pure CSS Menu.

Alex

Дмитрий здравствуйте.

А скажите навороченность и множества выпадающих меню

на странице как то влияют на ее скорость загрузки?

СПС заранее…

Анна

А мне не прислали файл с Html, а только лишь папку с картинками 🙁

ЧТО ДЕЛАТЬ?

Анна

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

Я все вставила как Вы написали. Получилось.

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

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

Что можно сделать?

mamay_p

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

Дмитрий

mamay_p: перед сохранение измененного файла шаблона попробуйте преобразовать текст в UTF-8 без Bom. В Notepadd это можно сделать в разделе «Кодировки».

mamay_p

Дмитрий: Спасибо. Всё получилось. Только с кодировкой просто в UTF-8. Ещё раз спасибо огромное.

mamay_p

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

Андрей

Спасибо! Вот бы еще созданное меню научиться таскать по экрану, т.е. в нужное место вставлять!!! ПОМОГИТЕ! В файле «cm-style.css» меняю «relative» на «absolute» с указанием «Top» и «Left» позиции и, не получается!

Andrey

Еще бы научиться изменять положение меню на дисплее. Где в css position вставлять. Подскажите пожалуста!!! Help!!!

valya

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

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

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

Евгений

Доброго времени суток!

1.зарегистрировался http://purecssmenu.com/

2.Создал меню на сайте http://purecssmenu.com/

3.скачал архив, распаковал его.

4.скопировал код и…а в какую часть кода (в моей таблице стилей) вставлять скопированный код?

У меня то размещение менюшек скакать начинает, то вообще ничего не происходит :(((

Подскажите пожалуста.

Заранее благодарен.

Евгений

как найти нужное место вставки кода в файле style.css и куда вставлять html код???

Намик

у меня на опере меню сдвинулось на верх, а в FF и IE все пошло нормально, как поступить с оперой? Спасибо

Евгений

Намик: как найти нужное место вставки кода в файле style.css и куда вставлять html код???

Кирилл

Создал менюшку — скачал zip файл — распаковал.

Затем проделал все операции которые указаны для Joomla внизу статьи — указал правильное место модуля в шаблоне.

Но вместо выпадающего меню получил в шапке сайта весь код написанный на html (который я вставлял)

Как решить проблему ?

Tim

У меня такая же проблема как у Кирилл. Код вместо меню:(

moon

у меня никакое меню не отображается, только последняя строчка — CSS Drop Down Menu by PureCSSMenu.com. Что делать не знаю, замучилась уже с этими подкатегориями.В шаблоне, который установила на сайт, они не прописаны, сама сделать не могу((

Люба

Не могу поставить, отображается коряво постоянно, целый день сижу над ним, может кто-то помочь?

сергей

а с категориями такое получится?

Любовь

Спасибо за постоянные подробные консультации. Это для нас «чайников» просто спасение. Я сделала все, что здесь описано. Но на сайте у меня меню вообще не высвечивается, а при наведении мышки на него вылетают выпадающие подменю. Но на них написаны вместо букв различные буквы и значки в беспорядке. Сайт в юкозе. Помогите разобраться, почему?

Наталья

Добрый день! Помогите пожалуйста. Я сделала выпадающее меню с помощью плагина Drop-down Menu, очень удобная вещь, но есть маленькая заминка. Шаблон сайта на вордпрессе выглядит следующим образом: название «Главная» находится по середине окна, а те странички для которых я создавала менюшку после установки плагина съехали на вторую строчку под название «Главная», да еще и прилепились с левой стороны окна сайта. Как только этот плагин убираешь, созданные странички возвращаются на свое место в строку где название «Главная». Для наглядности приведу пример:

(это так, как получается с плагином):

Главная

Коротко о сайте Это Интересно!

(а это так, как мне бы хотелось сделать):

Главная Коротко о сайте Это Интересно!

Я так поняла, что мне нужно покапаться в цсс самого плагина, но что только я уже не делала не получается сдвинуть это меню.

Добрые люди, может вы подскажете, какой код мне нужно поменять? Заранее спасибо!

Dezu

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

Юля

Огромное спасибо!!!!!!!!

выручили!

Серж

Андрей! Подскажи пожалуйста, как бы сделать все наоборот? Мне нужно как раз запретить показ в менюшке страниц второго уровня т.е. подстраниц. Я хочу сделать страницу новости на своем блоге и там размещать подстраницы с новостями, их будет много и выплывающее меню только мешает, как бы это запретить! Если нужно посмотреть как это выглядит вот сайт: http://1efimrealty.ru

Спасибо заранее!

Админ

Менюшка классная! Посмотрите еще один урок (ссылка ниже), очень прикольное меню!

Тут урок как сделать классное Анимированное меню с выскальзывающим текстом и иконкой — http://ileson.ru/lesson.php?rub=6&id=50

pri4ina.ru

Исправляй начало статьи.

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

Пол часа делал менюшку, а потом оказалось, что там ещё и регистрироваться надо…

У меня просто нет хороших слов, предупреждать же надо, что необходима регистрация.

Димка

Посмотрите пожалуйста, Semant.ucoz.ru можно ли в отдельном блоке поменять дизйн шрифт, размер подскажите виджет может какой для блоков

Даниил

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

Виктор Ивановский

Читать код выравненный по центру ужасно (

Бабай

Подскажите почему сьезжают вниз сайдбар,…или виджеты

Роман

в IE8 меню отображается некорректно. В остальных браузерах все отлично. Подскажите как с этим бороться.

Дима

Ужасный урок!! Так запутанно, я уже три часа вмыкаю…

Екатерина

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

nikko

Описал прекрасный модуль Выпадающее меню joomla http://e-kzn.ru/rasshireniya/vipadaiuschee-meniu-joomla.html горизонтальное и вертикальное

Константин

Вот здесь я подробно расписал как создать выпадающее горизонтальное меню, которое создается через панель управления wordpress, используется технология java скриптов, но все расписано подробно, так что поймет любой новичок http://mnogoblog.ru/urok-26-sozdaem-vypadayushhee-gorizontalnoe-menyu-wordpress-podrobno

T’Anik

Я имею лишь первоначальные сведения о html и css, и то умудрилась только по статье сделать выпадающее меню. Предварительно перерыла тучу сайтов с инструкциями, как это сделать. Ничего не поняла, и, соответственно, ничего не получилось. А здесь ТАК ПОНЯТНО написано, что у меня вышло с первого раза! Честь и хвала автору!!

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

Тимирлан

Спасибо большое.У меня все получилось,но как сделать кнопки немного больше?

Заранее спасибо.

Юлия

Здравствуйте!

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

Константин

Для создания вертикального меню с древовидной структурой рубрик, при этом рубрики и подрубрики будут раскрываться (то есть это сможет заменить вам также плагин «Хлебные крошки»)есть отличный wordpress плагин — Collapsing Categories, о нем можете прочитать в моей статье: http://mnogoblog.ru/vertikalnoe-menyu-s-raskryvayushhimisya-rubrikami-plagin-collapsing-categories

Игорь

А на CMS Joomla 2.5 будет работать?

Denis

Спасибо за статью!

В общем все стало, стили подключил. Но есть пару проблем, менюшка ушла под блок, и в ней нет картинки (стрелочки). помогите пожалуйста

посмотреть можно тут: http://wotplayer. pro/

Константин

Есть один вопрос новичка. У меня на хостинге нет файла style.css. Куда в таком случае вставлять css-код? спасибо, если кто подскажет

Милана

У меня получился обычный список, а не раскрывающийся, и без фона и рамок, просто один текст…Как исправить — не знаю…

Set

здравствуйте, подскажите как исправить — у меня на сайте http://skachaj.net перестало выпадать меню?

Мария

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

Виктор

Спасибо за статью. Всё сделал, всё работает, но есть одно но.

По умолчанию меню выпадает вправо, как можно изменить, чтоб например правые меню, выпадали влево. Где это прописывать и как?

Елена

Спасибо! Ваша помощь просто неоценима, если что не понятно всегда к вашим материалам обращаюсь.

Александр

Подскажите, пожалуйста, на ktonanovenkogo.ru верхнее меню поисковик видит или нет?

Ссылок в коде страницы на эти пункты не заметил нигде на сайте. .. так как они все-таки индексируются? за счет покупных ссылок?

Александр

Добавил «Оповещать о новых комментариях по почте»

Candycat

Огромное спасибо за столь полезную и подробную инструкцию)))

MrVigner

Очень большое спасибо за статью! Долго я промучился чтобы сделать выпадающее вертикальное меню в горизонтальном и так и не получилось то что хотел. А тут воспользовался этим сервисом и именно то что надо! Немного только стиль подкоректировал под дизайн сайта и все 🙂

Максат из Чимкента

спасибо, огромное

Вячеслав

Дмитрий, подскажи пожалуйста

Как сделать открывающее меню при нажатие на кнопку.

К примеру, будет пункт меню — Выбрать другую услугу.

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

То есть, стандартное выпадающее меню на wp не подходит.

Создаем вертикальное меню для сайта на CSS используя анимации

 

@media only screen and (min-width: 1200px) {

    . container {

        width: 1210px;

    }

}

 

@media only screen and (min-width: 960px) and (max-width: 1199px) {

    .container {

        width: 1030px;

    }

 

    .mcd-menu {

        margin-left:10px;

    }

}

 

@media only screen and (min-width: 768px) and (max-width: 959px) {

    .container {

        width: 682px;

    }

 

    .mcd-menu {

        width: 200px;

    }

 

    .mcd-menu li a {

        height:30px;

    }

 

    .mcd-menu li a i {

        font-size: 22px;

    }

 

    .mcd-menu li a strong {

        font-size: 12px;

    }

 

    .mcd-menu li a small {

        font-size: 10px;

    }

 

    .mcd-menu li a.search input {

        width: 120px;

        font-size: 12px;

    }

 

    .mcd-menu li a.search button{

        padding: 8px 10px 9px 10px;

    }

 

    . mcd-menu li > ul {

        min-width:180px;

    }

 

    .mcd-menu li:hover > ul {

        min-width:180px;

        left:200px;

    }

 

    .mcd-menu li ul li > ul, 

    .mcd-menu li ul li ul li > ul {

        min-width:150px;

    }

 

    .mcd-menu li ul li:hover > ul {

        left:180px;

        min-width:150px;

    }

 

    .mcd-menu li ul li ul li:hover > ul {

        left:150px;

        min-width:150px;

    }

 

    .mcd-menu li ul a {

        font-size:12px;

    }

 

    .mcd-menu li ul a i {

        font-size:14px;

    }

}

 

@media only screen and (min-width: 480px) and (max-width: 767px) {

    .container {

        width: 428px;

        margin: 0 auto;

    }

 

    .mcd-menu {

        width: 50px;

    }

 

    .mcd-menu li a {

        position: relative;

        padding: 12px 16px;

        height:20px;

    }

 

    .

mcd-menu li a small,

    .mcd-menu li a strong,

    .mcd-menu li .search {

        display: none;

    }

 

    .mcd-menu li a:hover strong,.mcd-menu li a.active strong {

        display:block;

        font-size:10px;

        padding:3px 0;

        position:absolute;

        bottom:0px;

        left:0;

        background:#e67e22;

        color:#FFF;

        min-width:100%;

        text-transform:lowercase;

        font-weight:normal;

        text-align:center;

    }

 

    .mcd-menu li > ul {

        min-width:180px;

        left:70px;

    }

 

    .mcd-menu li:hover > ul {

        min-width:180px;

        left:50px;

    }

 

    .mcd-menu li ul li > ul, 

    .mcd-menu li ul li ul li > ul {

        min-width:150px;

    }

 

    .mcd-menu li ul li:hover > ul {

        left:180px;

        min-width:150px;

    }

 

    . mcd-menu li ul li ul li > ul {

        left:35px;

        top: 45px;

        border:0;

        border-top:4px solid #e67e22;

    }

 

    .mcd-menu li ul li ul li > ul:before {

        left:30px;

        top: -9px;

        border:0;

        border-bottom:5px solid #e67e22;

        border-left:5px solid transparent;

        border-right:5px solid transparent;

    }

 

    .mcd-menu li ul li ul li:hover > ul {

        left:30px;

        min-width:150px;

        top: 35px;

    }

 

    .mcd-menu li ul a {

        font-size:12px;

    }

 

    .mcd-menu li ul a i {

        font-size:14px;

    }

}

 

@media only screen and (max-width: 479px) {

    .container {

        width: 320px;

        margin: 0 auto;

    }

 

    .mcd-menu {

        width: 50px;

    }

 

    .mcd-menu li a {

        position: relative;

        padding: 12px 16px;

        height:20px;

    }

 

    . mcd-menu li a small,

    .mcd-menu li a strong,

    .mcd-menu li .search {

        display: none;

    }

 

    .mcd-menu li a:hover strong,

    .mcd-menu li a.active strong {

        display:block;

        font-size:10px;

        padding:3px 0;

        position:absolute;

        bottom:0px;

        left:0;

        background:#e67e22;

        color:#FFF;

        min-width:100%;

        text-transform:lowercase;

        font-weight:normal;

        text-align:center;

    }

 

    .mcd-menu li > ul {

        min-width:180px;

        left:70px;

    }

 

    .mcd-menu li:hover > ul {

        min-width:180px;

        left:50px;

    }

 

    .mcd-menu li ul li > ul, 

    .mcd-menu li ul li ul li > ul {

        min-width:150px;

    }

 

    .mcd-menu li ul li:hover > ul {

        left:180px;

        min-width:150px;

    }

 

    . mcd-menu li ul li ul li > ul {

        left:35px;

        top: 45px;

        border:0;

        border-top:4px solid #e67e22;

    }

 

    .mcd-menu li ul li ul li > ul:before {

        left:30px;

        top: -9px;

        border:0;

        border-bottom:5px solid #e67e22;

        border-left:5px solid transparent;

        border-right:5px solid transparent;

    }

 

    .mcd-menu li ul li ul li:hover > ul {

        left:30px;

        min-width:150px;

        top: 35px;

    }

 

    .mcd-menu li ul a {

        font-size:12px;

    }

 

    .mcd-menu li ul a i {

        font-size:14px;

    }

}

Создаем вертикальное меню на CSS – Zencoder

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

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

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

Механизм действия и построения такого меню основан на одном единственном CSS-свойстве — , а точнее на его значениях — и .

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

Такая навигация называется 

1

меню-аккордеон
и принцип его создания будет рассмотрен позже.

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

<ul>
  <li>
    <a href="#">Punkt 1</a>
  </li>
  <li>
    <a href="#">Punkt 2</a>
  </li>
  <li>
    <a href="#">Punkt 3</a>
  </li>
  <li>
    <a href="#">Punkt 4</a>
  </li>
  <li>
    <a href="#">Punkt 5</a>
  </li>
</ul>

Созданное только что меню будет внешним, а внутри него (

точнее внутри его пунктов) мы поместим еще одно меню. Получиться одно меню, вложенное в другое (помните уроки HTML?).

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

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

<ul>
  <li>
    <a href="#">Punkt 1</a>
        <ul>
      <li>
        <a href="#">Punkt 1-1</a>
      </li>
      <li>
        <a href="#">Punkt 1-2</a>
      </li>
      <li>
        <a href="#">Punkt 1-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Punkt 2</a>
        <ul>
      <li>
        <a href="#">Punkt 2-1</a>
      </li>
      <li>
        <a href="#">Punkt 2-2</a>
      </li>
      <li>
        <a href="#">Punkt 2-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Punkt 3</a>
        <ul>
      <li>
        <a href="#">Punkt 3-1</a>
      </li>
      <li>
        <a href="#">Punkt 3-2</a>
      </li>
      <li>
        <a href="#">Punkt 3-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Punkt 4</a>
        <ul>
      <li>
        <a href="#">Punkt 4-1</a>
      </li>
      <li>
        <a href="#">Punkt 4-2</a>
      </li>
      <li>
        <a href="#">Punkt 4-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Punkt 5</a>
        <ul>
      <li>
        <a href="#">Punkt 5-1</a>
      </li>
      <li>
        <a href="#">Punkt 5-2</a>
      </li>
      <li>
        <a href="#">Punkt 5-3</a>
      </li>
    </ul>
  </li>
</ul>

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

*{
  margin: 0;
  padding: 0;
}

a{
  text-decoration: none;
}

ul{
  list-style-type: none;
}

.menu{
  margin: 30px 0 0 30px;
  width: 100px;
}

Здесь мы обнуляем и для всех элементов, в том числе и ; убираем маркер у пунктов меню; убираем подчеркивание у ссылок.

Для внешнего списка с классом menu задаем отступ сверху и слева, чтобы не прилипал к границам окна браузера и устанавливаем фиксированную ширину в .

Дальше форматируем пункты меню:

.menu li{
    position: relative;
    line-height: 20px;
    background-color: #ccc;
    margin-bottom: 1px;
  }

Ставим высоту каждого элемента равной 20px и выравниваем текст внутри него по центру вертикали; задаем фоновый цвет для них же, чтобы можно было различать каждый из пунктов на фоне окна браузера; делаем нижний в 1px, чтобы элементы не сливались между собой и были похожи на пункты меню.

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

Далее чисто косметические правила для ссылок, находящихся внутри внешнего меню — размер шрифта (кегль) и цвет текста:

.menu li a{
  font-size: 16px;
  color: #000;
}

Теперь приступаем к самому интересному — стилизации подменю. Для начала зададим его ширину (пусть будет чуть меньше ширины внешнего списка):

.sub-menu{
  width: 90px;
}

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

И самое главное — скроем его отображение в браузере через правило . В результате код будет выглядеть следующим образом:

.sub-menu{
  width: 90px;
  position: absolute;
  left: 100px;
  top: 0;
  display: none;
}

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

.sub-menu li{
  background-color: #aaa;
}
  .sub-menu li a{
    color: #fff;
  }

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

.menu li:hover .sub-menu{
  display: block;
}

В результате подменю отобразиться (браузер сгенерирует его). Изначально в коде было прописано для него . То есть, для браузера такого подменю не существовало и в DOM-модели документа элемент с классом отсутствовал.

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

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

И меню, когда наведена мышка на один из пунктов меню и справа появляется подменю, соответствующее этому пункту:

На этом все.

css

css раскрывающееся вертикальное меню | Все о Windows 10

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

Вертикальное плавно раскрывающееся меню аккордеон для сайта с подпунктами основного раздела на HTML5 + CSS3 + JS

Вертикальное раскрывающееся меню HTML + CSS + JS

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

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

Все подпункты меню свернуты Все подпункты меню развернуты Второй подпункт меню развернут. Нумерация идентификаторов начинается с 0 Два подпункта меню развернуты

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

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

Навигация по странице:

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

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

А что же делать с мобильными браузерами? – или на планшетах спросите вы.

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

Пара слов о преимуществе выпадающих меню:

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

Вертикальное выпадающее меню вправо

к менюПредставляю вашему вниманию первый пример: простое вертикальное выпадающее меню вправо при наведении.

Написание менюшки мы начнем с html кода и сделаем его универсальным на списках, вариант ответа идентичный тому, что возвращает wordpress.

Html для вертикального меню

Думаю в плане понимания html у вас не возникнет никаких сложностей, типичные списки с тегами ul и li. Смотрим код:

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

Вертикальное выпадающее меню CSS

к менюСо стилями CSS вопрос немного по сложнее. Я вам покажу код только самого меню, а остальные стили вы сможете посмотреть когда скачаете пример.

Вот эта строчка CSS

Посмотреть что у нас получилось в этом примере можно на скине:

Как работает вертикальное выпадающее меню css вы можете увидеть в режиме демо ниже, или скачав пример:

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

Это еще не конец, идем дальше.

Предположим, что вам нужно сделать выпадающее меню при наведении с выпадашкой влево. На основе примера выпадашки вправо мы сейчас ее и реализуем.

Вертикальное выпадающее меню влево на CSS

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

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

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

Вот и все. У нас получилось вот такое меню. Слева кликабельный скин, справа демо и ссылка на скачивание примера:

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

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

Элементы списка
. могут содержать не только ссылки, но также заголовки, иконки, картинки. С помощью вертикального меню можно оформлять комментарии на сайте, список категорий и т.д.

1. Вертикальное меню с заголовком

Простой элегантный вариант оформления. Подходит для стилизации категорий на сайте. При наведении элемент списка меняет цвет ссылки.

2. Вертикальное меню в стиле «схема метро»

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

3. Вертикальное меню с эффектами при наведении

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

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

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

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

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

Вертикальное меню для сайта с помощью JS

Вертикальное меню очень полезно, ведь в него может вместиться множество полезной информации. Различными блоками, меню  выполненных в стиле «аккордеон», сейчас уже никого не удивишь. Предлагается масса интересных решений и техник исполнения, как с использованием jQuery, так и основанных только на CSS. В сегодняшнем уроке мы рассмотрим весьма интересное решения построение такого блока навигацией, мы добавим несколько правил анимации, при этом вертикальная навигация будет полностью рабочей и отвечать всем пользовательским запросам.

 

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

Шаг 1. HTML

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

<ul>

<li>

<div><i></i>Интересно<i></i></div>

<ul>

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

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

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

<li><a href=»#»>Maquetacion web</a></li>

</ul>

</li>

 

</ul>

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

Шаг 2. CSS

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

. accordion {

width: 100%;

max-width: 360px;

margin: 30px auto 20px;

background: #FFF;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

}

 

.accordion .link {

cursor: pointer;

display: block;

padding: 15px 15px 15px 42px;

color: #4D4D4D;

font-size: 14px;

font-weight: 700;

border-bottom: 1px solid #CCC;

position: relative;

-webkit-transition: all 0.4s ease;

-o-transition: all 0.4s ease;

transition: all 0.4s ease;

}

 

.accordion li:last-child .link {

border-bottom: 0;

}

 

.accordion li i {

position: absolute;

top: 16px;

left: 12px;

font-size: 18px;

color: #595959;

-webkit-transition: all 0.4s ease;

-o-transition: all 0.4s ease;

transition: all 0.4s ease;

}

 

.accordion li i.fa-chevron-down {

right: 12px;

left: auto;

font-size: 16px;

}

 

. accordion li.open .link {

color: #b63b4d;

}

 

.accordion li.open i {

color: #b63b4d;

}

.accordion li.open i.fa-chevron-down {

-webkit-transform: rotate(180deg);

-ms-transform: rotate(180deg);

-o-transform: rotate(180deg);

transform: rotate(180deg);

}

 

.submenu {

display: none;

background: #444359;

font-size: 14px;

}

 

.submenu li {

border-bottom: 1px solid #4b4a5e;

}

 

.submenu a {

display: block;

text-decoration: none;

color: #d9d9d9;

padding: 12px;

padding-left: 42px;

-webkit-transition: all 0.25s ease;

-o-transition: all 0.25s ease;

transition: all 0.25s ease;

}

 

.submenu a:hover {

background: #b63b4d;

color: #FFF;

}

Также мы добавили элементы трансформации цвета при наведении курсора мыши. Что позволит нам более оживить навигацию и сделать ее более отзывчивой.

Шаг 3. JS

Теперь нам необходимо активировать наше меню, добавив ему функции управления мышью:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

$(function() {

var Accordion = function(el, multiple) {

this.el = el || {};

this.multiple = multiple || false;

 

var links = this.el.find(‘.link’);

links.on(‘click’, {el: this.el, multiple: this.multiple}, this.dropdown)

}

 

Accordion.prototype.dropdown = function(e) {

var $el = e.data.el;

$this = $(this),

$next = $this.next();

 

$next.slideToggle();

$this.parent().toggleClass(‘open’);

 

if (!e.data.multiple) {

$el.find(‘.submenu’).not($next).slideUp().parent().removeClass(‘open’);

};

}

 

var accordion = new Accordion($(‘#accordion’), false);

});

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

Вот и все. Готово!

Читайте также:

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

#nav {
  border:3px solid #3e4547;
  box-shadow:2px 2px 8px #000000;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
}

#nav, #nav ul {
  list-style:none;
  padding:0;
  width:200px;
}

#nav ul {
  position:relative;
  z-index:-1;
}

#nav li {
  position:relative;
  z-index:100;
}

#nav ul li {
  margin-top:-23px;
  -moz-transition:  0.4s linear 0.4s;
  -ms-transition: 0.4s linear 0.4s;
  -o-transition: 0.4s linear 0.4s;
  -webkit-transition: 0.4s linear 0.4s;
  transition: 0.4s linear 0.4s;
}

#nav li a {
  background-color:#d4d5d8;
  color:#000;
  display:block;
  font-size:12px;
  font-weight:bold;
  line-height:28px;
  outline:0;
  padding-left:15px;
  text-decoration:none;
}

#nav li a.sub {
  background:#d4d5d8 url(«. ./images/down.gif») no-repeat;
}

#nav li a + img {
  cursor:pointer;
  display:none;
  height:28px;
  left:0;
  position:absolute;
  top:0;
  width:200px;
}

#nav li a img {
  border-width:0px;
  height:24px;
  line-height:28px;
  margin-right:8px;
  vertical-align:middle;
  width:24px;
}

#nav li a:hover {
  background-color:#bcbdc1;
}

#nav ul li a {
  background-color:#eee;
  border-bottom:1px solid #ccc;
  color:#000;
  font-size:11px;
  line-height:22px;
}

#nav ul li a:hover {
  background-color:#ddd;
  color:#444;
}

#nav ul li a img {
  background: url(«../images/bulb.png») no-repeat;
  border-width:0px;
  height:16px;
  line-height:22px;
  margin-right:5px;
  vertical-align:middle;
  width:16px;
}

#nav ul li:nth-child(odd) a img {
  background:url(«../images/bulb2.png») no-repeat;
}

#nav a. sub:focus {
  background:#bcbdc1;
  outline:0;
}

#nav a:focus ~ ul li {
  margin-top:0;
  -moz-transition:  0.4s linear;
  -ms-transition: 0.4s linear;
  -o-transition: 0.4s linears;
  -webkit-transition: 0.4s linears;
  transition: 0.4s linear;
}

#nav a:focus + img, #nav a:active + img {
  display:block;
}

#nav a.sub:active {
  background:#bcbdc1;
  outline:0;
}

#nav a:active ~ ul li {
  margin-top:0;
}

#nav ul:hover {
  display:block;
}

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

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

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

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

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

alexxlab

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Как успокоить плачущего ребенка: 10 эффективных способов

Что нужно новорожденному на первое время: полный список необходимых вещей

Пеленки для новорожденных: виды, размеры и способы использования

Детская кроватка для новорожденного: как правильно выбрать

Развитие зрения у детей до года: этапы, особенности и рекомендации

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

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