Documentation and examples for a pure css scrolling navigation: Google AMP Navigation · One page Scrolling Navigation.
Scrolling Nav is a navigation for creating smooth scrolling, one page websites.
One page scroll navigation is a normal navigation except the nav item switches on scrolling not only clicking. We will add option to click to a link too and also slow switch to look nicer. It is what commonly used in actual websites rather than quick jump sections on navigation menu.
The purpose of adding “scrolling” navigation is to quickly jump to different sections of your page. So first, we have to add content so that our page is long enough to scroll to different sections.
We can add whatever content you’d like, but the important thing is for each section to have a unique ID that will serve as the “anchor” for the anchor links in our navigation, and for the sections to be vertically long enough that we can scroll in between them.
Required scripts
<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>Search and replace ...
<input type="checkbox" id="mobile">with this
<input on="change:AMP.setState({mobileMenu:{chkMobile : "main-menu"}})" [checked]="mobileMenu.chkMobile == "main-menu" ? checked : "" " type="checkbox" id="mobile"><header class="mega-menu">
<div class="container">
<div class="row">
<div class="header">
<div class="container">
<nav class="main-menu" id="main-menu">
<!-- Mobile Menu -->
<label for="mobile" id="mobile-menu">
<a href="#" title="Google AMP Navigation · One page scrolling nav">
<amp-img
alt="Google AMP Navigation · One page scrolling nav"
title="Google AMP Navigation · One page scrolling nav"
src="https://www.ampcssframework.com/assets/img/logo/logo.webp"
width="21"
height="24"
class="img-logo">
</amp-img>
<span class="logo">Google AMP <strong>CSS</strong> FRAMEWORK</span>
</a>
<span class="main-menu-dropdown-icon">
<i class="hamburger"></i>
</span>
</label>
<input on="change:AMP.setState({mobileMenu:{chkMobile : "main-menu"}})" [checked]="mobileMenu.chkMobile == "main-menu" ? checked : "" " type="checkbox" id="mobile">
<!-- Main menu -->
<ul class="main-menu">
<!-- Left links -->
<li class="main-menu-logo">
<a href="#" title="Google AMP Navigation · One page scrolling nav">
<amp-img
alt="Google AMP Navigation · One page scrolling nav"
title="Google AMP Navigation · One page scrolling nav"
src="https://www.ampcssframework.com/assets/img/logo/logo.webp"
width="28"
height="32"
class="img-logo">
</amp-img>
<span class="logo">Google AMP <strong>CSS</strong> FRAMEWORK</span>
</a>
</li>
<!-- /main-menu -->
</nav>
</div>
</div>
</div>
</div>
</header>Let's create a target link targetOne
<a on="tap:AMP.setState({mobileMenu:{chkMobile : ""}}), targetOne.scrollTo(duration=1000)" title="Google AMP one page scrolling nav · Target 1">Target 1</a>Let's create a target section targetOne
<section class="target">
<a class="target-anchor" id="targetOne" title="One page scrolling nav target one"></a>
<amp-position-observer on="enter:showAnim.start" layout="nodisplay"></amp-position-observer>
...
</section>That's it ...
<header class="mega-menu">
<div class="container">
<div class="row">
<div class="header">
<div class="container">
<nav class="main-menu" id="main-menu">
<!-- Mobile Menu -->
<label for="mobile" id="mobile-menu">
<a href="#" title="Google AMP Navigation · One page scrolling nav">
<amp-img
alt="Google AMP Navigation · One page scrolling nav"
title="Google AMP Navigation · One page scrolling nav"
src="https://www.ampcssframework.com/assets/img/logo/logo.webp"
width="21"
height="24"
class="img-logo">
</amp-img>
<span class="logo">Google AMP <strong>CSS</strong> FRAMEWORK</span>
</a>
<span class="main-menu-dropdown-icon">
<i class="hamburger"></i>
</span>
</label>
<input on="change:AMP.setState({mobileMenu:{chkMobile : "main-menu"}})" [checked]="mobileMenu.chkMobile == "main-menu" ? checked : "" " type="checkbox" id="mobile">
<!-- Main menu -->
<ul class="main-menu">
<!-- Left links -->
<li class="main-menu-logo">
<a href="#" title="Google AMP Navigation · One page scrolling nav">
<amp-img
alt="Google AMP Navigation · One page scrolling nav"
title="Google AMP Navigation · One page scrolling nav"
src="https://www.ampcssframework.com/assets/img/logo/logo.webp"
width="28"
height="32"
class="img-logo">
</amp-img>
<span class="logo">Google AMP <strong>CSS</strong> FRAMEWORK</span>
</a>
</li>
<!-- Left links -->
<li>
<a on="tap:AMP.setState({mobileMenu:{chkMobile : ""}}), targetOne.scrollTo(duration=1000)" title="Google AMP one page scrolling nav · Target 1">Target 1</a>
</li>
<!-- Right links -->
<li class="main-menu-right">
<a on="tap:AMP.setState({mobileMenu:{chkMobile : ""}}), targetTwo.scrollTo(duration=1000)" title="Google AMP one page scrolling nav · Target 2">Target 2</a>
</li>
</ul>
<!-- /main-menu -->
</nav>
</div>
</div>
</div>
</div>
</header>