视差导航菜单标题显示 [英] parallax navigation menu title to show

问题描述

您好，我想创建一个单一的网页网站。我可以使用圆圈在右侧创建导航，但它不显示标题（这是菜单的每个部分的名称）。

网页是右侧菜单的示例。 http://jonathannicol.com/projects/parallax-scrolling/

这里是我的CSS& HTML代码：

 ＃fp-nav {position：fixed; z指数：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;显示：block; text-decoration：none; -webkit-border-radius：50％; border-radius：50％; -webkit-过渡：背景颜色.1s线性，边框颜色.1s线性; -moz-transition：背景颜色.1s线性，边框颜色.1s线性; -ms-transition：背景颜色.1s线性，边框颜色.1s线性; -o-transition：背景颜色.1s线性，边框颜色.1s线性;过渡：背景颜色.1s线性，边框颜色.1s线性;背景色：＃000;}。color-weight-light＃fp-nav ul li .nav-title {color：＃000;}。nav-title {position：absolute; right：10px;不透明度：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）; - 跃迁：所有.3s立方声源（.23,1，.32,1）;转换：所有.3s立方声源（.23,1，.32,1）; line-height：32px; visibility：visible;}  

 < script src =https ：//use.fontawesome.com/5a33902e83.js>< / script>< div id =fp-navstyle =margin-top：-46px; class =color-weight-light> < ul> < li> < a href =＃top> < i class =fa fa-circlearia-hidden =true>< / i> < span class =nav-title>首页< / span> < / a> < / li> < li> < a href =＃内容> < i class =fa fa-circlearia-hidden =true>< / i> < span class =nav-title> Slim Products< / span> < / a> < / li> < li> < a href =＃home-block-one> < i class =fa fa-circlearia-hidden =true>< / i> < span class =nav-title> Blogs< / span> < / a> < / li> < li> < a href =＃home-block-two> < i class =fa fa-circlearia-hidden =true>< / i> < span class =nav-title> Heatlh Products< / span> < / a> < / li> < li> < a href =＃home-block-three> < i class =fa fa-circlearia-hidden =true>< / i> < span class =nav-title>视频< / span> < / a> < / li> < li> < a href =＃home-block-four> < i class =fa fa-circlearia-hidden =true>< / i> < span class =nav-title> Skin Products< / span> < / a> < / li> < / ul>< / div>  

我可以解决这个问题吗？谢谢！

解决方案

试试这个。

 ＃fp-nav {position：固定; z指数：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;显示：block; text-decoration：none; -webkit-border-radius：50％; border-radius：50％; -webkit-过渡：背景颜色.1s线性，边框颜色.1s线性; -moz-transition：背景颜色.1s线性，边框颜色.1s线性; -ms-transition：背景颜色.1s线性，边框颜色.1s线性; -o-transition：背景颜色.1s线性，边框颜色.1s线性;过渡：背景颜色.1s线性，边框颜色.1s线性;背景颜色：＃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;}  pre> 
 < script src =https://use.fontawesome.com/5a33902e83.js> ;< / script>< div id =fp-navstyle =margin-top：-46px; class =color-weight-light> < ul> < li> < a href =＃top> < i class =fa fa-circlearia-hidden =true>< / i> < span class =nav-title>首页< / span> < / a> < / li> < li> < a href =＃content> < i class =fa fa-circlearia-hidden =true>< / i> < span class =nav-title> Slim Products< / span> < / a> < / li> < li> < a href =＃home-block-one> < i class =fa fa-circlearia-hidden =true>< / i> < span class =nav-title> Blogs< / span> < / a> < / li> < li> < a href =＃home-block-two> < i class =fa fa-circlearia-hidden =true>< / i> < span class =nav-title> Heatlh Products< / span> < / a> < / li> < li> < a href =＃home-block-three> < i class =fa fa-circlearia-hidden =true>< / i> < span class =nav-title>视频< / span> < / a> < / li> < li> < a href =＃home-block-four> < i class =fa fa-circlearia-hidden =true>< / i> < span class =nav-title> Skin Products< / span> < / a> < / li> < / ul>< / div>  
 

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!

解决方案

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>

这篇关于视差导航菜单标题显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！