I want to recreate our mobile page navigation for our AMP site. The problem is that it has multiple levels - so there are lists in the list. Like this:
<ul>
<li><a href="<link to a section>">section</a></li>
<li>
<a href="<link to another section>">section</a>
<span>some button that open a sub navigation via javascript</span>
<ul>
<li><a href="<link to a subsection>">subsection</a></li>
...
</ul>
</li>
...
</ul>
However even it's quite simple in AMP this seems to be tricky. I couldn't find any example. According to https://www.ampproject.org/docs/reference/components/amp-sidebar an amp-sidebar within an amp-sidebar is not possible since amp-sidebar has to be a child of body. Using a list in a list can't be used like on the mobile page that easily because: Javascript magic to toggle the subnav is restricted. :hover also won't work to show the subnav since it's for mobile devices.
Is there a valid solution to this problem and if yes how is it done?
Yes It is possible to create a multilevel navigation with AMP sidebar.
Code :
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
amp-sidebar {background: #f0f0f0;width: 215px;}
amp-sidebar .submenu {background: #f0f0f0;bottom: 0;/*box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.075);*/left: 0;position: fixed;right: 0;top: 0;-webkit-transform: translateX(-100%);transform: translateX(-100%);-webkit-transition: -webkit-transform 233ms cubic-bezier(0, 0, 0.21, 1);transition: -webkit-transform 233ms cubic-bezier(0, 0, 0.21, 1);
transition: transform 233ms cubic-bezier(0, 0, 0.21, 1); transition: transform 233ms cubic-bezier(0, 0, 0.21, 1), -webkit-transform 233ms cubic-bezier(0, 0, 0.21, 1)}
amp-sidebar input:checked+.submenu {-webkit-transform: translateX(0);transform: translateX(0);overflow-y:auto;}
amp-sidebar input[type="checkbox"] {position: absolute;visibility: hidden}
amp-sidebar .menu-item {color: #000;display: block;position: relative;text-transform: none}
amp-sidebar .menu-layer .items {left: 0;position: absolute;right: 0;}/*** overflow-x: hidden;overflow-y: scroll; 27 june ***/
amp-sidebar .menu-layer .submenu .items {overflow-x: hidden;overflow-y: scroll;}
amp-sidebar .menu-layer.primary {height: 100%;position: relative}
amp-sidebar .menu-layer.primary .items { bottom: 0px;top:50px;padding: 0 10px;}
amp-sidebar .menu-layer.secondary { z-index: 2}
amp-sidebar .menu-layer.tertiary { z-index: 3}
amp-sidebar .menu-layer.secondary .items, amp-sidebar .menu-layer.tertiary .items {bottom:0;top:60px;}
amp-sidebar .has-sub-level::after {width: 15px;height: 15px;content: '';position: absolute;right: 15px; top: calc(50% - 8px); background:url(https://image.flaticon.com/icons/svg/271/271228.svg) no-repeat;}
amp-sidebar .close-button { border: 0; position: absolute;left: 10px;top: 10px; width: 35px;height: 35px;background:url(https://image.flaticon.com/icons/svg/32/32178.svg) no-repeat; background-size:25px; font-size: 0px;font-family:arial, sans-serif;}
amp-sidebar .return-button {color: #b3b3b3;left: 15px;position: absolute;top: 22px;font-size: 0px;}
amp-sidebar .return-button::before {border: 0;content: '';margin-right: 5px;position: relative;top: 0px;background: url(https://image.flaticon.com/icons/svg/109/109618.svg) no-repeat; width: 30px;height: 30px;display: block;}
amp-sidebar .submenu .return-button + #menu-button {display: none;}
amp-sidebar .menu-layer.secondary .items .level1 li {border-bottom: 1px solid #e4e4e4;padding: 8px 5px;}
.hamburger{-webkit-appearance:none;background:url(https://image.flaticon.com/icons/svg/128/128453.svg) no-repeat;border:0px;font-size:0px;width:48px;height:48px;padding:0;margin:5px; outline:none;z-index:99;background-position:center center;}
.sideNavi > a, .sideNavi > label, .items > a, .items > label {font-size:14px;text-decoration:none;padding: 8px 10px;font-family:arial, sans-serif;font-weight: bold;}
span.whats-new{color:#dc4a36;}
.secondary.submenu >.items>label{font-size:12px;text-transform: uppercase}
.submenu a{font-size: 12px;font-family:arial, sans-serif;padding: 5px 10px;}
span.top-sale-style{background:#3e3e3e;margin-left: 4px;font-size:10px;padding: 0px 3px;text-transform: capitalize;color:#fff;font-weight: bold;border-radius: 2px;display:inline-block;height:15px; line-height:15px;}
.top-new-style {background:#fff;border: 1px solid #e55049;border-radius: 2px;color: #e55049;
display: inline-block;font-size: 10px;font-weight: bold;margin-left: 4px;padding: 0px 3px;text-transform: capitalize;height:15px;line-height:15px;}
.sale-style {background:#3e3e3e;border-radius: 2px; color: #fff;display: inline-block;height: 15px;line-height: 15px;font-size: 10px; margin-left: 4px;padding: 0px 3px;text-transform: capitalize; vertical-align: middle;}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
</head>
<body>
<amp-sidebar id='sidebar' side='left' layout='nodisplay'>
<form class="menu-layer primary" action="/" target="_top">
<button type="reset" class="close-button" id="menu-button" on='tap:sidebar.toggle'>X</button>
<div class="items sideNavi">
<label class="menu-item item-layer-1 has-sub-level active"><input type="checkbox">
Lavel 1 (with sub menu)
<div class="submenu menu-layer secondary">
<div class="return-button">Back</div>
<button type="reset" class="close-button" id="menu-button" on='tap:sidebar.toggle'>X</button>
<div class="items">
<a class="menu-item item-layer-2" href="#">Lavel 2</a>
<a class="menu-item item-layer-2" href="#">Lavel 2</a>
</div>
</div>
</label>
<label class="menu-item item-layer-1 has-sub-level active"><input type="checkbox">
Lavel 1
<div class="submenu menu-layer secondary">
<div class="return-button">Back</div>
<button type="reset" class="close-button" id="menu-button" on='tap:sidebar.toggle'>X</button>
<div class="items">
<label class="menu-item item-layer-1 has-sub-level"><input type="checkbox">
Lavel 2
<div class="submenu menu-layer secondary">
<div class="return-button">Back</div>
<button type="reset" class="close-button" id="menu-button" on='tap:sidebar.toggle'>X</button>
<div class="items">
<a class="menu-item item-layer-2" href="#">Lavel 3</a>
<a class="menu-item item-layer-2" href="#">Lavel 3</a>
<a class="menu-item item-layer-2" href="#">Lavel 3</a>
</div>
</div>
</label>
<label class="menu-item item-layer-1 has-sub-level"><input type="checkbox">
Lavel 2
<div class="submenu menu-layer secondary">
<div class="return-button">Back</div>
<button type="reset" class="close-button" id="menu-button" on='tap:sidebar.toggle'>X</button>
<div class="items">
<a class="menu-item item-layer-2" href="#">Lavel 3</a>
<a class="menu-item item-layer-2" href="#">Lavel 3</a>
<a class="menu-item item-layer-2" href="#">Lavel 3</a>
</div>
</div>
</label>
</div>
</div>
</label>
<a class="menu-item item-layer-3" href="#"> Lavel 1 (without sub menu) </a>
</div>
</form>
</amp-sidebar>
<button class="tab hamburger" id="menu-button" on='tap:sidebar.toggle'>=</button>
</body>
</html>