Комментарий: Эта статья в основном представляет метод использования jQuery для реализации меню HTML5, отвечая на навигацию. Друзья, которые это нужно, могут ссылаться на это.
Реализованный через JQUERY+HTML5, когда окно браузера сужается или доступно на мобильном телефоне, меню навигации становится раскрывающимся меню кнопки. Изображение воспроизведения:
HTML -код:
<ul>
<li> <a href = "#"> кнопка </a> </li>
<li> <a href = "#"> кнопка </a> </li>
</ul>
</nav>
код jQuery:
Через следующий код jQuery <div id = menu-iCon> будет добавлено в <NAV ID = NAV_WRAP>. Когда вы нажимаете #Menu-Icon, меню будет отображаться:
<script type = "text/javascript" src = "<a href =" http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js "> </script"> "> </script </a >>
<script type = "text/javascript">
$ (document) .ready (function ($) {
/ * Приготовление значка меню */
$ ('#NAV-WRAP'). PRIPEND ('<div> меню </div>');
/ * Переключить навие */
$ ("#menu-iCon"). On ("click", function () {
$ ("#Nav"). Slidetoggle ();
$ (this) .toggleclass ("Active");
});
});
</script>
Просмотр элементов через браузер может видеть код, отображаемый в HTML следующим образом:
<av>
<div> Меню </div>
<ul>
<li> <a href = "#"> кнопка </a> </li>
<li> <a href = "#"> кнопка </a> </li>
</ul>
</nav>
CSS -код:
В коде CSS сначала установите атрибут #Menu-ICON для отображения: None;, затем используйте СМИ запрос, чтобы судить по запросу в СМИ, а затем измените #Menu-ICon для отображения: Block;. Ниже приведено ключевой код стиля CSS, чтобы определить стиль, когда ширина браузера меньше 600px:
Последний эффект - это первое рендеринг в статье.