Beginner Foundation: A navigation bar implemented with JS tools

Article Introduction: as a beginner foundation, let's look at several navigation bars that implement effects with JavaScript tools. I'll also introduce another useful tool for you to be a better foundation developer.

Whether a front-end frame is excellent, see how the frame handles the navigation bar. As a beginner foundation, let's look at several navigation bars that implement effects with JavaScript tools. I'll also introduce another useful tool for you to be a better foundation developer.

Section Plugin

Foundation provides one of the best JavaScript Plug-ins is the section: Similar to tabs selectively, displaying a piece of page content at the same time. Section mainly appears in several forms of navigation, such as accordion navigation, tabs, vertical and horizontal navigation.

See the following code:

<div
					class="section-container auto"
					data-section>
			<section>
			<p
					class="title"
					data-section-title><a
					href="#">Section 1</a></p>
			<div
					class="content"
					data-section-content>
			<p>Content of section 1.</p>
			</div>
			</section>
			<section>
			<p
					class="title"
					data-section-title><a
					href="#">Section 2</a></p>
			<div
					class="content"
					data-section-content>
			<p>Content of section 2.</p>
			</div>
			</section>
			</div>
		

This code may be more complicated than the previous chapters, so let me explain:

Regardless of which form of section you are going to create, start with the <div class="section-container auto" data-section> data-section attribute that declares which section we are using, class：auto indicating the default style of using foundation: accordion. If you want to use the other style, you can change it, auto tabs accordion vertical-nav or horizontal-nav . Finally data-section , assign the same value as class to confirm that you are using a specific form section .

Next you need to add <section> a block with a title link to the link to the title content:

<section>
			<p
					class="title"
					data-section-title><a
					href="#panel1">Section 1</a></p>
			<div
					class="content"
					data-section-content>
			<p>Content of section 1.</p>
			</div>
			</section>
		

From the above code you can see Section that each has a <section> container containing. There is also a <p> tag that is added class as a title <a> link to the corresponding content. Next contains section to display the content block, need class to add as content , repeat multiple <section> content can create multiple Section .

Note: class When you add a name vertical-nav or, a horizontal-nav vertical or horizontal navigation bar is displayed normally on a large screen, but when you encounter a small screen, it automatically converts to accordin (accordion) style navigation.

Deep links

Let's say you want to link to the second one by default section , but when you open the page, it still shows the first section content by default. No need to tangle! Foundation itself provides a solution, and the solution is to add a new attribute value: The data-options=”deep_linking:true” section container outside. When the user browses to an anchor point, url for example http://www.website.com/#section3 , it #section3 is the anchor point, and then the display is loaded section .

<div
					class="section-container auto"
					data-section
					data-options="deep_linking: true">
			<section>
			<p
					class="title"
					data-section-title><a
					href="#section1">Section 1</a></p>
			<div
					class="content"
					data-slug="section1"
					data-section-content>
			<p>Content of section 1.</p>
			</div>
			</section>
			<section>
			<p
					class="title"
					data-section-title><a
					href="#section2">Section 2</a></p>
			<div
					class="content"
					data-slug="section2"
					data-section-content>
			<p>Content of section 2.</p>
			</div>
			</section>
			</div>
		

From the above code, it should be noted that <div class="content" data-slug="section1" data-section-content> div a new attribute is added to this content data-slug , which is used to tell foundation which to display first when loading the page Section .

Side Navigation

Foundation (a sort of vertical navigation) is usually included in the content Div. Its HTML structure is also very simple, and you can use the divider (dividing line) partition. Look at the tags needed for the following code:

<ul class= "Side-nav" > <li class= "Active" ><
					A href= "#" >link 1</a></li> <li><a href= "#" >link 2</a></li>
					class= "Divider" ></li> <li><a href= "#" >link 3</a></li> <li><a href= "#" >link 4</a></li> </ul>  

Code shows a standard unordered list that contains a series of children with inline links. Whatever you want, add the key Class:side-nav to ul , and then add the class:active in Li Indicates the currently displayed child item link. You can add a section of <li class= "divider" ></li> code to display the dividing line if you want to make a regional molecule.

Child navigation

Foundation are often used to filter and select specific content. However, the child navigation does not use the unordered list as before, but rather uses the definition lists. The advantage is to selectively use a description tag to define a specific term containing a link. There is no use divider (dividing line), but still use class:active , see Code as follows:

<dl
					class="sub-nav">
			<dt>Filter:</dt>
			<dd
					class="active"><a
					href="#">All</a></dd>
			<dd><a
					href="#">Photos</a></dd>
			<dd><a
					href="#">Videos</a></dd>
			<dd><a
					href="#">Music</a></dd>
			</dl>
		

Page-Navigation

Paging navigation is also a kind of navigation; in fact, pagination should be included in the <nav> Elements, foundation use which tags to implement pagination, see the following code:

<ul
					class="pagination">
			<li
					class="arrow unavailable"><a
					href="">«</a></li>
			<li
					class="current"><a
					href="">1</a></li>
			<li><a
					href="">2</a></li>
			<li><a
					href="">3</a></li>
			<li><a
					href="">4</a></li>
			<li
					class="unavailable"><a
					href="">…</a></li>
			<li><a
					href="">12</a></li>
			<li><a
					href="">13</a></li>
			<li
					class="arrow"><a
					href="">»</a></li>
			</ul>
		

The left and right sides of the page are usually indicated by arrows, so you need to use class:arrow the left-hand arrow on the left side: « or even the right ‹ &larr； arrow: » , or › even → , More character encodings to unicode-table.com to find.

Paging navigation allows us to use class: unavailable and current , respectively, to indicate an unavailable state and a current usage state.

Adding the above code to a content management system like WordPress is fairly straightforward.

Hint: You can add a page to the ul center of the pager, as class:pagination-centered if foundation all elements, the paging function is responsive and easy to change the style.

A useful tool

Using a responsive front-end framework, such as foundation, is a quick way to make your project (page) appear well on all devices, but the test page is still a tedious task. To ease the test, I developed a tool called Respondr, which can be displayed on smartphones, tablets and ordinary computers as soon as the URL is entered, and can quickly detect deficiencies on the page.

Next announcement

So far, we've learned about grid systems, block grids, Orbit sliders, section plug-ins, and three forms of navigation, and next we'll learn about top-bar plug-ins, breadcrumbs, and other useful tools.

Translator's Sign Language: the entire translation is carried out according to the original line, and in the process of translation slightly individual understanding of the technology. If the translation has the wrong place, but also please peer friends pointing. Thank you!

If you want to reprint, please indicate the source:

Original English: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/foundation-for-beginners-navigation/

Chinese translation: http://www.w3cplus.com/css/foundation-for-beginners-navigation.html