.contenedor
form
- var pageTitle=['Home', 'Features', 'Adding pages to this template', '+More', 'About', 'Dummy page', 'Dummy page'] //Add pages by adding title here
- var content = [
- 'Pure CSS One page Vertical navigation',
- 'two',
- 'three',
- 'four',
- 'five'
- ]
- for( var n = 0; n < pageTitle.length; n++)
if n==0
input(type="radio" id="Slide1" name="slider" titulo=""+pageTitle[0] autofocus checked)
else
input(type="radio" id="Slide"+[n+1] name="slider" titulo=""+pageTitle[n])
.labels
- for( var n = 0; n < pageTitle.length; n++ )
if n==0
label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide")
.content: h1 <strong>Pure CSS</strong> one page vertical navigation
.icon
span: i.fa.fa-keyboard-o
span Use keyboard
else if n==1
label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide")
.content
h1 #{pageTitle[n]}
.block
span
i.fa.fa-hashtag
br
| <strong>No JS</strong>
br
| CSS Rules!
span
i.fa.fa-keyboard-o
br
| <strong>Pure CSS keyboard navigation</strong>
br
| Yep, no kidding
span
i.fa.fa-bars
br
| <strong>Lateral menu</strong>
span
i.fa.fa-codepen
br
| <strong>Autogenerate pages</strong>
br
| Using Jade & SASS
else if n==2
label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide")
.content
h1 #{pageTitle[n]}
.block: ol
li Add the pages title in the pageTitle array in the HTML editor to generate pages
li Add the number of pages in the $npages variable in the CSS editor
else if n==3
label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide")
.content
h1 #{pageTitle[n]}
.block
span: a(href="https://codepen.io/hrtzt/pen/NPZKRN" target="_blank") One Page Navigation CSS Menu
span: a(href="https://codepen.io/hrtzt/pen/YPoeWd" target="_blank") The simplest CSS switch
span: a(href="https://codepen.io/hrtzt/pen/JdYaEZ" target="_blank") Animated cube slider CSS only
span: a(href="https://codepen.io/hrtzt/pen/vGqEJO" target="_blank") Google photos album view with only CSS
else if n==4
label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide")
.content
h1 #{pageTitle[n]}
.block
span
a(href="https://dribbble.com/hrtzt" target="_blank")
i.fa.fa-dribbble
| Dribbble me
span
a(href="https://twitter.com/hrtzt" target="_blank")
i.fa.fa-twitter
| Tweet me
else
label(for="Slide"+[n+1] id="Slide"+[n+1])
.content
h1 #{pageTitle[n]}
.block Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto numquam, totam iusto officia earum perferendis
$npages: 7 /* This is the number of pages added in "pageTitle" in the HTML editor */
$bg: #2B2B38
$bg-odd: #F5004F
/* The basic stuff to make it work */
.contenedor
width: 100vw
height: 100vh
background: deeppink
position: relative
display: flex
align-items: center
form
box-sizing: border-box
text-align: center
padding: 22px
display: inline-flex
flex-direction: column
position: fixed
height: 100vh
justify-content: center
input
height: 0
margin: 12px 0
z-index: 1
&:checked
outline: 0
border: 0
&:before
content: ""
position: absolute
display: inline-block
width: 8px
height: 8px
border: 1px solid rgba(255, 255, 255, 0.81)
border-radius: 11px
cursor: pointer
transition: all .25s linear
&:checked:before
background-color: white
&:after
content: ""attr(titulo)""
position: relative
left: 30px
opacity: 0
color: white
font-size: 9px
display: block
min-width: 80px
transition: all .25s linear
&:checked:after
opacity: 1
left: 20px
&:hover:after:not(label)
opacity: 1
@for $i from 1 through $npages
&:nth-of-type(#{$i}):checked ~ .labels label
transform: translateY(-#{($i - 1) * 100%})
.labels
position: absolute
top: 0
left: 0
width: 100vw
height: 100vh
display: flex
flex-direction: column
label
min-width: 100vw
min-height: 100vh
display: flex
flex-direction: column
justify-content: center
align-items: center
background-color: $bg
z-index: 0
transition: all .75s cubic-bezier(0.75, 0.25, 0, 1.05)
&:nth-child(odd)
background-color: $bg-odd
color: white !important
/* Fancy style */
body
font:
family: 'Open sans', sans-serif
size: 16px
weight: 100
color: white
.content
width: 100%
box-sizing: border-box
padding: 0 110px
.block
width: inherit
font:
size: 11px
weight: 400
line-height: 1.5
margin: 42px 0
display: flex
justify-content: center
span
margin: 0 42px
i
margin-bottom: 22px
@extend span
&:before
font-size: 30px
.Slide:nth-child(even) .content .block
color: #717171
.icon
position: absolute
bottom: 30px
left: 0
right: 0
font-size: 11px
text-align: center
line-height: 1.5
display: flex
flex-direction: column
i
font-size: 22px
#Slide5 .content .block
flex-direction: column
i
margin: 0 12px
vertical-align: middle
strong
font-weight: 400
h1
text-transform: uppercase
ol
text-align: left
list-style-type: decimal
a
text-decoration: none
color: inherit
transition: all .25s linear
&:hover
color: rebeccapurple
/*
@author Alberto Hartzet
*
*I wouldn't mind if you use this piece of code in your project as long
as you give credit with a link to my site. www.albertohartzet.com
*
Licence (CC BY-NC-SA 4.0) http://creativecommons.org/licenses/by-nc-sa/4.0/
*/
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.