Google AMP 放大器侧边栏

侧边栏是网页中非常常见的功能，它非常简单，但在 HTML CSS 中编码有点冗长。在 AMP HTML 中，我们使用amp-sidebar组件向页面添加侧边栏。侧边栏提供对元内容的访问它可以通过单击按钮来显示。

所需脚本：将 amp-sidebar 组件导入到标题中。

属性：

• side：指定侧边栏应该从左侧或右侧弹出页面的哪一侧。保留其默认值。
• layout：指定侧边栏的布局，总是设置为nodisplay。
• toolbar：此属性用于子
  并接受媒体查询以显示在侧边栏中。
• data-close-button-aria-label：指定按钮的 aria- label。

例子：

HTML

 

    
    Google AMP amp-sidebar
     
    
    
     
    
    
    
     
    
    
     
    
     
    
 
    
        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
            }
        }
    
 
    
        
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        
    
 
    
        .btn {
            margin-top: 50px;
            margin-left: 50px
        }
    

 

    
         
        Sidebar
        Close sidebar
        
         
        Toggle sidebar
        
    
 
    Toggle sidebar
    
     
    Open sidebar
    

 

输出：

主页

侧边栏