Rollover с отключенными картинками

@LEXXX_NF · July 6, 2009

Есть горизонтальное меню с rollover'ом на CSS. Меню чисто графическое, так как шрифт нестандартный, поэтому никакого текста нет. Есть какие-нибудь варианты добавления текста, чтобы видно было только, когда отключены картинки? А то юзеры с отключёнными картинками страдают, поисковые машины тоже страдают, но для них есть обходные пути...

psywalker · July 6, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	h1 { position: relative; width: 100px; height: 20px;}
		h1 span { position: absolute; width: 100%; height: 100%; background:;}
</style>
</head>

<body>
<h1>Пункт меню<span></span></h1>
</body>
</html>

@LEXXX_NF · July 6, 2009

Ух, ты! И как я сам не догадался? Наверно совсем глаз замылился.

Правда пришлось чуточку доработать:

h1 { overflow: hidden; }
h1 span { top: 0; left: 0; }

Reveal · October 24, 2009

Есть горизонтальное меню с rollover'ом на CSS. Меню чисто графическое, так как шрифт нестандартный, поэтому никакого текста нет. Есть какие-нибудь варианты добавления текста, чтобы видно было только, когда отключены картинки? А то юзеры с отключёнными картинками страдают, поисковые машины тоже страдают, но для них есть обходные пути...

Вы не могли бы поделится методами создания такого графического меню. Можно без подробного описания. Хотя бы просто html и css коды. Ну и скрин результата, если не сложно.

@LEXXX_NF · October 25, 2009

Вы не могли бы поделится методами создания такого графического меню. Можно без подробного описания. Хотя бы просто html и css коды. Ну и скрин результата, если не сложно.

Метод самого rollover'а предельно прост - описание и сам найдёшь. А вот пример кода:

<!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>
<style type="text/css">
#menu {
  height: 43px;
  padding: 0;
  margin: 0;
  overflow: hidden; zoom: 1;
  list-style: none;
}
#menu li {
  height: 43px;
  padding: 0;
  margin: 0;
  float: left;
  position: relative;
}
#menu a {
  width: 100%;
  height: 43px;
  position: absolute; top: 0; left: 0;
  background: url('./img/menuSprite.png') no-repeat;
}

#menu .item-0 { width: 213px; }
#menu .item-0 a { background-position: 0 0; }
#menu .item-0 a:hover { background-position: 0 -44px; }
#menu .item-0 a.act { background-position: 0 -88px; }
#menu .item-1 { width: 182px; }
#menu .item-1 a { background-position: -213px 0; }
#menu .item-1 a:hover { background-position: -213px -44px; }
#menu .item-1 a.act { background-position: -213px -88px; }
#menu .item-2 { width: 195px; }
#menu .item-2 a { background-position: -395px 0; }
#menu .item-2 a:hover { background-position: -395px -44px; }
#menu .item-2 a.act { background-position: -395px -88px; }
#menu .item-3 { width: 155px;  }
#menu .item-3 a { background-position: -590px 0; }
#menu .item-3 a:hover { background-position: -590px -44px; }
#menu .item-3 a.act { background-position: -590px -88px; }
</style>
<title>RolloverMenu</title>
</head>
<body>
<ul id="menu">
  <li class="item-0">item-0<a href="#"></a></li>
  <li class="item-1">item-1<a href="#" class="act"></a></li>
  <li class="item-2">item-2<a href="#"></a></li>
  <li class="item-3">item-3<a href="#"></a></li>
</ul>
</body>
</html>

Картинка для этого кода:

Reveal · October 25, 2009

@LEXXX_NF, Большое спасибо!

Это мне и нужно было, чтобы все устаканить...

Edited October 25, 2009 by Reveal

Sign In

Rollover с отключенными картинками

Recommended Posts

@LEXXX_NF

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

@LEXXX_NF

Link to comment

Share on other sites

Reveal

Link to comment

Share on other sites

@LEXXX_NF

Link to comment

Share on other sites

Reveal

Link to comment

Share on other sites

Обсуждения

Forums

Important Information