section ">section some bu-6ren">
个人中心
gpt4 book ai didi

list - 是否可以使用 AMP 侧边栏创建多级导航？

转载 作者：行者123 更新时间：2023-12-03 07:47:55 25 4
gpt4 key购买 nike

我想为 AMP 网站重新创建移动页面导航。问题是它有多个级别 - 所以列表中有列表。像这样:

<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>

然而，即使在 AMP 中非常简单，这似乎也很棘手。我找不到任何例子。根据https://www.ampproject.org/docs/reference/components/amp-sidebar amp-sidebar 中不可能存在 amp-sidebar，因为 amp-sidebar 必须是 body 的子级>。在列表中使用列表不能像在移动页面上那样轻松使用，因为: 切换子导航的 Javascript 魔法受到限制。 :hover 也无法显示子导航，因为它适用于移动设备。

这个问题有有效的解决方案吗？如果有，如何解决？

最佳答案

是的，可以使用 AMP 侧边栏创建多级导航。

Here is example

代码:

<!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>

关于list - 是否可以使用 AMP 侧边栏创建多级导航？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51743226/

25 4 0
文章推荐： Scala - 将列表列表转换为单个列表 : List[List[A]] to List[A]
文章推荐： r - 如何在 R 中创建具有特定间隔的向量？
文章推荐： scala - 通过插入 () 来调整参数列表已被弃用
文章推荐： vim - 如何在 vim 编辑器中保存文件而不退出
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com