воскресенье, 12 декабря 2010 г.

Простое раздвижное меню с картинками

Простая менюшка.При наведении на картинку,она сдвигается и показывается пункт меню.


Решение простое,вставляем как виджет код,ссылки меню и картинок не забываем указать :)
<div id="menu">
<ul>
<li><a href="ссылка"><img src="ссылка на картинку" width="100px" height="100px" /><span>Главная</span></a></li>
<li><a href="ссылка"><img src="ссылка на картинку" width="100px" height="100px" /><span>Портфолио</span></a></li>
<li><a href="ссылка"><img src="ссылка на картинку" width="100px" height="100px" /><span>Интересное</span></a></li>
<li><a href="ссылка"><img src="ссылка на картинку" width="100px" height="100px" /><span>Блог</span></a></li>
<li><a href=""><img src="ссылка на картинку" width="100px" height="100px" /><span>Мои цены</span></a></li>
<li><a href="ссылка"><img src="ссылка на картинку" width="100px" height="100px" /><span>Контакты</span></a></li>
</ul>
</div>


Потом перед ]]></b:skin> в шаблоне добавляем:


#menu li a span{
display:none;
}
#menu li a img{
position:relative;
padding:5px;
float:left;
border:0px;
}
#menu li a:hover{
color:#333333;
border:0px;
}
#menu li a:hover span{
position:relative;
display:inline;
background:transparent;
font-family:Georgia;Tahoma;
font-size:15px;
text-decoration:underline;
top:22px;
padding-right:10px;
border:0px;
}

Комментариев нет:

Отправить комментарий