Компактное меню в пять разделов для 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/ |
Поделиться в социальных сетях
Материал разместил
Комментарии: 14 | |
| |
1 2 » | |