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

1258
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 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Радио не стоит на месте новая версия вам 1.5:
    Что нового:
    1. Media Session - позволит вам переключать из бара браузера радио, а также на блоке экрана.
    2. Новые радиостанции.
    3. Новый API код.

    Демо: fiddle
    Реальная полная версия: woobl
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
    Последние темы
    Опрос
    258
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: