javascript - 我想在我的 菜单中添加一些动态菜单功能。

Question

这是 JSFiddle http://jsfiddle.net/7mzH2/这是我现在拥有的简单版本。

我有两个问题，我似乎无法弄清楚。
第一个问题:我希望点在事件页面上时保持填充状态。
第二个问题:当您将鼠标悬停在点上时，我希望在菜单右侧显示一个标签。

我尝试了几种方法，在其他设计中我从未遇到过这个问题，所以我不知道我应该怎么做。希望有人能帮助我。

这是 HTML

<div id="cbp-fbscroller" class="cbp-fbscroller">
<nav>   <a href="#first" class="smoothScroll">Home</a>
<a href="#second" class="smoothScroll">De mogelijkheden</a>
<a href="#third" class="smoothScroll">Restauratie</a>
<a href="#fourth" class="smoothScroll">Het Proces</a>
<a href="#fifth" class="smoothScroll">Werkplaats</a>
<a href="#six" class="smoothScroll">Ambacht en Handwerk</a>
<a href="#seven" class="smoothScroll">Mogelijkheden</a>
<a href="#eight" class="smoothScroll">Contact</a>

    </nav>
</div>
<ul class="content">
    <li class="first" id="first">
    <div id="pagina01"></div>
    <li class="second" id="second">
        <div id="pagina02"></div>
    </li>
    <li class="third" id="third">
        <div id="pagina03"></div>
    </li>
    <li class="fourth" id="fourth">
        <div id="wrapper04">
            <div id="first04"></div>
            <div id="second04"></div>
        </div>
    </li>
    <li class="fifth" id="fifth">
        <div id="pagina05"></div>
    </li>
    <li class="six" id="six">
        <div id="pagina06"></div>
    </li>
    <li class="seven" id="seven">
        <div id="pagina07"></div>
    </li>
    <li class="eight" id="eight">
        <div id="pagina08"></div>
    </li>
</ul>

这是CSS

body {
background: white;
min-width: 300px;
height: 100%;
font:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:100;
}
ul.options {
margin-top: 0px;
width: 100%;
}
ul.options li {
display: inline-block;
margin-bottom: 20px;
}
ul.options li h4 {
color: rgba(0, 0, 0, 0.8);
text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4);
}
ul.btn-group {
color: #000;
margin: 10px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}
ul.btn-group li {
background: #7958b8;
border-bottom: 1px solid #563f83;
border-left: 1px solid #563f83;
border-top: 1px solid #563f83;
cursor: pointer;
display: inline-block;
float: left;
margin: 0;
padding: 7px;
}
ul.btn-group li:hover, ul.btn-group li.active {
background: rgb(150, 110, 226);
}
ul.btn-group li:first-child {
border-radius: 2px 0 0 2px;
padding-left: 7px;
}
ul.btn-group li:last-child {
border-radius: 0 2px 2px 0;
border-right: 1px solid #563f83;
padding-right: 7px;
}
ul.content {
margin-top: 0px;
width: 100%;
}
ul.content li {
display: block;
height: 100%;
width: 100%;
}
ul.content li h1 {
color: #000;
padding-top: 20px;
}
.scroller {
background: #CCC;
box-shadow: inset 0 0 5px 0 black;
height: 1px;
overflow: hidden;
}
.scroller h3 {
color: rgba(0, 0, 0, 0.3);
font-size: 30px;
margin-top: 20px;
text-align: center;
}
ul.content li.first {
background: url('../inhouds/images/page01.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.second {
background: url('../inhouds/images/page02.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.third {
background: url('../inhouds/images/page03.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.fourth {
background: url('../inhouds/images/page04.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.fifth {
background: url('../inhouds/images/page05.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.six {
background: url('../inhouds/images/page06.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.seven {
background: url('../inhouds/images/page07.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.eight {
background: url('../inhouds/images/page08.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
.cbp-fbscroller > nav {
position: fixed;
z-index: 9999;
right: 50px;
top: 50%;
width: 10px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.cbp-fbscroller > nav a {
display: block;
position: relative;
z-index: 999;
color: transparent;
width: 10px;
height: 10px;
outline: none;
margin: 10px 0;
border-radius: 50%;
border: 1px solid #666;
}
.cbp-fbscroller > nav a:hover {
display: block;
position: relative;
z-index: 999;
color: transparant;
width: 10px;
height: 10px;
outline: none;
margin: 10px 0;
border-radius: 50%;
border: 1px solid transparant;
background:#666;
}
#pagina01 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #b8ffff;
}
#pagina02 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #b8beff;
}
#pagina03 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #b8beb0;
}
#pagina04 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #6abeb0;
}
#pagina05 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: white;
}
#pagina06 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #6a6d6d;
}
#pagina07 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #366d6d;
}
#pagina08 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #366d39;
}

抱歉，代码太长了，但我想这可能会让帮助变得更容易。

Answer 1

对于标签，您可以使用 CSS3 伪元素创建自定义工具提示，并使用 HTML5 的数据标签获取工具提示的内容(文本)。

伪元素是:after 和:before

要创建标签或工具提示，请尝试将其添加到您的 CSS 代码中:

nav a:hover:before {
   pointer-events: none;
   content: attr(data-name);
   position: absolute;
   display: block;
   width: 30px;
   height: 20px;
   line-height: 20px;
   text-align: center;
   color: #FFF;
   background: #000;
   top: -4px;
   right: -40px;
}

..并在您的 HTML 中将此添加到您的链接:data-name="your text here" .

(您可以随意调用数据属性。它只需以 data- 开头)。

---

要使点保持填充状态，您可以使用 jQuery。

当您点击 nav a它添加了一个 .active -类到<a>这使得点保持填充状态。但首先我们必须确保所有其他点都处于非事件状态。否则我们会突然让每个点都活跃起来。为此，我们首先删除 .active - 所有点上的类。然后我们添加一个 .active -类，在那<a>我们点击了:

$(document).ready(function() {

   $('nav a').click(function() {
      $('nav a').removeClass('active');
      $(this).addClass('active');
   });

});

然后我们改变.cbp-fbscroller > nav a:hover在你的 css 中为 .cbp-fbscroller > nav a:hover, nav a.active .现在事件点的样式与我们将其悬停时的样式相同。

您可以在这个 Fiddle 中测试所有内容: http://jsfiddle.net/7mzH2/3/

附言:我认为将工具提示/标签移动到左侧而不是右侧更好。现在，由于空间的原因，您不能添加太多文本。

希望这对您有所帮助。