Бормотухи.НЕТ

Вернуться   Бормотухи.НЕТ > Web-мастеру > Сайтостроение > Разные скрипты
Расширенный поиск

Разные скрипты Раздел посвященный готовым движкам сайтов, форумов, ...

Ответ
 
Опции темы Поиск в этой теме
Старый 21.12.2010, 07:46 Вверх   #1
forever alone
 
Аватар для no name
no name вне форума
Доп. информация
По умолчанию Делаем top menu на jquery

Top menu - плавно появляющееся меню на jquery.

Собственно вот такое меню как на скриншоте ниже, при наведении курсора, плавно выдвигается сверху и также плавно уезжает назад, когда указатель мыши отводится.



Добавляем в начало страницы, обычно между тегами <HEAD></HEAD>

PHP код:
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="top_menu.js"></script> 
Далее CSS стиль

PHP код:
<style type="text/css">
/* ***** menu ***** */
ul#navigation {
    
positionfixed;
    
margin0px;
    
padding0px;
    
top0px;
    
right10px;
    list-
stylenone;
    
z-index:999999;
    
width:550px;
}
ul#navigation li {
    
width103px;
    
display:inline;
    
float:left;    
}
ul#navigation li a {
    
displayblock;
    
float:left;
    
margin-top: -2px;
    
width100px;
    
height17px;
    
background-color:#E7F2F9;
    
background-repeat:no-repeat;
    
background-position:5010px;
    
border:1px solid #BDDCEF;
    
text-decoration:none;
    
text-align:center;
    
padding-top:80px;
    
opacity0.7;
    
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
}
ul#navigation li a:hover{
     
background-color:#CAE3F2;
}
ul#navigation li a span{
    
letter-spacing:2px;
    
font-size:12px;
    
color:#60ACD8;
    
text-shadow-1px 1px #fff;   
         
}
ul#navigation .bazar a{
    
background-imageurl(bazar.png);
}
ul#navigation .hal a      {
    
background-imageurl(halyava.png);
}
ul#navigation .for a      {
    
background-imageurl(forum.png);
}
ul#navigation .chatib a   {
    
background-imageurl(chat.png);
}
ul#navigation .sms a    {
    
background-imageurl(icqsms.png);
}
</
style
И помещаем на страницу следующий код, в любое место:
PHP код:
<ul id="navigation">
 <
li class="bazar"><a href="#" target ="_blank"><span>ICQ базар</span></a></li>
 <
li class="hal"><a href="#" target ="_blank"><span>ICQ халява</span></a></li>
 <
li class="for"><a href="#" target ="_blank"><span>Форум</span></a></li>
 <
li class="chatib"><a href="#" target ="_blank"><span>Чат</span></a></li>
<
li class="sms"><a href="#" target ="_blank"><span>ICQ за смс</span></a></li>
</
ul

Ссылки href корректируете сами и также изменяете пути до файлов и картинок (srс="" в script и url вCSS)

Взято с pcvector

Последний раз редактировалось no name; 24.12.2010 в 12:54..
  Ответить с цитированием
9 пользователя(ей) сказали cпасибо:
Старый 21.12.2010, 11:36 Вверх   #2
::.V.I.P.::
 
Аватар для boxx
boxx вне форума
Доп. информация
По умолчанию

Для тех кому лень региться чтобы качать файлы: http://www.bormotuhi.net/krfilesmana...&dlfileid=1708 , просьба тем кто может перезалить файл сюда, чтобы качать можно было без регистрации.

Последний раз редактировалось boxx; 21.12.2010 в 12:49..
  Ответить с цитированием
Старый 15.02.2011, 20:50 Вверх   #3
Старший модератор
 
Аватар для Prometej
Prometej вне форума
Доп. информация
По умолчанию

Ответил через ЛС.
  Ответить с цитированием
Старый 26.04.2011, 19:14 Вверх   #4
Новичок
 
Аватар для ibeseda
ibeseda вне форума
Доп. информация
По умолчанию

+ 1 Спасибо :)
  Ответить с цитированием
Ответ

Метки
jquery, pcvector, pcvector.ru, top menu


Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
[JavaScript/jQuery] Помгите решить проблему Slape Разные скрипты 1 19.11.2010 01:22
[ Вопрос ] Кто разбираеться в jQuery Heon DataLife Engine 0 31.07.2010 19:48
Делаем первоклассную WEB 2.0 кнопку Serberg Уроки Photoshop 0 02.07.2008 11:58
Делаем леопарда-киборга Rock Уроки Photoshop 0 09.04.2008 16:55
FAQ по замене flash menu в телефонах Sony Ericsson Serberg Sony Ericsson 0 04.01.2008 13:27


Текущее время: 02:15. Часовой пояс GMT +3.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2024, vBulletin Solutions, Inc. Перевод: zCarot
 

Время генерации страницы 0.10212 секунды с 12 запросами