Демо переключателя темы для Prettify

Вернуться к статье



Светлая

Тёмная

 
<!DOCTYPE html>
<html class="no-js" lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Адаптивное многоуровневое фиксированное Jquery меню со свайпом</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<script src="js/jquery-3.5.1.min.js"></script>
<!-- Main Menu -->
<link rel="stylesheet" href="js/nav/menu.css" />
<script src="js/nav/menu.js"></script>
<script src="js/nav/swipe.js"></script>
<script src="js/nav/script_swipe.js"></script>
<!-- End Main Menu -->
</head>
<body>
<div class="menucontainer clearfix">
  <div class="overlapblackbg"></div>
  <div class="mobileheader clearfix">
    <a id="navtoggle" class="animated-arrow"><span></span></a>
  </div>
  <!-- Header -->
  <header class="header">
    <!-- Main Menu -->
    <div class="nav_wrapper">
      <nav class="menu clearfix swipe-menu" id="swipeMenu">
        <ul class="mobile-sub menu-list">
          <li><a href="#">1 уровень</a></li>
          <li><a>1 уровень <span class="arrow"></span></a>
            <ul class="menu-submenu">
              <li><a>2 уровень <span class="arrow2"></span></a>
                <ul class="menu-submenu-sub">
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a>3 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub-sub">
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                    </ul>
                  </li>
                  <li><a>3 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub-sub">
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                    </ul>
                  </li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a>3 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub-sub">
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                    </ul>
                  </li>
                  <li><a>3 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub-sub">
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li><a>2 уровень <span class="arrow2"></span></a>
                <ul class="menu-submenu-sub">
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a>3 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub-sub">
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                    </ul>
                  </li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                </ul>
              </li>
              <li><a>2 уровень <span class="arrow2"></span></a>
                <ul class="menu-submenu-sub">
                  <li><a>3 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub-sub">
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                    </ul>
                  </li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                </ul>
              </li>
              <li><a>2 уровень <span class="arrow2"></span></a>
                <ul class="menu-submenu-sub">
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a>1 уровень <span class="arrow"></span></a>
            <ul class="menu-submenu">
              <li><a href="#">2 уровень</a></li>
              <li><a href="#">2 уровень</a></li>
              <li><a href="#">2 уровень</a></li>
            </ul>
          </li>
          <li><a href="#">1 уровень</a></li>
        </ul>
      </nav>
    </div>
    <!-- End Main Menu -->
  </header>
  <!-- End header -->
</div>
</body>
</html>


Вернуться к статье