VPF::Помогите с меню - Форум программистов

liliana2

Дата 18.5.2009, 11:49 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

Здравствуйте, даже не знаю как описать проблему, в общем есть картинка:
http://pic.ipicture.ru/uploads/090518/L4tn97DU6V.jpg
Здесь нарисована, и надо сделать вот такой вот ховер при резиновом дизайне, подскажите пожалуйста или направьте где можно почитать али поучитья как такое сделать?

MaXL

Дата 18.5.2009, 13:25 (ссылка)

(нет голосов)

Загрузка ...

Developer

Профиль
Группа: Участник
Сообщений: 380
Регистрация: 24.10.2005
Где: Владивосток

Репутация: нет
Всего: 2

liliana2, а причём здесь резиновость дизайна ? если ширина будет слишком большая а пунктов меню будет мало, то вот этот "бэкграунд ховера" будет больше или всё таки так и остаётся ровно под размер пункта меню ?

--------------------

MaXL

liliana2

Дата 18.5.2009, 13:39 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

Резиновость при том что при увеличении разрешения увеличивается ширина пункта, да и пункты все сами по себе не одного размера, в этом то и проблема
то есть ховер должен быть по ширине пункта меню ширина которого меняется в зависимости от разрешения экрана

Это сообщение отредактировал(а) liliana2 - 18.5.2009, 13:47

bazzjr

Дата 18.5.2009, 16:32 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 460
Регистрация: 27.12.2007
Где: Россия, Пермь

Репутация: 2
Всего: 6

liliana2
К сожалению в вашей ситуации нельзя обойтись без javascript, так как я понял нужна полная резиновость элементов...

ПОэтому мы прописываем некоторые элементы id, и с пмощью функций подставляем те или иные графические элементы, в вашем случае это картинки по краям и центру.

Так же я прикрепил файл, в нем содержаться картинки.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
.aa{background:url(img/hover_C.jpg) repeat-x}
    .aa div {background:url(img/hover_L.jpg) left no-repeat}
        .aa div div {background:url(img/hover_R.jpg) right no-repeat; text-align:center}
    
.bb{background:url(img/bg.jpg) repeat-x}
    .bb div {background:url(img/space.gif) no-repeat}
        .bb div div{background:url(img/space.gif) no-repeat; text-align:center}
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
  <tr style="background:url(img/bg.jpg) repeat-x">
    <td id="a1" style="width:10%" onmouseover="hover('a1');style.cursor='pointer'" onmouseout="out('a1');">
    <div>
    <div style="text-align:center">
    MENU 1
    </div>
    </div>
    </td>
    <td id="a2" style="width:20%" onmouseover="hover('a2');style.cursor='pointer'" onmouseout="out('a2');">
    <div>
    <div style="text-align:center">
    MENU 2
    </div>
    </div>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<script type="text/javascript">
function hover(aa){
    //alert(aa);
    document.getElementById(aa).className = 'aa';
}
function out(aa){
    document.getElementById(aa).className = 'bb';
}
</script>
</body>
</html>

Это сообщение отредактировал(а) bazzjr - 18.5.2009, 16:37

Присоединённый файл ( Кол-во скачиваний: 5 )

test.rar 2,52 Kb

SelenIT

Дата 18.5.2009, 21:55 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Javascript для этой задачи - все равно, что ехать в гастроном за батоном на танке smile

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

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

bazzjr

Дата 19.5.2009, 09:27 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 460
Регистрация: 27.12.2007
Где: Россия, Пермь

Репутация: 2
Всего: 6

SelenIT почитал я твою статью, но не понял как там работает ховер?? то что так нужен liliana2

а реализация красивых закладок, это пройденный этап...

SelenIT

Дата 19.5.2009, 22:35 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

bazzjr, 1) статья не моя;), 2) ховер одновременно меняет фон у самой ссылки и у вложенного в нее элемента (напр. <span>), эти фоны стыкуются друг с другом, один берет на себя левый край, другой правый — вот и получается красивая рамка, аккуратно обтягивающая текст. Можно использовать одну картинку за все про все, меняя лишь background-position.

В этом способе есть еще пара нюансов в IE6, особенно если делать ссылку и <span> блочными (приходится явно задавать cursor:pointer и бороться с глюком кеширования фона, напр. так), но это мелочи, тем более IE6 уже вымирает...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »