我在我的网站上使用html主题，我需要在左侧添加一个固定的垂直菜单。
我已经尝试了this tutorial，（demo），它使用了一个可能与我使用的不同的现代化javascript。 ：Modernizr的Tutorial Version，＆amp;我的html theme's version
我按照教程操作，只将NAV div添加到我的html主题（没有sections）...我无法显示导航，如演示所示。 ..
编辑：
我已经编辑了片段...现在侧面菜单正在显示，但是它在右侧，并且有子弹+点。有人可以帮助我取出子弹，并且只保留点（深粉色点）...此外，菜单可以放在左边吗？
此外，有关可以从css安全删除所有组件的任何信息？我不确定是否所有这些组件都是必需的......虽然菜单没有显示没有这个更新的css ..我最初从教程中复制了css，现在才复制了确切的内容来自演示源的style.css ......
/* --------------------------------
Primary style
-------------------------------- */
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 100%;
font-family: "Ubuntu", sans-serif;
color: #3e3947;
background-color: white;
}
body, html {
height: 100%;
}
a {
color: #3e3947;
text-decoration: none;
}
img {
max-width: 100%;
}
/* --------------------------------
Modules - reusable parts of our design
-------------------------------- */
.cd-img-replace {
/* replace text with a background-image */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
/* --------------------------------
xnugget info
-------------------------------- */
.cd-nugget-info {
text-align: center;
position: absolute;
width: 100%;
height: 50px;
line-height: 50px;
top: 0;
left: 0;
}
.cd-nugget-info a {
position: relative;
font-size: 14px;
color: #d88683;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.no-touch .cd-nugget-info a:hover {
opacity: .8;
}
.cd-nugget-info span {
vertical-align: middle;
display: inline-block;
}
.cd-nugget-info span svg {
display: block;
}
.cd-nugget-info .cd-nugget-info-arrow {
fill: #d88683;
}
/* --------------------------------
xcarbonads
-------------------------------- */
#carbonads-container {
position: fixed;
right: 40px;
top: 40px;
width: 180px;
display: none;
z-index: 1;
}
#carbonads-container .close-carbon-adv {
display: inline-block;
position: absolute;
top: 0;
right: 100%;
background: rgba(0, 0, 0, 0.8);
text-indent: 100%;
overflow: hidden;
width: 32px;
height: 32px;
border-radius: 3px 0 0 3px;
}
#carbonads-container .close-carbon-adv:hover {
background: #000;
}
#carbonads-container .close-carbon-adv::after, #carbonads-container .close-carbon-adv::before {
content: '';
background-color: #fff;
height: 2px;
width: 14px;
position: absolute;
top: 14px;
left: 9px;
}
#carbonads-container .close-carbon-adv::after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#carbonads-container .close-carbon-adv::before {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#carbonads-container .carbonad {
background: rgba(255, 255, 255, 0.9);
border: none;
width: 100%;
height: auto;
padding: 14px;
text-align: center;
border-radius: 0 3px 3px 3px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
#carbonads-container .carbonad .carbonad-image img {
margin: 0 0 10px 10px;
}
#carbonads-container .carbonad .carbonad-text, #carbonads-container .carbonad .carbonad-tag {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
#carbonads-container .carbonad .carbonad-text {
display: block;
width: 100%;
padding: 0;
}
#carbonads-container .carbonad .carbonad-text a {
color: #d88683;
font-size: 13px;
font-weight: bold;
}
.no-touch #carbonads-container .carbonad .carbonad-text a:hover {
text-decoration: underline;
}
#carbonads-container .carbonad .carbonad-tag {
margin-top: 5px;
color: #3a393f;
}
#carbonads-container .carbonad .carbonad-tag a {
color: #3a393f;
}
#carbonads-container .carbonad .carbonad-tag a:hover {
color: #d88683;
}
@media only screen and (min-width: 1170px) {
#carbonads-container {
display: block;
}
}
/* --------------------------------
Main components
-------------------------------- */
.cd-section {
min-height: 100%;
position: relative;
padding: 2em 0;
}
.cd-section:nth-of-type(odd) {
background-color: #3e3947;
}
.cd-section:nth-of-type(odd) p {
color: #898099;
}
.cd-section:nth-of-type(even) {
background-color: #745360;
}
.cd-section:nth-of-type(even) p {
color: #bda3ad;
}
.cd-section h1, .cd-section p {
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 90%;
max-width: 768px;
text-align: center;
}
.cd-section h1 {
color: white;
font-weight: 300;
text-transform: uppercase;
font-size: 20px;
font-size: 1.25rem;
}
.cd-section p {
line-height: 1.6;
}
@media only screen and (min-width: 768px) {
.cd-section h1 {
font-size: 30px;
font-size: 1.875rem;
}
.cd-section p {
font-size: 20px;
font-size: 1.25rem;
line-height: 2;
}
}
.cd-scroll-down {
position: absolute;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 20px;
width: 38px;
height: 44px;
background: url("../img/cd-arrow-bottom.svg") no-repeat center center;
}
/* No Touch devices */
.cd-nav-trigger {
display: none;
}
.no-touch #cd-vertical-nav {
position: fixed;
right: 40px;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
}
.no-touch #cd-vertical-nav li {
text-align: right;
}
.no-touch #cd-vertical-nav a {
display: inline-block;
/* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.no-touch #cd-vertical-nav a:after {
content: "";
display: table;
clear: both;
}
.no-touch #cd-vertical-nav a span {
display: inline-block;
float: right;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-o-transform: scale(0.6);
transform: scale(0.6);
}
.no-touch #cd-vertical-nav a:hover span {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.no-touch #cd-vertical-nav a:hover .cd-label {
opacity: 1;
}
.no-touch #cd-vertical-nav a.is-selected .cd-dot {
background-color: white;
}
.no-touch #cd-vertical-nav .cd-dot {
position: relative;
top: 8px;
height: 12px;
width: 12px;
border-radius: 50%;
background-color: #d88683;
-webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
-moz-transition: -moz-transform 0.2s, background-color 0.5s;
transition: transform 0.2s, background-color 0.5s;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.no-touch #cd-vertical-nav .cd-label {
position: relative;
margin-right: 10px;
padding: .4em .5em;
color: white;
font-size: 14px;
font-size: 0.875rem;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
opacity: 0;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
/* Touch devices */
.touch .cd-nav-trigger {
display: block;
z-index: 2;
position: fixed;
bottom: 30px;
right: 5%;
height: 44px;
width: 44px;
border-radius: 0.25em;
background: rgba(255, 255, 255, 0.9);
}
.touch .cd-nav-trigger span {
position: absolute;
height: 4px;
width: 4px;
background-color: #3e3947;
border-radius: 50%;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.touch .cd-nav-trigger span::before, .touch .cd-nav-trigger span::after {
content: '';
height: 100%;
width: 100%;
position: absolute;
left: 0;
background-color: inherit;
border-radius: inherit;
}
.touch .cd-nav-trigger span::before {
top: -9px;
}
.touch .cd-nav-trigger span::after {
bottom: -9px;
}
.touch #cd-vertical-nav {
position: fixed;
z-index: 1;
right: 5%;
bottom: 30px;
width: 90%;
max-width: 400px;
max-height: 90%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
-ms-transform-origin: right bottom;
-o-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
border-radius: 0.25em;
background-color: rgba(255, 255, 255, 0.9);
}
.touch #cd-vertical-nav a {
display: block;
padding: 1em;
border-bottom: 1px solid rgba(62, 57, 71, 0.1);
}
.touch #cd-vertical-nav a span:first-child {
display: none;
}
.touch #cd-vertical-nav a.is-selected span:last-child {
color: #d88683;
}
.touch #cd-vertical-nav.open {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.touch #cd-vertical-nav.open + .cd-nav-trigger {
background-color: transparent;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span {
background-color: rgba(62, 57, 71, 0);
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
background-color: #3e3947;
height: 3px;
width: 20px;
border-radius: 0;
left: -8px;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 1px;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
bottom: 0;
}
.touch #cd-vertical-nav li:last-child a {
border-bottom: none;
}
@media only screen and (min-width: 768px) {
.touch .cd-nav-trigger, .touch #cd-vertical-nav {
bottom: 40px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/27854284/Stuff/modernizr.js"></script>
<script src="http://codyhouse.co/demo/vertical-fixed-navigation/js/main.js"></script>
<nav id="cd-vertical-nav">
<ul>
<li>
<a href="#section1" data-number="1">
<span class="cd-dot"></span>
<span class="cd-label">Intro</span>
</a>
</li>
<li>
<a href="#section2" data-number="2">
<span class="cd-dot"></span>
<span class="cd-label">About</span>
</a>
</li>
<li>
<a href="#section3" data-number="3">
<span class="cd-dot"></span>
<span class="cd-label">Features</span>
</a>
</li>
<li>
<a href="#section4" data-number="4">
<span class="cd-dot"></span>
<span class="cd-label">Portfolio</span>
</a>
</li>
<li>
<a href="#section5" data-number="5">
<span class="cd-dot"></span>
<span class="cd-label">Pricing</span>
</a>
</li>
<li>
<a href="#section6" data-number="6">
<span class="cd-dot"></span>
<span class="cd-label">Contact</span>
</a>
</li>
</ul>
</nav>
<a class="cd-nav-trigger cd-img-replace">Open navigation<span></span></a>
答案 0 :(得分：4)
这里不需要添加js ...菜单是基于css查看我的代码demo
body{
background-color:#3E3947;
}
#cd-vertical-nav {
position: fixed;
right: 40px;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
}
#cd-vertical-nav li {
text-align: right;
list-style:none;
}
#cd-vertical-nav a {
display: inline-block;
/* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#cd-vertical-nav a:after {
content: "";
display: table;
clear: both;
}
#cd-vertical-nav a span {
display: inline-block;
float: right;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-o-transform: scale(0.6);
transform: scale(0.6);
}
#cd-vertical-nav a:hover span {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#cd-vertical-nav a:hover .cd-label {
opacity: 1;
}
#cd-vertical-nav a.is-selected .cd-dot {
background-color: white;
}
#cd-vertical-nav .cd-dot {
position: relative;
top: 8px;
height: 12px;
width: 12px;
border-radius: 50%;
background-color: #d88683;
-webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
-moz-transition: -moz-transform 0.2s, background-color 0.5s;
transition: transform 0.2s, background-color 0.5s;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#cd-vertical-nav .cd-label {
position: relative;
margin-right: 10px;
padding: .4em .5em;
color: white;
font-size: 14px;
font-size: 0.875rem;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
opacity: 0;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
/*********************************RIGHT SIDE *************************************/
#cd-vertical-nav_right {
position: fixed;
left: 40px;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
}
#cd-vertical-nav_right li {
text-align: left;
list-style:none;
}
#cd-vertical-nav_right a {
display: inline-block;
/* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#cd-vertical-nav_right a:after {
content: "";
display: table;
clear: both;
}
#cd-vertical-nav_right a span {
display: inline-block;
float: left;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-o-transform: scale(0.6);
transform: scale(0.6);
}
#cd-vertical-nav_right a:hover span {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#cd-vertical-nav_right a:hover .cd-label {
opacity: 1;
}
#cd-vertical-nav_right a.is-selected .cd-dot {
background-color: white;
}
#cd-vertical-nav_right .cd-dot {
position: relative;
top: 8px;
height: 12px;
width: 12px;
border-radius: 50%;
background-color: #d88683;
-webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
-moz-transition: -moz-transform 0.2s, background-color 0.5s;
transition: transform 0.2s, background-color 0.5s;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#cd-vertical-nav_right .cd-label {
position: relative;
margin-right: 10px;
padding: .4em .5em;
color: white;
font-size: 14px;
font-size: 0.875rem;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
opacity: 0;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}<nav id="cd-vertical-nav">
<ul>
<li>
<a data-number="1" href="#section1" class="is-selected">
<span class="cd-dot"></span>
<span class="cd-label">Intro</span>
</a>
</li>
<li>
<a data-number="2" href="#section2" class="">
<span class="cd-dot"></span>
<span class="cd-label">About</span>
</a>
</li>
<li>
<a data-number="3" href="#section3" class="">
<span class="cd-dot"></span>
<span class="cd-label">Features</span>
</a>
</li>
<li>
<a data-number="4" href="#section4" class="">
<span class="cd-dot"></span>
<span class="cd-label">Portfolio</span>
</a>
</li>
<li>
<a data-number="5" href="#section5">
<span class="cd-dot"></span>
<span class="cd-label">Pricing</span>
</a>
</li>
<li>
<a data-number="6" href="#section6">
<span class="cd-dot"></span>
<span class="cd-label">Contact</span>
</a>
</li>
</ul>
</nav>
<nav id="cd-vertical-nav_right">
<ul>
<li>
<a data-number="1" href="#section1" class="is-selected">
<span class="cd-dot"></span>
<span class="cd-label">Intro</span>
</a>
</li>
<li>
<a data-number="2" href="#section2" class="">
<span class="cd-dot"></span>
<span class="cd-label">About</span>
</a>
</li>
<li>
<a data-number="3" href="#section3" class="">
<span class="cd-dot"></span>
<span class="cd-label">Features</span>
</a>
</li>
<li>
<a data-number="4" href="#section4" class="">
<span class="cd-dot"></span>
<span class="cd-label">Portfolio</span>
</a>
</li>
<li>
<a data-number="5" href="#section5">
<span class="cd-dot"></span>
<span class="cd-label">Pricing</span>
</a>
</li>
<li>
<a data-number="6" href="#section6">
<span class="cd-dot"></span>
<span class="cd-label">Contact</span>
</a>
</li>
</ul>
</nav>
答案 1 :(得分：2)
我得到了答案： -
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
function call(){
var $navLinks = $('#cd-vertical-nav a');
var windowHeight = $(window).height();
$navLinks.on('click', function(){
$navLinks.removeClass('is-selected');
$(this).addClass('is-selected');
});
$('section').each(function(){
var $this = $(this);
$(document).scroll(function(){
var scrollTop = $(window).scrollTop();
var offset = $this.offset().top;
var height = $this.outerHeight();
if (offset + height <= scrollTop || offset >= scrollTop + (windowHeight - (height / 2))) {
return;
}
var selector = '[href="#' + $this.prop('id') + '"]';
var $menuItem = $navLinks.filter(selector);
$navLinks.removeClass('is-selected');
$menuItem.addClass('is-selected');
});
});
}
</script>
<style type="text/css">
body{
background-color:#3E3947;
}
#cd-vertical-nav {
position: fixed;
right: 40px;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 200;
}
#cd-vertical-nav li {
text-align: right;
list-style:none;
}
#cd-vertical-nav a {
display: inline-block;
/* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#cd-vertical-nav a:after {
content: "";
display: table;
clear: both;
}
#cd-vertical-nav a span {
display: inline-block;
float: right;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-o-transform: scale(0.6);
transform: scale(0.6);
}
#cd-vertical-nav a:hover span {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#cd-vertical-nav a:hover .cd-label {
opacity: 1;
}
#cd-vertical-nav a.is-selected .cd-dot {
background-color: white;
}
#cd-vertical-nav .cd-dot {
position: relative;
top: 8px;
height: 12px;
width: 12px;
border-radius: 50%;
background-color: #d88683;
-webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
-moz-transition: -moz-transform 0.2s, background-color 0.5s;
transition: transform 0.2s, background-color 0.5s;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#cd-vertical-nav .cd-label {
position: relative;
margin-right: 10px;
padding: .4em .5em;
color: white;
font-size: 14px;
font-size: 0.875rem;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
opacity: 0;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
header {
background: #f0f0f0;
width: 100%;
height: 86px;
position: fixed; /* This helps in moving the navigation bar across the whole screen */
top: 0;
left: 0;
z-index: 100; /* So that it comes to the top of all the other elements */
opacity: 1;
}
#logo { /* Very good way of using/positioning the image or the logo */
margin: 20px;
float: left;
width: 200px;
height: 60px;
background: url(//static1.squarespace.com/static/5278d304e4b085eb5a856b0f/t/528e5734e4b036f36b316a4a/1426667739619/?format=400w) no-repeat center;
}
nav { /* Note, here the nav is floated to the right and below each li is floated to the left */
float: right;
padding: 0px 30px 0px 0;
}
ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
padding: 20px;
}
nav ul li a {
font-weight: bold;
color: black;
}
nav ul li a:hover {
color: #808080;
}
nav ul li ul {
padding: 0;
/* position: absolute;*/
top: 48px;
left: 0;
width: 68px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
cursor: pointer;
}
nav ul li ul li {
background: #fff;
border: 1px solid #f0f0f0;
padding: 15% 40%;
margin: 0 2%;
width: 100%;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
/*nav ul li ul li a {
background: #fff;
width: 100%;
}*/
nav ul li ul li:hover { background: #666; }
nav ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
.current {
color: #808080;
}
/*********************************RIGHT SIDE *************************************/
</style>
</head>
<body onload="call()">
<header>
<a href="#" id="logo"></a>
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="#" class="current">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">PRODUCT</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Illustrations</a></li>
</ul>
</li>
<li><a href="#">CLIENTS</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</nav>
</header>
<div id="cd-vertical-nav">
<ul>
<li>
<a data-number="1" href="#section1" class="is-selected">
<span class="cd-dot"></span>
<span class="cd-label">Intro</span>
</a>
</li>
<li>
<a data-number="2" href="#section2" class="">
<span class="cd-dot"></span>
<span class="cd-label">About</span>
</a>
</li>
<li>
<a data-number="3" href="#section3" class="">
<span class="cd-dot"></span>
<span class="cd-label">Features</span>
</a>
</li>
<li>
<a data-number="4" href="#section4" class="">
<span class="cd-dot"></span>
<span class="cd-label">Portfolio</span>
</a>
</li>
</ul>
</div>
<section id="section1">
<h1>section1 starts here</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
<section id="section2">
<h1>section2 starts here</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
<section id="section3">
<h1>section3 starts here</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
<section id="section4">
<h1>section4 starts here</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
</body>
</html>