Пример выпадающего меню, где дочерние элементы центрированы. Реализация очень проста. Пишем на html простой маркированный список, состоящий из двух уровней.
<ul id="nav"> <li class="current"><a href="#">HOME</a></li> <li><a href="#">NEWS</a> <ul> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Sub-Menu 2</a></li> <li><a href="#">Sub-Menu 3</a></li> </ul> </li> <li><a href="#">TUTORIALS</a> <ul> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Sub-Menu 2</a></li> <li><a href="#">Sub-Menu 3</a></li> </ul> </li> <li><a href="#">BLOG</a> <ul> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Sub-Menu 2</a></li> <li><a href="#">Sub-Menu 3</a></li> </ul> </li> <li><a href="#">PORTFOLIO</a> <ul> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Sub-Menu 2</a></li> <li><a href="#">Sub-Menu 3</a></li> </ul> </li> </ul>
В моём примере возможны только два уровня. Стилизуем css:
1ul li { list-style: none; } /*nav*/ #nav li { position:relative; float: left } #nav a { float:left; margin: 0 30px 0 0; padding: 5px 0 15px; font-size:20px; color: #9F8F79; text-decoration:none } #nav a:hover { color: #9F8F79 } /*dropdown*/ ul#nav ul { display:none; position:absolute; top:36px; left: 0; padding: 6px 0 0; background:#f4f4f4 url(triangle.jpg) no-repeat 50% 0; border-top: 3px solid #1bba9b; border-bottom: 1px solid #d3d2d2; z-index:100; border-right: 1px solid #d3d2d2; border-left: 1px solid #d3d2d2; } ul#nav ul li { float: none; display: block; background: #f4f4f4; border-bottom: 1px solid #d3d2d2; } ul#nav ul li:first-child { border-top: none; } ul#nav ul li a { float: none; display:block; width: 148px; margin:0; padding: 5px 20px; background: #f4f4f4 } ul#nav li:hover ul, ul#nav li:focus ul {display: block}
Итак, обычное выпадающее меню готово, осталось только рассчитать ширину родительского элемента, поделить на двое, и сместить дочерний на полученное значение. В этом поможет небольшой скриптик.
$(document).ready(function() { $("ul#nav li").mouseover(function() { var the_width = $(this).find("a").width(); var child_width = $(this).find("ul").width(); var width = parseInt((child_width - the_width)/2); $(this).find("ul").css('left', -width); }); });
И что бы скриптик заработал, подключим JQUERY
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Всё, выпадающее с меню центрированными дочерними элементами готово.
Демо
Прикреплённые файлы
ddmenu.rar20.66 КБ
- Войдите, чтобы оставлять комментарии
- 876 просмотров
в восторге, автору респект)))))