Вопрос по поводу меню - Joomla 1.5: Вопросы по работе с меню

Данный урок расскажет Вам как создать красивое меню на CSS, используя только одну картинку.

Для создания этого меню будет использована технология спрайтов. Т.е. у нас будет всего одна картинка и с помощью CSS мы настроим правильное ее отображение. В этом уроке мы рассмотрим пример простого меню

Данное меню прежде всего интересно нам по 2-м причинам: 1) очень легкое, так как используется немного кода; 2) использование технологий спрайтов, с помощью которых можно сделать красивые эффекты.

Начнем с HTML разметки:

Код

<ul id="navigation">
    <li><a href="index.php" class="link1">Home</a></li>
    <li><a href="metal" class="link2">Metal</a></li>
    <li><a href="plastic" class="link3">Plastic</a></li>
    <li><a href="services.php" class="link4">Services</a></li>
    <li><a href="news.php" class="link5">News</a></li>
    <li><a href="catalog.php" class="link6">Catalog</a></li>
    <li><a href="about.php" class="link7">About Us</a></li>
    <li><a href="contact.php" class="link8">Contact</a></li>
    <li><a href="users.php" class="link9">Registered Users</a></li>
</ul>

Тут ничего сложного: простой неупорядоченный список. Единственное на что необходимо обратить внимание - это то, что каждому элементу меню присвоен отдельный класс. Их мы будем использовать для того, чтоб правильно каждому элементу меню присвоить область изображения.

Давайте теперь взглянем на CSS:

Код

#navigation {
border-right:1px solid #999;
padding:10px 0px;
width:145px;
}
#navigation a  {
display:block;

background:url(navigation.png);
height:47px;
text-indent:-9000px;
}
#navigation a.link1:hover {background-position:-146px 0px;}
#navigation a.link2 {background-position:0px -47px;}
#navigation a.link2:hover {background-position:-146px -47px;}
#navigation a.link3 {background-position:0px -94px;}
#navigation a.link3:hover{background-position:-146px -94px;}
#navigation a.link4 {background-position:0px -141px;}
#navigation a.link4:hover {background-position:-146px -141px;}
#navigation a.link5 {background-position:0px -188px;}
#navigation a.link5:hover {background-position:-146px -188px;}
#navigation a.link6 {background-position:0px -235px;}
#navigation a.link6:hover {background-position:-146px -235px;}
#navigation a.link7 {background-position:0px -282px;}
#navigation a.link7:hover {background-position:-146px -282px;}
#navigation a.link8 {background-position:0px -329px;}
#navigation a.link8:hover {background-position:-146px -329px;}
#navigation a.link9 {background-position:0px -375px; height:65px;}
#navigation a.link9:hover {background-position:-146px -375px;}

Тут также все довольно просто. Самое сложное - это определить точные координаты области рисунка для каждого элемента меню. Если Вы пользуетесь Photoshop, то с этим у Вас не должно возникнуть проблем.

Вот и все! Меню готово!