When the screen is small enough (such as mobile devices), will display an icon in the lower right corner of the screen, touch icon, it will expand the navigation menu, click on the menu page will scroll to the corresponding node, the effect is very cool.
HTML
Our navigation bar is an unordered list ul, which is contained within the nav.cd-vertical-nav and is linked to the corresponding node by connecting a # section1. The element button.cd-nav-trigger is used as a button on the small-screen device to trigger the menu. Section.cd-section is used to correspond to the contents of 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>
<li><a href="#section3"><span class="label">Help</span></a></li>
<li><a href="#section4"><span class="label">Share</span></a></li>
</ul>
</nav><!-- .cd-vertical-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">
<h1>Single-page vertical fixed navigation</h1>
<p><a href="http://www.goocode.net/css/341-use-css3-to-realize-single-page-vertical-fixed-navigation.html">See the article</a></p>
<a href="#section2" class="cd-scroll-down cd-image-replace">scroll down</a>
</div>
</section><!-- cd-section -->
<section id="section2" class="cd-section">
<div class="content-wrapper">
<h2>Events</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto numquam, totam iusto officia earum perferendis, culpa ad atque eveniet praesentium nobis expedita similique beatae tenetur. Distinctio vel tenetur, id cum.</p>
</div>
</section><!-- cd-section -->CSS
Once the HTML structure is deployed, we need to add the necessary CSS styles to the page. In very small screen (view width less than 800px), we will. Cd-nav-trigger and fixed position: fixed in the lower right corner of the page. When clicking or touching .cd-nav-trigger, we use CSS3 to make a smooth transition animation to animate 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);
} Then the big screen device, we first want to Modernizr to detect whether the current use of the device supports touch-screen, there will be non-touch-screen mouse on the slide effect. We set the vertical navigation bar on the right to a fixed height and width and fix it to the right of the page. The default right navigation shows a few dots, when the mouse slides on the dot, the navigation bar will open, you can select the navigation menu.
@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 pseudo-classes 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 here, but to achieve when you click the navigation menu page to do a smooth rolling effect requires the use of jQuery to achieve rolling animation. You can see the Vertical fixed navigation demo.
