Я хотел бы добавить некоторые функциональные возможности динамического меню в мое меню <ul>.

Question

Я хотел бы добавить некоторые функциональные возможности динамического меню в мое меню <ul>.

Вот 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;
}

Извините за длинный код, но я думаю, что, возможно, это поможет легче помочь.

0

javascript html jquery css html-lists

Источник

user3095570 09 янв '14 в 13:02

1 ответ

Решение

Другие вопросы по тегам javascript html jquery css html-lists

user1907267 09 янв '14 в 14:45 2014-01-09 14:45 · Accepted Answer · 2014-01-09 14:45

Для меток вы можете использовать псевдоэлементы 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, Теперь активная точка имеет тот же стиль, что и при наведении.

Вы можете проверить все это в этой скрипке: http://jsfiddle.net/7mzH2/3/

PS: я думаю, что лучше переместить подсказку / ярлык влево, а не вправо. Прямо сейчас вы не можете добавить много текста из-за пробела.

Надеюсь, это помогло.