Joomla 1.5 Вопрос по поводу меню

mark2008 · 23.03.2012

Нашел статью где предлагали сделать "Красивое меню на CSS"
демо

Хотелось бы на сделать на сайте такое меню.
Кто знает как сделать его в joomla 1.5 объясните плз

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

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

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

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

Код (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:

Код (CODE):

#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, то с этим у Вас не должно возникнуть проблем.

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

Нажмите, чтобы раскрыть...

Наши спонсоры

mark2008 · 24.03.2012

Вопрос актуален....кто знает как сделать помогите

Войти или зарегистрироваться

Joomla 1.5 Вопрос по поводу меню

mark2008 Недавно здесь

Наши спонсоры

mark2008 Недавно здесь

Поделиться этой страницей

Войти или зарегистрироваться

Joomla 1.5 Вопрос по поводу меню

mark2008 Недавно здесь

Наши спонсоры

mark2008 Недавно здесь

Поделиться этой страницей

Быстрый поиск