Example of CSS3 single page vertical fixed navigation

More and more developers like to design a single page, especially a product introduction page, as an important part of the page associated with a simple navigation bar (node). In this example, a page is composed of several important nodes, on the side of the page will display a number of simple navigation far point, Slide dot will show the corresponding node part of the name, click the page will scroll to the corresponding node section, and the navigation bar position fixed unchanged.

When the screen is enough hours (such as mobile phone mobile device), will display an icon in the lower right corner of the screen, touch icon, will expand the navigation menu, click the Menu page will scroll to the corresponding node, the effect is very cool.

Our navigation bar is an unordered list of UL, contained within NAV.CD-VERTICAL-NAV, connected to the corresponding node through the connection A#section1. Element Button.cd-nav-trigger is used as a button on a small screen device to trigger a menu. Section.cd-section is the content that corresponds to the navigation node.
<nav class= "Cd-vertical-nav" >
<ul>
<li><a href= "#section1" class= "active" ><span class= "label" >intro</span></a></li >
<li><a href= "#section2" ><span class= "label" >Events</span></a></li>
<!--additional navigation items here-->
</ul>
</nav>

<button class= "Cd-nav-trigger cd-image-replace" >open navigation<span aria-hidden= "true" ></span> </button>

<section id= "Section1" class= "Cd-section" >
<div class= "Content-wrapper" >
<a href= "#section2" class= "Cd-scroll-down cd-image-replace" >scroll down</a>
</div>
</section>

<section id= "Section2" class= "Cd-section" >
<div class= "Content-wrapper" >
<!--section content-->
</div>
</section>
Css
Once the HTML structure is deployed, we need to add the necessary CSS styles to the page. Under very small screens (view width is less than 800px), we fixed the position of. Cd-nav-trigger and <nav> in the lower-right corner of the page. When clicked or touched. Cd-nav-trigger, we use CSS3 to make a smooth transition animation that has an animation that expands the navigation menu.
. cd-nav-trigger {
Display:block;
position:fixed;
Z-index:2;
bottom:30px;
right:5%;
}

. cd-vertical-nav {
position:fixed;
Z-index:1;
right:5%;
bottom:30px;
Transform:scale (0);
Transform-origin:right Bottom;
Transition:transform 0.2s;
}
. cd-vertical-nav.open {
Transform:scale (1);
}
So on the big screen device, we first have to Modernizr to detect whether the current device is supporting the touch screen, on the non touch screen will have the effect of the mouse slide. We set the vertical navigation bar on the right to a fixed height and width and fixed it on the right side of the page. The default right-hand navigation shows several dots, and when the mouse hovers over the dots, the navigation bar opens and the navigation menu is available.
@media only screen and (min-width:800px) {
. cd-vertical-nav {
right:0;
top:0;
HEIGHT:100VH;
width:90px;
}
. cd-vertical-nav::before {
/* This is the navigation background * *
Content: ';
Position:absolute;
top:0;
left:0;
width:100%;
height:100%;
Background:rgba (0, 0, 0, 0.8);
Transform:translatex (100%);
Transition:transform 0.4s;
}
. No-touch. Cd-vertical-nav:hover::before,
. Touch. Cd-vertical-nav::before {
Transform:translatex (0);
}
. Cd-vertical-nav. Label {
Display:block;
Transform:translatex (100%);
Transition:transform 0.4s;
}
. No-touch. Cd-vertical-nav:hover. Label,
. Touch. Cd-vertical-nav. label {
Transform:translatex (0);
}
}
To create dots and icons, you can use:: After and:: Before to add a pseudo class to the a element.
@media only screen and (min-width:800px) {
. Cd-vertical-nav a {
position:relative;
Padding:3em 0 0;
Margin:1.4em Auto;
}
. Cd-vertical-nav A::before,
. Cd-vertical-nav A::after {
/* Used to create the filled circle and the background icon * *
Content: ';
Position:absolute;
left:50%;
transition:transform 0.4s 0s;
}
. Cd-vertical-nav A::before {
/* Filled Circle * *
top:0;
height:32px;
width:32px;
border-radius:50%;
Background: #eaf2e3;
Transform:translatex ( -50%) scale (0.25);
}
. Cd-vertical-nav A::after {
* Icon * *
top:8px;
height:16px;
width:16px;
Background:url (.. /img/cd-nav-icons.svg) No-repeat;
Transform:translatex ( -50%) scale (0);
}
. No-touch. Cd-vertical-nav:hover A::before,
. No-touch. Cd-vertical-nav:hover A::after,
. Touch. Cd-vertical-nav li:nth-of-type (n) a::before,
. Touch. Cd-vertical-nav li:nth-of-type (n) a::after {
Transform:translatex ( -50%) scale (1);
}
}
Of course, the effect has been achieved, but to achieve the click Navigation menu when the page to do smooth scrolling effect will need to use jquery to achieve scrolling animation. This example in the download source package has been packaged with all the jquery code included, please download the view, this article is no longer described.