Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to use RESPONSIVE MENUBAR #880

Open
zipswich opened this issue Sep 6, 2019 · 1 comment
Open

How to use RESPONSIVE MENUBAR #880

zipswich opened this issue Sep 6, 2019 · 1 comment

Comments

@zipswich
Copy link

zipswich commented Sep 6, 2019

I copied and pasted the code from AMP Start, but got the following:
image

Here is the code of the page:

<html ⚡>
<head>
    <meta charset="utf-8">
    
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" async></script>
    <script custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js" async></script>


    <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>
</head>
<body>
    <header class="ampstart-headerbar fixed flex justify-start items-center top-0 left-0 right-0 pl2 pr4">
        <div role="button" on="tap:header-sidebar.toggle" tabindex="0" class="ampstart-navbar-trigger md-hide lg-hide pr2">☰</div>
        <amp-img src="../img/components/sidebar-example-logo.png" width="110" height="33" layout="fixed" class="my0 mx-auto" alt="Example logo image"></amp-img>
        <nav class="ampstart-headerbar-nav ampstart-nav xs-hide sm-hide">
            <ul class="list-reset center m0 p0 flex justify-center nowrap">
                <li class="ampstart-nav-item ampstart-nav-dropdown relative">

                    <!-- Start Dropdown -->
                    <amp-accordion layout="container" disable-session-states="" class="ampstart-dropdown absolute top-0 left-0 right-0 bottom-0">
                        <section>
                            <header>Fashion</header>
                            <ul class="ampstart-dropdown-items list-reset m0 p0">
                                <li class="ampstart-dropdown-item">
                                    <a href="#" class="text-decoration-none">Styling Tips</a>
                                </li>
                                <li class="ampstart-dropdown-item">
                                    <a href="#" class="text-decoration-none">Designers</a>
                                </li>
                            </ul>
                        </section>
                    </amp-accordion>

                    <!-- End Dropdown -->
                </li>
                <li class="ampstart-nav-item ">
                    <a href="#" class="text-decoration-none block">Travel</a>
                </li>
                <li class="ampstart-nav-item ampstart-nav-dropdown relative">


                    <!-- Start Dropdown -->
                    <amp-accordion layout="container" disable-session-states="" class="ampstart-dropdown absolute top-0 left-0 right-0 bottom-0">
                        <section>
                            <header>Food</header>
                            <ul class="ampstart-dropdown-items list-reset m0 p0">
                                <li class="ampstart-dropdown-item"><a href="#" class="text-decoration-none">Recipes</a></li>
                                <li class="ampstart-dropdown-item"><a href="#" class="text-decoration-none">Hosting Tips</a></li>
                            </ul>
                        </section>
                    </amp-accordion>

                    <!-- End Dropdown -->
                </li>
                <li class="ampstart-nav-item ">
                    <a href="#" class="text-decoration-none block">Beauty</a>
                </li>
                <li class="ampstart-nav-item ">
                    <a href="#" class="text-decoration-none block">Shop</a>
                </li>
            </ul>
        </nav>
    </header>

</body>

</html>

Am I missing anything?
@zipswich
Copy link
Author

zipswich commented Sep 6, 2019

I copied and pasted more code from AMP Start, but the result is the same.
Here is the new source code:

<html ⚡>
<head>
    <meta charset="utf-8">
    
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" async></script>
    <script custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js" async></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
        {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
        "logo.jpg"
        ]
        }
    </script>
    <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>

    <noscript>
        <style amp-boilerplate>
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        </style>
    </noscript>
</head>
<body>
    <header class="ampstart-headerbar fixed flex justify-start items-center top-0 left-0 right-0 pl2 pr4">
        <div role="button" on="tap:header-sidebar.toggle" tabindex="0" class="ampstart-navbar-trigger md-hide lg-hide pr2">☰</div>
        <amp-img src="../img/components/sidebar-example-logo.png" width="110" height="33" layout="fixed" class="my0 mx-auto" alt="Example logo image"></amp-img>
        <nav class="ampstart-headerbar-nav ampstart-nav xs-hide sm-hide">
            <ul class="list-reset center m0 p0 flex justify-center nowrap">
                <li class="ampstart-nav-item ampstart-nav-dropdown relative">

                    <!-- Start Dropdown -->
                    <amp-accordion layout="container" disable-session-states="" class="ampstart-dropdown absolute top-0 left-0 right-0 bottom-0">
                        <section>
                            <header>Fashion</header>
                            <ul class="ampstart-dropdown-items list-reset m0 p0">
                                <li class="ampstart-dropdown-item">
                                    <a href="#" class="text-decoration-none">Styling Tips</a>
                                </li>
                                <li class="ampstart-dropdown-item">
                                    <a href="#" class="text-decoration-none">Designers</a>
                                </li>
                            </ul>
                        </section>
                    </amp-accordion>

                    <!-- End Dropdown -->
                </li>
                <li class="ampstart-nav-item ">
                    <a href="#" class="text-decoration-none block">Travel</a>
                </li>
                <li class="ampstart-nav-item ampstart-nav-dropdown relative">


                    <!-- Start Dropdown -->
                    <amp-accordion layout="container" disable-session-states="" class="ampstart-dropdown absolute top-0 left-0 right-0 bottom-0">
                        <section>
                            <header>Food</header>
                            <ul class="ampstart-dropdown-items list-reset m0 p0">
                                <li class="ampstart-dropdown-item"><a href="#" class="text-decoration-none">Recipes</a></li>
                                <li class="ampstart-dropdown-item"><a href="#" class="text-decoration-none">Hosting Tips</a></li>
                            </ul>
                        </section>
                    </amp-accordion>

                    <!-- End Dropdown -->
                </li>
                <li class="ampstart-nav-item ">
                    <a href="#" class="text-decoration-none block">Beauty</a>
                </li>
                <li class="ampstart-nav-item ">
                    <a href="#" class="text-decoration-none block">Shop</a>
                </li>
            </ul>
        </nav>
    </header>

</body>

</html>

@zipswich zipswich mentioned this issue Sep 6, 2019
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@zipswich