Демо переключателя переноса строки одной кнопкой с Local Storage
Вернуться к статье
Перенос
<!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>
Вернуться к статье