Как подвинуть выпадающее меню?
Делаю задание и надо сделать выпадающее меню, сделал его, а подвинуть никак не могу. Надо выставить в между верхней белой полоской и нижней частью. Уже голова не варит, вроде все перепробовал.
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
div>ul class="menu"> li>a href="index.html">Главная/a>/li> li>a href=#>Веб-программирование/a> ul class="submenu"> li>a href=#>Submenu 2/a>/li> li>a href=#>Submenu 2/a>/li> li>a href=#>Submenu 2/a>/li> /ul> /li> li>a href=#>Информатика/a> ul class="submenu"> li>a href=#>Submenu 3/a>/li> li>a href=#>Submenu 3/a>/li> li>a href=#>Submenu 3/a>/li> /ul> /li> li>a href=#>Языки программирования/a> ul class="submenu"> li>a href=#>Submenu 4/a>/li> li>a href=#>Submenu 4/a>/li> li>a href=#>Submenu 4/a>/li> /ul> /li> li>a href=#>Тест/a>/li> /ul> /div>
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
ul { display: block; margin: 0; padding: 0; list-style: none; } ul:after { display: block; content: ' '; clear: both; float: none; } ul.menu > li { float: left; position: relative; } ul.menu > li > a { display: block; padding: 10px; color: white; background-color: #000; text-decoration: none; } ul.menu > li > a:hover { background-color: black; } ul.submenu { display: none; position: absolute; width: 120px; top: 37px; left: 0; background-color: white; border: 1px solid black; } ul.submenu > li { display: block; } ul.submenu > li > a { display: block; padding: 10px; color: white; background-color: #000; text-decoration: none; } ul.submenu > li > a:hover { text-decoration: underline; } ul.menu > li:hover > ul.submenu { display: block; }
Меню, которое отодвигает контент
Иногда заказчики просят сделать горизонтальное меню, которое отодвигает контент, при раскрытии. Раньше я перемещал выпадающую часть за меню и показывал его таким образом. Все работало отлично, но минус этого способа в том, что для вроде бы простой реализации нужно было написать много javascript кода.
Появилась идея реализовать это эффект по-другому.
1. HTML
Ничего не меняем, обычное меню:
2. CSS
Ставим контейнеру высоту и “overflow:hidden”.
Подменю вешаем на “position:absolute” и скрываем с помощью “visibility:hidden”.
3. Javascript
Перебираем элементы первого уровня и узнаем высоты их подменю.
$nav.children('li').each(function()< var $this = $(this), height = $this.children('ul').outerHeight(); . >); На hover по элементу ставим меню нижний padding в размере высоты нужного нам подменю, которое показываем.
. $this.hover(function()< $this.addClass('over'); $nav.css(); >, function()< $this.removeClass('over'); $nav.css(); >); . Вот собственно и все. Готовый результат можно посмотреть тут. Жду критику и Ваши варианты.
Почитав комментарии решил сделать еще два примера:
в первом добавил плавности jsbin.com/amowup/1,
второй сделал на чистом CSS jsbin.com/ekuput/37 (в этом случае плавность и прочую «красоту» добавить сложнее).
От критиков адекватного примера так и не увидел.
Меню, которое отодвигает контент
Иногда заказчики просят сделать горизонтальное меню, которое отодвигает контент, при раскрытии. Раньше я перемещал выпадающую часть за меню и показывал его таким образом. Все работало отлично, но минус этого способа в том, что для вроде бы простой реализации нужно было написать много javascript кода.
Появилась идея реализовать это эффект по-другому.
1. HTML
Ничего не меняем, обычное меню:
2. CSS
Ставим контейнеру высоту и “overflow:hidden”.
Подменю вешаем на “position:absolute” и скрываем с помощью “visibility:hidden”.
3. Javascript
Перебираем элементы первого уровня и узнаем высоты их подменю.
$nav.children('li').each(function()< var $this = $(this), height = $this.children('ul').outerHeight(); . >); На hover по элементу ставим меню нижний padding в размере высоты нужного нам подменю, которое показываем.
. $this.hover(function()< $this.addClass('over'); $nav.css(); >, function()< $this.removeClass('over'); $nav.css(); >); . Вот собственно и все. Готовый результат можно посмотреть тут. Жду критику и Ваши варианты.
Почитав комментарии решил сделать еще два примера:
в первом добавил плавности jsbin.com/amowup/1,
второй сделал на чистом CSS jsbin.com/ekuput/37 (в этом случае плавность и прочую «красоту» добавить сложнее).
От критиков адекватного примера так и не увидел.