Ascension 1.0 - Template Documentation

Navigation

Ascension has a navigation system that allows the users to create a nav menu and use it to jump to an external link or a section inside the page.

Basic menu usage

A menu can be easily created by using the class of .menu on a nav element, like this:

Code Preview 
						                            
						                                <nav class="menu" data-internal-nav>
						                                    <ul>
						                                        <li><a href="#why-ascension">Why Ascension?</a></li>
						                                        <li><a href="#a-complete-package">A Complete Package</a></li>
						                                        <li><a href="#our-users">Our Users</a></li>
						                                    </ul>                
						                                </nav>

In order for the menu to work properly, you need to set the following data attribute: data-internal-nav. This will tag the menu for the internal navigation JavaScript plugin and it will allow the user to jump to a specific section in the page by clicking the corresponding link. The section needs to have the same id as the one specified in the menu item href (without the hash sign) and needs to have the following data attribute: data-internal-nav-section. Here's what a typical page would look like:

Code Preview 
						                            
						                                <nav class="menu" data-internal-nav>
						                                    <ul>
						                                        <li><a href="#why-ascension">Why Ascension?</a></li>
						                                        <li><a href="#a-complete-package">A Complete Package</a></li>
						                                        <li><a href="#our-users">Our Users</a></li>
						                                    </ul>                
						                                </nav>
						
						                                <div class="wrapper section" id="why-ascension" data-internal-nav-section>
						                                    <h4>Why Ascension?</h4>
						                                    <p>Section content.</p>
						                                </div>
						
						                                <div class="wrapper section" id="a-complete-package" data-internal-nav-section>
						                                    <h4>A Complete Package</h4>
						                                    <p>Section content.</p>
						                                </div>
						
						                                <div class="wrapper section" id="our-users" data-internal-nav-section>
						                                    <h4>Our users</h4>
						                                    <p>Section content.</p>
						                                </div>

Why Ascension?

Section content.

A Complete Package

Section content.

Our users

Section content.

Please note that the jumping between sections is done via a scrolling animation. Unfortunately, that animation is not available inside this documentation but can be seen in the live demo pages.

Navigating with elements outside of a menu

In the example above you saw how to use a menu to navigate between sections, but that's not mandatory. You can use a link positioned anywhere to jump to a specific section. All you have to do is set data-internal-nav to its parent element and then use the id of the target section as the href for the link, like so:

						                
						                    <div class="well light-bg" data-internal-nav>
						                        <h3>Start a free trial now. No credit card is required.</h3>
						                        
						                        <a href="#top" class="button">Get Started</a>
						                    </div> <!-- end .well -->

Clicking the button in this example will navigate to the element with the id of top.

Using external links

There are cases when you don't want all the menu items to link to a section inside the landing page and, instead, you want them to open an external link. That's super easy to achieve by using the .external class on the link you wish to open the external link.

						                
						                    <nav class="menu" data-internal-nav>
						                        <ul>
						                            <li><a href="#product-overview">Product Overview</a></li>
						                            <li><a href="#features">Features</a></li>
						                            <li><a href="#pricing">Pricing</a></li>
						                            <li><a href="demo-register.html" class="button ghost pill external">Free Trial</a></li>
						                        </ul>                
						                    </nav>