Категории

Главное меню

Возможно ли в меню текст заменить 3-мя картинками:
Обычное состояние 1-я картинка, Курсор подведен 2-я картинка, Нажатый пункт 3-я картинка.

Конечно можно.

Чуть чуть бы поподробнее. Как это сделать ?

Конечно можно.

Чуть чуть бы поподробнее. Как это сделать ?

ну типа чтото вроде етого

.CatNavi
{
padding-left: 25px;
}

.CatLevel1,
.CatLevel2,
.CatLevel3,
.CatLevel4,
.CatLevel5,
.CatLevel6
{
list-style-type: none;
padding-left: 17px;
padding-top: 2px;
background: url(images/f1.png) no-repeat left 2px;
padding-bottom: 2px;
}
.CatLevel1:hover,
.CatLevel2:hover,
.CatLevel3:hover,
.CatLevel4:hover,
.CatLevel5:hover,
.CatLevel6:hover
{
list-style-type: none;
padding-left: 17px;
padding-top: 2px;
background: url(images/f2.png) no-repeat left 2px;
padding-bottom: 2px;
}

#CatNavi{
padding: 0;
margin: 0;
}
#CatNavi a{
color: black;
}
.Current{
background: url(images/f3.png) no-repeat left 2px;
}
li.Current{
font-weight: bold;
}

.Current ul li
{
font-weight: normal;
}

Я так понимаю, что этот код нужен в шаблоне в файле: style.css,
но в шаблоне shopos-vamcart подскажите куда это вставить.
Заранее спасибо.

Тут ZAP забыл скинуть еще и HTML код ;D

а вставлять нужно в style.css.
Вы лучше дайте картинки, сделаю вам меню.

зы. вообще в гугле или яше введите запрос - css меню -, и сразу попадете на нужный материал. Прям самый первый сайт в списке) За это время уже бы сделали сами ;)

Пока я не очень понимаю структуру кода шаблона,
поэтому подскажите, пожалуйста, все таки куда картинки вставить,
картинки сами во вложении.
Заранее спасибо.

Завтра приведу примеры и распишу все подробно, чтобы было понятно.

Третья картинка(нажатый) имеете ввиду во время клика или состояние активное? т.е. чтобы была подсвечена как бы?

Третья - состояние активное.

Вот.

HTML код меню
menu1, menu2 и т.д... - это классы. можете их назвать как угодно.
Во втором меню к ним добавлен класс current, который показывает выделенную кнопку.

<ul class="nav">
<li class="menu1"><a href="#">Ссылка</a></li>
<li class="menu2"><a href="#">Ссылка</a></li>
<li class="menu3"><a href="#">Ссылка</a></li>
<li class="menu4"><a href="#">Ссылка</a></li>
<li class="menu5"><a href="#">Ссылка</a></li>
<li class="menu6"><a href="#">Ссылка</a></li>
<li class="menu7"><a href="#">Ссылка</a></li>
</ul>

<ul class="nav">
<li class="menu1 current"><a href="#">Ссылка</a></li>
<li class="menu2 current"><a href="#">Ссылка</a></li>
<li class="menu3 current"><a href="#">Ссылка</a></li>
<li class="menu4 current"><a href="#">Ссылка</a></li>
<li class="menu5 current"><a href="#">Ссылка</a></li>
<li class="menu6 current"><a href="#">Ссылка</a></li>
<li class="menu7 current"><a href="#">Ссылка</a></li>
</ul>

CSS код
Нужно указать только правильные пути к картинкам.
т.е. background: url(shop/baket1.png) no-repeat; заменить.

ul.nav {list-style:none;}
ul.nav li {display:inline;float:left;margin:0 5px 0 5px;}
ul.nav li a {text-indent:-30000px;outline:none;display:block;cursor:pointer;}

ul.nav li.menu1 a {width:128px;height:22px;background: url(shop/baket1.png) no-repeat;}
ul.nav li.menu1 a:hover {width:128px;height:22px;background: url(shop/baket2.png) no-repeat;}
ul.nav li.menu1.current a {width:131px;height:24px;background: url(shop/baket3.png) no-repeat;}

ul.nav li.menu2 a {width:128px;height:22px;background: url(shop/face1.png) no-repeat;}
ul.nav li.menu2 a:hover {width:128px;height:22px;background: url(shop/face2.png) no-repeat;}
ul.nav li.menu2.current a {width:131px;height:24px;background: url(shop/face3.png) no-repeat;}

ul.nav li.menu3 a {width:128px;height:22px;background: url(shop/login1.png) no-repeat;}
ul.nav li.menu3 a:hover {width:128px;height:22px;background: url(shop/login2.png) no-repeat;}
ul.nav li.menu3.current a {width:131px;height:20px;background: url(shop/login3.png) no-repeat;}

ul.nav li.menu4 a {width:128px;height:22px;background: url(shop/logout1.png) no-repeat;}
ul.nav li.menu4 a:hover {width:128px;height:22px;background: url(shop/logout2.png) no-repeat;}
ul.nav li.menu4.current a {width:131px;height:20px;background: url(shop/logout3.png) no-repeat;}

ul.nav li.menu5 a {width:128px;height:22px;background: url(shop/main1.png) no-repeat;}
ul.nav li.menu5 a:hover {width:128px;height:22px;background: url(shop/main2.png) no-repeat;}
ul.nav li.menu5.current a {width:131px;height:20px;background: url(shop/main3.png) no-repeat;}

ul.nav li.menu6 a {width:128px;height:22px;background: url(shop/order1.png) no-repeat;}
ul.nav li.menu6 a:hover {width:128px;height:22px;background: url(shop/order2.png) no-repeat;}
ul.nav li.menu6.current a {width:131px;height:24px;background: url(shop/order3.png) no-repeat;}

ul.nav li.menu7 a {width:128px;height:22px;background: url(shop/price1.png) no-repeat;}
ul.nav li.menu7 a:hover {width:128px;height:22px;background: url(shop/price2.png) no-repeat;}
ul.nav li.menu7.current a {width:131px;height:24px;background: url(shop/price3.png) no-repeat;}

зы. картинки желательно делать одной ширины и высоты, а то будет не ровно.
Если есть вопросы - задавайте.

У меня к Вам надеюсь последний вопрос,
Я вставил написанные фрагменты в index.html
и style.css. Кнопки нарисованные пока не появились.
Подскажите,пожалуйста,где ошибка.
Фрагменты относящиеся к меню, прилагаю.
Заранее,спасибо.

Если у вас картинки лежат в папке img
то пути к картинкам в style.css нужно указать
background: url(img/baket1.png) no-repeat;

Источник