parallax navigation menu title to show

问题

Hi I am trying to create a single webpage website. I was able to create the navigation on the right side using circle, but it does not show the title(which is the name of each part of the menu.)

This webpage is example of the menu on the right side. http://jonathannicol.com/projects/parallax-scrolling/

Here is my CSS & HTML code:

#fp-nav {
 position: fixed;
 z-index: 52;
 top: 50%;
 right: 15px;
 padding: 0 10px 0 0;
 -webkit-transition: opacity .3s 0s linear;
 -moz-transition: opacity .3s 0s linear;
 -ms-transition: opacity .3s 0s linear;
 -o-transition: opacity .3s 0s linear;
 transition: opacity .3s 0s linear;
 transform: translatez(0);
 -webkit-transform: translatez(0);
 -webkit-backface-visibility: hidden;
}

#fp-nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

#fp-nav ul li {
 margin: 0;
 padding: 10px 0 10px 15px;
 cursor: pointer;
}

.color-weight-light #fp-nav ul li.active a {
 background-color: transparent;
 border: solid 2px #000;
}

.color-weight-light #fp-nav ul li a {
 background color: #000;
}

#fp-nav ul li.active a {
 width: 8px;
 height: 8px;
 margin-left: -1px;
}

#fp-nav ul li a {
 width: 10px;
 height: 10px;
 display: block;
 text-decoration: none;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 -webkit-transition: background color .1s linear,border color .1s linear;
 -moz-transition: background color .1s linear,border color .1s linear;
 -ms-transition: background color .1s linear,border color .1s linear;
 -o-transition: background color .1s linear,border color .1s linear;
 transition: background color .1s linear,border color .1s linear;
  background color: #000;
}

.color-weight-light#fp-nav ul li .nav-title {
 color: #000;
}

.nav-title {
 position: absolute;
 right: 10px;
 opacity: 1;
 font-size: 13px;
 text-transform: uppercase;
 white-space: nowrap;
 font-family: "brandon-grotesque";
 letter-spacing: 3px;
 font-weight: 400;
 font-style: normal;
 text-decoration: none;
 margin-top: -11px;
 padding: 0 0 5px 0;
 -webkit-transition: all .3s cubic-beizer(.23,1,.32,1);
 -moz-transition: all .3s cubic-beizer(.23,1,.32,1);
 -ms-transition: all .3s cubic-beizer(.23,1,.32,1);
 -o-transition: all .3s cubic-beizer(.23,1,.32,1);
 transition: all .3s cubic-beizer(.23,1,.32,1);
 line-height: 32px;
 visibility: visible;
}

<script src="https://use.fontawesome.com/5a33902e83.js"></script>
<div id="fp-nav" style="margin-top: -46px;" class="color-weight-light">
 <ul>
  <li>
   <a href="#top">
   <i class="fa fa-circle" aria-hidden="true"></i>
    <span class="nav-title">Home</span>
   </a>
  </li>
    <li>
     <a href="#content">
   <i class="fa fa-circle" aria-hidden="true"></i>
    <span class="nav-title">Slim Products</span>
   </a>
  </li>
    <li>
     <a href="#home-block-one">
   <i class="fa fa-circle" aria-hidden="true"></i>
    <span class="nav-title">Blogs</span>
   </a>
  </li>
    <li>
     <a href="#home-block-two">
   <i class="fa fa-circle" aria-hidden="true"></i>
    <span class="nav-title">Heatlh Products</span>
   </a>
  </li>
    <li>
     <a href="#home-block-three">
   <i class="fa fa-circle" aria-hidden="true"></i>
    <span class="nav-title">Video</span>
   </a>
  </li>
    <li>
     <a href="#home-block-four">
   <i class="fa fa-circle" aria-hidden="true"></i>
    <span class="nav-title">Skin Products</span>
   </a>
  </li>
 </ul>
</div>

Is there anyway I can fix this problem? Thanks!

回答1:

Try this. CSS edited at the bottom of style.

#fp-nav {
 position: fixed;
 z-index: 52;
 top: 50%;
 right: 15px;
 padding: 0 10px 0 0;
 -webkit-transition: opacity .3s 0s linear;
 -moz-transition: opacity .3s 0s linear;
 -ms-transition: opacity .3s 0s linear;
 -o-transition: opacity .3s 0s linear;
 transition: opacity .3s 0s linear;
 transform: translatez(0);
 -webkit-transform: translatez(0);
 -webkit-backface-visibility: hidden;
}

#fp-nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

#fp-nav ul li {
 margin: 0;
 padding: 10px 0 10px 15px;
 cursor: pointer;
}

.color-weight-light #fp-nav ul li.active a {
 background-color: transparent;
 border: solid 2px #000;
}

.color-weight-light #fp-nav ul li a {
 background color: #000;
}

#fp-nav ul li.active a {
 width: 8px;
 height: 8px;
 margin-left: -1px;
}

#fp-nav ul li a {
 width: 10px;
 height: 10px;
 display: block;
 text-decoration: none;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 -webkit-transition: background color .1s linear,border color .1s linear;
 -moz-transition: background color .1s linear,border color .1s linear;
 -ms-transition: background color .1s linear,border color .1s linear;
 -o-transition: background color .1s linear,border color .1s linear;
 transition: background color .1s linear,border color .1s linear;
  background color: #000;
}

.color-weight-light#fp-nav ul li .nav-title {
 color: #000;
}


.nav-title {
opacity: 0;
visibility: visible;
position: absolute;
top: 0;
right: 20px;
text-align: right;
width: 200px;
transition:1s;
}

li:hover .nav-title {
opacity:1;
}

li a{
position:relative;
}

<script src="https://use.fontawesome.com/5a33902e83.js"></script>
<div id="fp-nav" style="margin-top: -46px;" class="color-weight-light">
 <ul>
  <li>
   <a href="#top">
   <i class="fa fa-circle" aria-hidden="true"></i>
    <span class="nav-title">Home</span>
   </a>
  </li>
    <li>
     <a href="#content">
   <i class="fa fa-circle" aria-hidden="true"></i>
    <span class="nav-title">Slim Products</span>
   </a>
  </li>
    <li>
     <a href="#home-block-one">
   <i class="fa fa-circle" aria-hidden="true"></i>
    <span class="nav-title">Blogs</span>
   </a>
  </li>
    <li>
     <a href="#home-block-two">
   <i class="fa fa-circle" aria-hidden="true"></i>
    <span class="nav-title">Heatlh Products</span>
   </a>
  </li>
    <li>
     <a href="#home-block-three">
   <i class="fa fa-circle" aria-hidden="true"></i>
    <span class="nav-title">Video</span>
   </a>
  </li>
    <li>
     <a href="#home-block-four">
   <i class="fa fa-circle" aria-hidden="true"></i>
    <span class="nav-title">Skin Products</span>
   </a>
  </li>
 </ul>
</div>

回答2:

Could you please change style to...

.nav-title { opacity: 1; visibility: visible; }

来源：https://stackoverflow.com/questions/38153164/parallax-navigation-menu-title-to-show

标签

html

css

webpage

parallax