"Живое", горизонтальное меню картинками - Форум
Как вы планируете провести лето
Всего ответов: 360


Сегодня были:

Зарег. на сайте
<Всего: 1041
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0

Из них
Администраторов: 1
Старших Модераторов: 1
Модераторов: 4
Проверенных: 1
Обычных юзеров: 1032

Из них
Парней: 904
Девушек: 136


[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » WebMasteram » Скрипты для uCoz » "Живое", горизонтальное меню картинками
"Живое", горизонтальное меню картинками
AlecsandrДата: Вторник, 08.09.2009, 17:28 | Сообщение # 1
Полковник
Группа: Администраторы
Сообщений: 212
Репутация: 17

Бог сайта и форума За супер посещаемость За хорошую посещаемость на форуме За супер посещаемость За Полковника За помощь народу За супер посещаемость
Награды: 15
Статус: Offline
"Живое", горизонтальное меню картинками
Демонстрацию можно посмотреть тут

в css

Code
*   
{   
margin: 0;   
padding: 0;   
}   
body   
{   
background: #fff;   
height: 100%;   
font-family: Arial, Helvetica, sans-serif;   
font-size: 12px;   
}   
.fisheye{   
text-align: center;   
height: 50px;   
position: relative;   
}   
a.fisheyeItem   
{   
text-align: center;   
color: #000;   
font-weight: bold;   
text-decoration: none;   
width: 40px;   
position: absolute;   
display: block;   
top: 0;   
}   
a.fisheyeItem2   
{   
text-align: center;   
color: #000;   
font-weight: bold;   
text-decoration: none;   
width: 40px;   
position: absolute;   
display: block;   
bottom: 0;   
}   
.fisheyeItem img   
{   
border: none;   
margin: 0 auto 5px auto;   
width: 100%;   
}   
.fisheyeItem2 img   
{   
border: none;   
margin: 5px auto 0 auto;   
width: 100%;   
}   
.fisheyeItem span,   
.fisheyeItem2 span   
{   
display: none;   
positon: absolute;   
}   
.fisheyeContainter   
{   
background-color: #fff;   
height: 50px;   
width: 200px;   
left: 500px;   
position: absolute;   
}   
#fisheye2   
{   
position: absolute;   
width: 100%;   
bottom: 0px;   
}

HTML

Code


<div id="fisheye" class="fisheye">   
<div class="fisheyeContainter">   
<a href="#" class="fisheyeItem"><img src="Адрес картинки 1" width="30" /><span>Название ссылки 1</span></a>   
<a href="#" class="fisheyeItem"><img src="Адрес картинки 2" width="30" /><span>Название ссылки 2</span></a>   
<a href="#" class="fisheyeItem"><img src="Адрес картинки 3" width="30" /><span>Название ссылки 3</span></a>   
<a href="#" class="fisheyeItem"><img src="Адрес картинки 4" width="30" /><span>Название ссылки 4</span></a>   
<a href="#" class="fisheyeItem"><img src="Адрес картинки 5" width="30" /><span>Название ссылки 5</span></a>   
<a href="#" class="fisheyeItem"><img src="Адрес картинки 6" width="30" /><span>Название ссылки 6</span></a>   
<a href="#" class="fisheyeItem"><img src="Адрес картинки 7" width="30" /><span>Название ссылки 7</span></a>   
</div>   
</div>   
<script type="text/javascript">   

$(document).ready(   
function()   
{   
$('#fisheye').Fisheye(   
{   
maxWidth: 20,   
items: 'a',   
itemsText: 'span',   
container: '.fisheyeContainter',   
itemWidth: 60,   
proximity: 10,   
halign : 'center'   
}   
)   

}   
);   

</script>

В HTML скрипт стоит под ссылками для регулировок (поэксперементируйте с цыфрами разберётесь)
И ещё 2 скрипта, можете использовать мои файлы, или загрузить себе на сайт.
Это ставим в head

Code
<script type="text/javascript" src="http://scriptozna.ucoz.ru/js/jquery.js"></script>   
<script type="text/javascript" src="http://scriptozna.ucoz.ru/js/interface.js"></script>

источник scriptozna.ucoz.ru

Форум » WebMasteram » Скрипты для uCoz » "Живое", горизонтальное меню картинками
  • Страница 1 из 1
  • 1
Поиск: