0 Пользователей и 1 Гость просматривают эту тему.
  • 4 Ответов
  • 997 Просмотров
*

mark2008

  • Новичок
  • 6
  • 0 / 0
Вопрос по поводу меню
« : 24.03.2012, 11:32:00 »
Здравствуйте
Нашел статью где предлагали сделать "Красивое меню на CSS"
демо

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

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

mark2008

  • Новичок
  • 6
  • 0 / 0
Re: Вопрос по поводу меню
« Ответ #1 : 26.03.2012, 13:51:42 »
Вопрос остается актуальным....ну хоть кто нибудь может помочь? :'(
*

oriol

  • Завсегдатай
  • 1044
  • 100 / 4
Re: Вопрос по поводу меню
« Ответ #2 : 26.03.2012, 13:58:51 »
*

mark2008

  • Новичок
  • 6
  • 0 / 0
Re: Вопрос по поводу меню
« Ответ #3 : 26.03.2012, 23:45:01 »
Спасибо за ответ)
но не пойму как это расширение мне поможет?
*

mark2008

  • Новичок
  • 6
  • 0 / 0
Re: Вопрос по поводу меню
« Ответ #4 : 29.03.2012, 01:13:02 »
Вопрос был решен
использовал плагин вставки кода Sourcerer  ^-^
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Большое меню Joomla

Автор Amakeeva

Ответов: 1
Просмотров: 126
Последний ответ 22.01.2018, 13:17:45
от effrit
Как можно отображать имя пользователя в название меню?

Автор selimoff

Ответов: 27
Просмотров: 3051
Последний ответ 02.01.2018, 15:24:44
от logan-19
как сделать пункт меню не кликабельным?

Автор qweqweqwe

Ответов: 13
Просмотров: 5813
Последний ответ 07.09.2017, 01:45:49
от forzi
Сдвинуть пункты меню в левое положение

Автор wectra

Ответов: 6
Просмотров: 447
Последний ответ 12.07.2017, 21:09:01
от wectra
Не отображаются пункты в меню

Автор physic

Ответов: 16
Просмотров: 15761
Последний ответ 27.05.2017, 00:10:15
от OutLaw1