JQuery ролловер меню без изображений - PullRequest
Новая
       5

JQuery ролловер меню без изображений

2 голосов
/ 11 октября 2011

Я застрял с, казалось бы, простой задачей ролловера.

Черный - это состояние по умолчанию, синий - при наведении.

image

As you can see, in the default state only the latter digits show, at hover, the 20 has to be added (no problem), the colour changed (no problem) and the whole thing has to be vertically in the middle (the problem).

Here's a jsFiddle of what I've got so far: http://jsfiddle.net/markushausammann/3YPXk/

Какая разметка и CSS позволили бы такое поведение без с использованием изображений? 101

Edit: разметка на самом деле не имеет значения, это обычная горизонтальная разметка ul li. Но вот пример того, как может выглядеть разметка: 

<div id="nav-years">
   <ul>
      <li><a href="#" id="2002"><p class="supertext">20</p><p>02</p></a></li>
      <li><a href="#" id="2003"><p class="supertext">20</p><p>03</p></a></li>
      <li><a href="#" id="2004"><p class="supertext">20</p><p>04</p></a></li>
      <li><a href="#" id="2005"><p class="supertext">20</p><p>05</p></a></li>
    </ul>
</div>

И немного CSS, но это, возможно, придется адаптировать для соответствующего решения. 

/* years navigation */
#nav-years {
    position: relative;
    display: block;
    width: 400px;
    height: 70px;
}

#nav-years ul {
    display: block;
    height: 70px;
    list-style: none;
}

#nav-years li {
    display: block;
    height: 35px;
    width: 35px;
    float: left;
    text-align: center;
    margin: 0 15px;
    overflow: hidden;
}

#nav-years a {
    display: block;
    width: 35px;
    color: #000000;
    font-size: 30px;
}

Ответы [ 4 ]

2 голосов
/ 11 октября 2011

Как то так, но хорошо:

http://jsfiddle.net/vUCgm/

Вы хотите начать играть с высотой строки и псевдо-классом: hover.

1 голос
/ 11 октября 2011

Действительно, это может быть достигнуто только с помощью CSS (включая выравнивание по вертикали, для исходной задачи ) , сохраняя вам вызов JS. См. JsFiddle.

Вот новый CSS, хотя для быстрого просмотра (новый код помечен комментариями) : 

#nav-years { display:block; height:70px; position:relative; width:400px; }

#nav-years ul { display:block; height:70px; list-style:none; }

#nav-years li {
    display: block;
    float: left;
    height: 35px;
    line-height:25px;
    margin: 0 5px;
    overflow: visible; /* added */
    text-align: center;
    width: 35px;
}

#nav-years a {
    color: #000000;
    display: block;
    font-size: 30px;
    text-decoration: none;
    width: 35px;
}

#nav-years a:hover { 
    color: #00FFFF;
    margin-top:-12px; /* added */
}

/* added */
#nav-years a .supertext { display:none; }
#nav-years a:hover .supertext { display:block; }
0 голосов
/ 11 октября 2011

http://jsfiddle.net/3YPXk/2/

Только высота строки и высота в JS.

Сохраняйте $(this).height(70); все время и меняйте высоту строки:

a -> line-height:70px;

a: зависание -> line-height:35px;

0 голосов
/ 11 октября 2011

Это должно сделать это.Вы захотите немного поэкспериментировать с высотой ul и margin-top из lis, чтобы получить то, что хотите.

http://jsfiddle.net/3YPXk/3/

...