» »

Компактное меню в пять разделов для uCoz


Компактное меню в пять разделов для uCoz

По своим функциям и размеру меню отлично будет смотреться на сайте. Так как оно состоит из 5 кнопок, которые отвечаю за свои функцию и плюс поиск по сайту идет в последнем режиме. Здесь можно его поставить там где вам нужно, так как много места не займет и безусловно смотреться будет оригинально. Сами кнопки по размер 45x45, что можно с уверенностью сказать, что подойдут на многие площадки.

Так они будут по умолчанию стоять.

Развернутое меню сайта

Если вам оттенок не подходит, то в архиве идет файл PSD, где вы сами можете как добавить кнопки или просто поменять у них гамму цвета. Но и не нужно забывать про красивый эффект на них, а это вы наводите и она начинает крутиться и потом разворачивается. Так все очень просто и понятно, просто по самим кнопкам, можно понять, что за какую функцию отвечает, и это очень удобно.

Установка:

Для начало скачиваем и потом в админ панели в файловым менеджере делаем папку menu_ie и закидываем туда все что есть.

Потом вам просто остается найти то место, где будет стоять скрипт. И при эьтом не нужно забывать, что они развернутые больше места займут.

Код
<link rel="stylesheet" href="/menu_ie/css/style.css" type="text/css" media="screen"/>  
  <div class="menu">  
  <div class="item">  
  <a class="link icon_search"></a>  
  <div class="item_content">  
  <h2>Поиск</h2>  
  <p>  
  <form onsubmit="document.getElementById('sfSbm').disabled=true" method="get" style="margin:0px" action="/search/">  
  <input placeholder="Введите текст..." class="search-bar" type="text" name="q" maxlength="45" onclick="if (this.value=='Поиск...'){this.value='';}"/>  
  <i class="search-btn fa fa-search"></i>  
  <form>  
  </p>  
  </div>  
  </div>  
  <div class="item">  
  <a class="link icon_contact"></a>  
  <div class="item_content">  
  <h2>Контакты</h2>  
  <p>  
  <a href="#">ZORNER</a>  
  <a href="#">ZORNER</a>  
  <a href="#">ZORNER</a>  
  </p>  
  </div>  
  </div>  
  <div class="item">  
  <a class="link icon_help"></a>  
  <div class="item_content">  
  <h2>Помощь</h2>  
  <p>  
  <a href="#">Шаблоны сайта</a>  
  <a href="#">Скрипты сайта</a>  
  <a href="#">Информеры для сайта</a>  
  </p>  
  </div>  
  </div>  
  <div class="item">  
  <a class="link icon_archive"></a>  
  <div class="item_content">  
  <h2>Архив файлов</h2>  
  <p>  
  <a href="#">ZORNER</a>  
  <a href="#">ZORNER</a>  
  <a href="#">ZORNER</a>  
  </p>  
  </div>  
  </div>  
  <div class="item">  
  <a class="link icon_home"></a>  
  <div class="item_content">  
  <h2>Главная</h2>  
  <p>  
  <a href="/">Главная</a>  
  <a href="/forum">Форум ресурса</a>  
  </p>  
  </div>  
  </div>  
  </div>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>  
<script src="/menu_ie/js/jquery-css-transform.js" type="text/javascript"></script>  
<script src="/menu_ie/js/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>  
<script>  
  $('.item').hover(  
  function(){  
  var $this = $(this);  
  expand($this);  
  },  
  function(){  
  var $this = $(this);  
  collapse($this);  
  }  
  );  
  function expand($elem){  
  var angle = 0;  
  var t = setInterval(function () {  
  if(angle == 1440){  
  clearInterval(t);  
  return;  
  }  
  angle += 40;  
  $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);  
  },10);  
  $elem.stop().animate({width:'278px'}, 1000)  
  .find('.item_content').fadeIn(400,function(){  
  $(this).find('p').stop(true,true).fadeIn(600);  
  });  
  }  
  function collapse($elem){  
  var angle = 1440;  
  var t = setInterval(function () {  
  if(angle == 0){  
  clearInterval(t);  
  return;  
  }  
  angle -= 40;  
  $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);  
  },10);  
  $elem.stop().animate({width:'52px'}, 1000)  
  .find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut();  
  }  
</script>


Но чтоб было понятливее, для вас Демонстрация, чтоб понять саму работу и сделать вывод, для чего можно еще применить в функциональности вашего портала, так как это очень нужно.
Источник: http://internetempire.ru/
19.02.2016 Загрузок: 1 Просмотров: 443 Комментарий: (15)

Поделиться в социальных сетях

Материал разместил

Комментарий: 14
Scheme
Scheme 19.02.2016 20:551
0
Так все нормально, но пока раскрутиться, нужно ждать. Нет чтоб сразу все открывалось, нет нужно сделать больше эффекта, это тот случай, где его просто много.
csretven
csretven 19.02.2016 21:012
0
думаю такой скрипт будет сильно грузить, его же нужно на главную выводить, но и если на каждой странице будет, это только для поиска, так бы намного лучше было.
Scheme
Scheme 19.02.2016 21:063
0
Так все сделано здорово, что в одной кнопке примерно, можно разместить несколько ссылок. И здесь только нужно полагать, чтоб они схожие по своей теме были, как социальные сайты.
tsakonter
tsakonter 19.02.2016 21:156
0
Для кого то и здорово, вот мне такие финты не очень на сайте нравятся. Для меня, чем понятнее тем лучше, мне кажется это для каждого так должно, но если у вас дизайн оригинальный и здесь можно поставить кнопки.
FeStemBer
FeStemBer 19.02.2016 21:094
0
Всегда есть недостатки и плюсы, здесь один недостаток, это вес скрипта. Что по цвету, то если идет файл, то можно еще поработать, а кто вообще может поменять, но одно остается, это круглые должны. Просто не понятно будет, если другая форма будет так крутиться.
Kosten
Kosten 19.02.2016 21:115
0
Но не кто еще не поставил и говорит сильно грузить бует, если ты ставишь в тело сайта скрипт, то думаю здесь будет подгружать, а все идет через корень сайта, так как там находиться вся основа.
Maryges
Maryges 19.02.2016 21:217
0
Но можно вообще то один поиск оставить, хоть глупо будет смотреться. biggrin Но полностью согласен, что простые паблики, как этот сайт, этот скрипт просто не понимаю, куда можно пристроить.
Kosten
Kosten 19.02.2016 21:248
0
Но поиск можно и стандартный установить и не нужно не каких эффектов для него. Просто есть сайты, что куда не кликнувший или наведешь, везде какой то финт делается, и этот скрипт отлично впишется в структуру.
ucozmental
ucozmental 19.02.2016 21:409
0
Красиво сделано, а что он не под все сайты, так это редко, что может подойти их скрипта на все тематики. Этот видно что под какой то офисный официальный сайт подойдет.
steadrad
steadrad 19.02.2016 22:0710
0
Кнопки кривые у этого меню
Здесь чётче
Источник уже стоит.
Kosten
Kosten 19.02.2016 22:1011
0
Так они и есть эти кнопки и не понимаю чем могут отличаться.
steadrad
steadrad 19.02.2016 22:1512
0
До действительно. Простите ошибся.
Kosten
Kosten 19.02.2016 23:2713
0
Не чего страшного, со всеми такие непонятки бывают.
Maryges
Maryges 19.02.2016 23:3014
0
Вообще не понятно, зачем делать профиль бота, для того чтоб флудить и писать, что материал фуфло и переходите сюда. Но если администратор поставил источник и спам на его идет, где логика. Если ты автор, так пиши от себя а не играйся под социальным профилем.
avatar