Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Помогите с меню


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

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

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

Автор: bazzjr 18.5.2009, 16:32
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>

Автор: SelenIT 18.5.2009, 21:55
Javascript для этой задачи - все равно, что ехать в гастроном за батоном на танке smile. Сами ссылки, вместе с ховером, элементарно делаются техникой "http://www.id-as.com/arts/ala/slidingdoors2/" (еще http://www.getincss.ru/2008/03/12/effekt-rollover-menyu/). А вот растягивать промежутки между ссылками, пожалуй, действительно лучше всего таблицей (особенно если число пунктов может меняться).

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

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

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

В этом способе есть еще пара нюансов в IE6, особенно если делать ссылку и <span> блочными (приходится явно задавать cursor:pointer и бороться с глюком кеширования фона, напр. http://www.mister-pixel.com.sharedcopy.com/3b2046bd15b255c3928558b213913077.html), но это мелочи, тем более IE6 уже вымирает...

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)