Горизонтальное меню картинками при помощи CSS

Goldie · March 17, 2011

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

Как сделать ролловер, я нашел: http://htmlbook.ru/faq/kak-sdelat-chtoby-kartinka-menyalas-pri-navedenii-na-nee

Подскажите как при этом сделать горизонтальное меню например из 5-ти пунктов.

ShumNo · March 17, 2011

обычным списком <li> и стилям разложить по горизонтали каждый пункт

psywalker · March 17, 2011

On 3/17/2011 at 3:06 PM, Goldie said:
Задача сделать горизонтальное меню средствами css, при этом картинки должны менять при наведении курсора.
Как сделать ролловер, я нашел: http://htmlbook.ru/faq/kak-sdelat-chtoby-kartinka-menyalas-pri-navedenii-na-nee
Подскажите как при этом сделать горизонтальное меню например из 5-ти пунктов.

Значит про ролловер ты почитал, а про то, как сделать меню - забыл?)

Goldie · March 17, 2011

На каждую кнопку получается отдельный класс типа:

A.button_1 {}

A.button_1:hover {}

A.button_2 {}

A.button_2:hover {}

... и т.д.?

psywalker · March 17, 2011

On 3/17/2011 at 3:33 PM, Goldie said:
На каждую кнопку получается отдельный класс типа:
A.button_1 {}
A.button_1:hover {}
A.button_2 {}
A.button_2:hover {}
... и т.д.?

Если картинки все разные - то да.

Goldie · March 17, 2011

Да разные. Как-то проще нельзя сделать? Чтоб столько классов не прописывать? А если меню из 10 пунктов, это очень много кода получается, на js вроде даже меньше строк писать.

Edited March 17, 2011 by Goldie

ShumNo · March 17, 2011

Если у вас 10 пунктов навигации и для каждого пункта своя картинка, то соответственно надо прописывать каждую картинку в стилях. Не думаю, что у вас их будет больше чем 20-30 это не много. Если же у вас одна картинка на множество пунктов, то соответственно и один класс в стилях

Goldie · March 20, 2011

Может кому-то пригодится. Решение получилось такое:


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

#topnav .item-0 { width: 53px; }
#topnav .item-0 a { background-position: 0 0;}
#topnav .item-0 a:hover { background-position: -51px 0; }
#topnav .item-0 a.act { background-position: -51px 0; }
#topnav .item-1 { width: 53px; }
#topnav .item-1 a { background-position: 0 0; }
#topnav .item-1 a:hover { background-position: -51px 0; }
#topnav .item-1 a.act { background-position: -51px 0; }
#topnav .item-2 { width: 53px; }
#topnav .item-2 a { background-position: 0 0; }
#topnav .item-2 a:hover { background-position: -51px 0; }
#topnav .item-2 a.act { background-position: -51px 0; }
#topnav .item-3 { width: 53px;  }
#topnav .item-3 a { background-position: 0 0; }
#topnav .item-3 a:hover { background-position: -51px 0; }
#topnav .item-3 a.act { background-position: -51px 0; }
</style>
<title>Rollovertopnav</title>
</head>
<body>
<ul id="topnav">
  <li class="item-0"><a href="#"></a></li>
  <li class="item-1"><a href="#" class="act"></a></li>
  <li class="item-2"><a href="#"></a></li>
  <li class="item-3"><a href="#"></a></li>
</ul>
</body>
</html>

psywalker · March 20, 2011

Молодец, что решил и запостил. Похвально.

swetlana · March 20, 2011

а xhtml strict разве позволяет пустые <a>?

Кстати, зачем повторяющиеся стили?

И в чём высший смысл абсолюта?

Sign In

Горизонтальное меню картинками при помощи CSS

Question

Goldie

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

ShumNo

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Goldie

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Goldie

Link to comment

Share on other sites

ShumNo

Link to comment

Share on other sites

Goldie

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

swetlana

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information