Анимационная панель навигации


Анимационная панель навигации

1104
6 из 10
Проголосовало: 2




Описание
Не плохо Выполненная навигационная панель для сайтов.
Минус данного скрипта в том, что не каждый сможет понять, куда прописывать свой текст, отображаемый под навигатором. Свой текст нужно прописывать в сам javascript.

Скрипт + html код

Code
<style>  
#element1, #element2, #element3 {cursor:pointer;padding: 9px 9px 9px 9px;border: 1px solid #bbbbbb;background:#f1f1f1;width:130px;color:#000000;text-shadow: 0 1px 0 #ffffff;}  
#element1:hover, #element2:hover, #element3:hover {background:#f7f7f7;cursor:pointer;}  

#slider {border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;border: 1px solid #3e4752;padding: 12px 9px 12px 9px;background:#77818e;width:130px;color:#ffffff;text-shadow: 0 1px 0 #2b333c;}  
</style>  

<div id="element1" style="position:absolute;margin-left:0px;margin-top:3px;" onclick="selecter(this.id)">Где я?</div>  
<div id="element2" style="position:absolute;margin-left:149px;margin-top:3px;" onclick="selecter(this.id)">Регистрация!</div>  
<div id="element3" style="position:absolute;margin-left:298px;margin-top:3px;" onclick="selecter(this.id)">О скрипте</div>  

<div id="slider" style="z-index:2;position:relative;">Где я?</div>  

<div id="content" style="padding-top:5px;width:450px;">  

<div><b>Добро пожаловать!</b></div>  
<div>Вы зашли на ресурс посвященный языку программирования <b>JavaScript</b></div>  

</div>  

<script type="text/javascript">  
function selecter(id)  
{  
if (id=="element1")  
{  
$('#slider').animate({left:'0px'}, 300).html('Где я?');  

$('#content').css('opacity','0.0').html(''+  

'<div><b>Добро пожаловать!</b></div>'+  
'<div>Вы зашли на ресурс посвященный языку программирования <b>JavaScript</b></div>'+  

'').animate({opacity:'1.0'}, 300);  

}  
if (id=="element2")  
{  
$('#slider').animate({left:'149px'}, 300).html('Регистрация!');  

$('#content').css('opacity','0.0').html(''+  

'<div><b>Регистрация</b></div>'+  
'<div>Зарегестрируйтесь прямо <a href="/index/3">сейчас</a>!</div>'+  

'').animate({opacity:'1.0'}, 300);  

}  
if (id=="element3")  
{  
$('#slider').animate({left:'298px'}, 300).html('О скрипте');  

$('#content').css('opacity','0.0').html(''+  

'<div><b>О скрипте</b></div>'+  
'<div>Спасибо за установку данного скрипта себе на сайт!</div>'+  
'<div>Данный скрипт очень прост в использовании, единственный его недостаток, это то, что текст для вкладок нужно прописывать в самом скрипте. Ну я надеюсь, что Вы сами сможете прекрасно разобраться, куда вставлять нужный Вам текст!</div>'+  
'<div style="padding-top:5px;font-size:10px;">Зайдисюда): <a href="http://webo4ka.ru/" target="_blank"><b>webo4ka</b></a></div>'+  

'').animate({opacity:'1.0'}, 300);  

}  
}  
</script>
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://vk.com/garold_orlando
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    205
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 1
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: