6 436 Скрипты / Menu & Nav

Выпадающее адаптивное меню


Адаптивное выпадающее CSS3 меню, которое при уменьшении окна браузера превращается в меню вида аккордеон. Проверено в Chrome, Opera, FireFox, IE9, iPad, iPhone. В IE7 и IE8 работает только выпадающее подменю, адаптивность теряется.

HTML

Тут мы используем html5 теги - nav

Подключение в шапке кода:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Позволяет понимать IE ниже 9-ой версии HTML5 теги.

Также для IE у нас будут свои стили, поэтому начинаем наш html со следующих условий:

<!--[if IE 7]> <html class="ie7 ie8"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> 
<html>  
<!--<![endif]-->

CSS

Подключаем три файла стилей:

Первый это сброс всех стилей:

<link rel="stylesheet" type="text/css" href="reset.css" />

Далее оформление демо страницы и самого меню:



А в третьем файле стилей заключена вся функциональная часть:

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

Комментарии

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

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