• Страница 1 из 1
  • 1
Супер раздвижное меню для сайта Ucoz
Bathed
Дата: Пятница, 20.01.2012, 16:02 | Сообщение # 1
Сообщений: 14
Группа:
Пользователи
СКРИНШОТ МЕНЮШКИ:




Перед тем как начать установку скрипта...хочу всем сказать, что установка не для чайников и те кто думает, что меню дасться вам просто то покиньте эту тему!!!!!



И так, те кто решился на это, начнем :
Перво-наперво вам вам надо залить файлы себе на сайт в папку "menu"..заливать придеться так:
Создаем текстовый документ вот с таким названием "accordion.js" название не путать-СТРОГО!!!!
внутрь документа кидаем вот этот код:

Code
/// Accordion menu

jQuery(document).ready(function(){

       function createCookie(name,value,days) {

         if (days) {

           var date = new Date();

           date.setTime(date.getTime()+(days*24*60*60*1000));

           var expires = "; expires="+date.toGMTString();

         }

         else expires = "";

         document.cookie = name+"="+value+expires+"; path=/";

       }

       function readCookie(name) {

         var nameEQ = name + "=";

         var ca = document.cookie.split(';');

         for(var i=0;i < ca.length;i++) {

           var c = ca[i];

           while (c.charAt(0)==' ') c = c.substring(1,c.length);

           if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

         }

         return null;

       }

       var cookier = readCookie("actr");

       var actr = cookier ? cookier : 0;

       var cookiel = readCookie("actl");

       var actl = cookiel ? cookiel : 0;

       jQuery(".accordion h3:eq("+actr+")").addClass("active");

       jQuery(".accordion p:eq("+actr+")").show();

       jQuery(".accordion h3").click(function(){

           var index = jQuery(".accordion h3").index(this);

           createCookie("actr", index, 365);

           jQuery(this).next("p").slideToggle("fast")

           .siblings("p:visible").slideUp("fast");

           jQuery(this).toggleClass("active");

           jQuery(this).siblings("h3").removeClass("active");

       });

});




Потом в туже папку "menu" заливаем 2 картинки брать тут:









Затем делаем вот так:

2) Везде, в head ставим эти строчки:

Code
<script language="javascript" type="text/javascript" src="/menu/jquery.js"></script>    
<script language="javascript" type="text/javascript" src="/menu/accordion.js"></script>


3) ПУ-->Управление дизайном-->CSS. В самый верх ставим это:

Code
/* Menu */    
.accordion h3 {font-size : 11px;color : #fff;padding-left : 10px;background : url(/menu/accordion.png) no-repeat right 0;line-height :25p;height : 25px;cursor : pointer;margin : 0;text-align : left;font-weight : bold;}    
.accordion h3:hover {background : url(/menu/accordion.png) no-repeat right -25px;color : #ffa;}    
.accordion h3.active {background : url(/menu/accordion.png) no-repeat right -50px;}    
.accordion h3.active:hover {background : url(/menu/accordion.png) no-repeat right -75px;}    
.accordion p {display : none;margin : 0;padding : 7px 0 7px 7px;}    
.accordion a {font-size : 11px;color : #fff;text-align : left;font-weight : bold;padding-left : 15px;}    
.accordion p.linked a {background : url(/menu/bull.gif) no-repeat 0 50%;}    
/* ---------- */


4) А этот код редактируем и вставляем в нужное место:

Code
200?'200px':''+(this.scrollHeight+5)+'px')"<div class="accordion">    
<h3>Главное меню</h3>    
<p class="linked">    
<a href="/">Главная страница</a><br/>    
<a href="/gb/">Гостевая книга</a><br/>    
<a href="/index/0-3">Обратная связь</a><br/>    
<a href="/board/">Доска объявлений</a><br/>    
<a href="/publ/">Каталог статей</a><br/>    
<a href="/dir/">Каталог сайтов</a><br/>    
<a href="/blog/">Блог</a><br/>    
<a href="/faq/"><font color="DarkOrange">FAQ (вопрос/ответ)</font></a><br/>    
</p>    
<h3>Компьютер</h3>    
<p class="linked">    
<a href="/load/">Каталог файлов</a><br/>    
<a href="/">Пусто</a><br/>    
<a href="/">Пусто</a><br/>    
<a href="/">Пусто</a><br/>    
<a href="/">Пусто</a><br/>    
<a href="/">Пусто</a><br/>    
<a href="/">Пусто</a><br/>    
</p>    
<h3>Отдохни</h3>    
<p class="linked">    
<a href="/">Пусто</a><br/>    
<a href="/">Пусто</a><br/>    
<a href="/">Пусто</a><br/>    
<a href="/">Пусто</a><br/>    
<a href="/">Пусто</a><br/>    
<a href="/">Пусто</a><br/>    
</p>    
<h3>Форум</h3>    
<p class="linked">    
<a href="/">Пусто</a><br/>    
<a href="/">Пусто</a><br/>    
<a href="/">Пусто</a><br/>    
<a href="/">Пусто</a><br/>    
<a href="/">Пусто</a><br/>    
<a href="/">Пусто</a><br/>    
</div>    
<br/>




Сообщение отредактировал Bathed - Пятница, 20.01.2012, 16:05
[ (RU) ]
  • Страница 1 из 1
  • 1
Поиск: