3 050 Скрипты / Menu & Nav

Выпадающее CSS3 меню

Выпадающее CSS3 меню

Реализованное только на CSS простое, но стильное выпадающее меню.

HTML

CSS

Заметили синий (серый) треугольничек у пунктов меню? Обычно такие вещи реализуют дополнительной картинкой, в нашем же случае все реализовано на CSS с помощью псевдо-элемента :after

#menu ul li:first-child a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec;
}

Для наших ископаемых IE6 и IE7 нужно будет добавить в CSS:

* html #menu   { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

Ну, а для нашего ишакозавра IE6 придется для построения меню использовать ещё и jQuery, так как он не поддерживает событие наведения курсора - если элемент не ссылка.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
        $(function() {
          if ($.browser.msie && $.browser.version.substr(0,1)<7)
          {
                $('li').has('ul').mouseover(function(){
                        $(this).children('ul').show();
                        }).mouseout(function(){
                        $(this).children('ul').hide();
                        })
          }
        });
</script>

Скачать 1721Загрузок 2,18 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи