Energy-Portal
Живое", горизонтальное меню картинками - Форум
Меню сайта

Наш опрос
Более популярный социальный сайт
Всего ответов: 37

Статистика

Форма входа

Приветствую Вас, Гость · RSS 21.12.2024, 14:55

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Живое", горизонтальное меню картинками
JShaddixДата: Воскресенье, 14.06.2009, 19:23 | Сообщение # 1
Admin
Сообщений: 278
Награды: 1
Репутация: 17
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>

Code

В 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>
 
  • Страница 1 из 1
  • 1
Поиск:

Copyright MyCorp © 2024
Хостинг от uCoz