Главная » Файлы » Прочие скрипты » jQuery

Замечательное меню на jQuery для uCoz
24.06.14, 09:08:42

Скачать файл




Хочу представить вам замечательное меню smile оно красиво функционально и вообще , просто греет глаза smile

Для начала просмотри ДЕМО

Приступим к установке

это вставляем в head /head
Код
<link rel="stylesheet" href="/css/style1.css" type="text/css" media="screen">


Вот этот громоздкий код вставляем в самый низ страницы перед /body
Код
<script type="text/javascript" src="/js/jsmenu.js"></script>  

<script type="text/javascript">  

//<![CDATA[  

jQuery.noConflict();  

var sf = jQuery.fn.superfish,  

is_ie = jQuery.browser.msie;  

jQuery.fn.hideSuperfishUl = function(){  

var o = sf.op,  

not = (o.retainPath===true) ? o.$path : '';  

o.retainPath = false;  

var $ul = jQuery(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)  

.find('>ul').animate({opacity:'hide',height:'hide'},200);  

o.onHide.call($ul);  

return this;  

}  

var $top_menu = jQuery('ul.nav');  

$top_menu.superfish({

delay: 200, // one second delay on mouseout

animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation

speed: 200, // faster animation speed

autoArrows: true, // disable generation of arrow mark-up

dropShadows: false, // disable drop shadows  

onBeforeShow: function() {  

if ( this.parent('li').css('background-image') === 'none' ) {  

if (!is_ie)  

this.parent('li').find('>a').fadeTo('fast',.5).siblings('span.menu_arrow').stop(true, true).animate( {opacity:'show', top:'-5px'}, 400);  

else

this.parent('li').find('>a').siblings('span.menu_arrow').stop(true, true).animate( {opacity:'show', top:'-5px'}, 400);  

}  

},  

onHide: function() {  

if (!is_ie)  

this.parent('li').find('>a').fadeTo('fast',1).siblings('span.menu_arrow').stop(true, true).animate( {opacity:'hide', top:'-15px'}, 400);  

else  

this.parent('li').find('>a').siblings('span.menu_arrow').stop(true, true).animate( {opacity:'hide', top:'-15px'}, 400);  

}  

});  

$top_menu.find('> li > ul').parent('li').addClass('sf-ul');  

$top_menu.find('> li').each(function(index,domEle) {  

$li = jQuery(domEle);  

if ($li.css('background-image') === 'none')  

$li.append('<span class="menu_arrow"></span>');  

}).find('> ul').prepend('<span class="menu_top_arrow"><span>');  

var menu_arrow = 'span.menu_arrow';  

$top_menu.find('>li:not(.sf-ul) > a').hover(function(){  

if ( jQuery(this).parent('li').css('background-image') === 'none' ) {  

if (!is_ie)

jQuery(this).fadeTo('fast',.5).siblings('span.menu_arrow').stop(true, true).animate( {opacity:'show', top:'-5px'}, 400);  

else  

jQuery(this).siblings('span.menu_arrow').stop(true, true).animate( {opacity:'show', top:'-5px'}, 400);  

}  

},function(){  

if (!is_ie)

jQuery(this).fadeTo('fast',1).siblings('span.menu_arrow').stop(true, true).animate( {opacity:'hide', top:'-15px'}, 400);  

else  

jQuery(this).siblings('span.menu_arrow').stop(true, true).animate( {opacity:'hide', top:'-15px'}, 400);  

});  

if (!is_ie) {  

$top_menu.find('li ul a').hover(function(){  

jQuery(this).fadeTo('fast',.5);  

},function(){  

jQuery(this).fadeTo('fast',1);  

});  

}  

var $searchform = jQuery('#searchform');  

jQuery('#header a#search').toggle(  

function () { $searchform.animate( {opacity:'toggle', left:'-220px'}, 500); },  

function () { $searchform.animate( {opacity:'toggle', left:'-230px'}, 500); }  

);  

et_search_bar();  

var $featured_content = jQuery('#featured_content'),  

$service_tabs = jQuery('#services'),  

$home_tabs = jQuery("ul#main-tabs");  

if ($featured_content.length) {  

$featured_content.cycle({  

timeout: 4500,

speed: 500,  

cleartypeNoBg: true,  

cleartype: true,

pager: 'div#controllers',  

fx: 'fade',  

pause: 1});  

}  

et_service_tabs($service_tabs);

var $footer_widget = jQuery("#footer-widgets .widget");  

if (!($footer_widget.length == 0)) {  

$footer_widget.each(function (index, domEle) {  

// domEle == this  

if ((index+1)%4 == 0) jQuery(domEle).addClass("last").after("<div class='clear'></div>");  

});  

}  

<!---- Search Bar Improvements ---->  

function et_search_bar(){  

var $searchform = jQuery('#header div#search-form'),  

$searchinput = $searchform.find("input#searchinput"),  

searchvalue = $searchinput.val();  

$searchinput.focus(function(){  

if (jQuery(this).val() === searchvalue) jQuery(this).val("");  

}).blur(function(){  

if (jQuery(this).val() === "") jQuery(this).val(searchvalue);  

});  

};

<!---- Service Tabs ---->  

function et_service_tabs($service_tabs){  

var active_tabstate = 'ui-state-active',  

active_tab = 0,  

$service_div = $service_tabs.find('>div').hide(),  

$service_li = $service_tabs.find('>ul>li');  

$service_div.filter(':first').show();  

$service_li.filter(':first').addClass(active_tabstate);  

$service_li.find('a').click(function(){  

var $a = jQuery(this),  

next_tab = $a.parent('li').prevAll().length,  

next_tab_height = $service_tabs.find('>div').eq(next_tab).outerHeight();  

if ( next_tab != active_tab ) {  

$service_tabs.css({height:next_tab_height});  

$service_div.filter(':visible')  

.animate( {opacity: 'hide'},500, function(){  

jQuery(this).parent().find('>div').eq(next_tab).animate( {opacity: 'show'},500 );  

} )  

//.end()  

//.eq(next_tab)  

//.animate( {opacity: 'show'},500 )  

;  

$service_li.removeClass(active_tabstate).filter(':eq('+next_tab+')').addClass(active_tabstate);  

active_tab = next_tab;  

}  

return false;  

}).hover(function(){  

if ( !jQuery(this).parent('li').hasClass(active_tabstate) && !is_ie ) jQuery(this).fadeTo('slow',.7);  

}, function(){  

if (!is_ie) jQuery(this).fadeTo('slow',1);  

});  

}  

var maintabswidth = $home_tabs.width();  

var maintabsleft = Math.round((960 - maintabswidth) / 2);  

if ( maintabswidth < 960 ) $home_tabs.css('left',maintabsleft);  

jQuery('.js #featured .container').css('visibility','visible');  

jQuery('.js #featured').css('background','none');  

window.setInterval( function() {Cufon.refresh('#main-tabs a');}, 100 );

Cufon.now();  

//]]>
</script>


Ну и само меню (можно даже использовать как верхнюю часть сайта smile )
Код
<div id="center-highlight">  

<div id="header">  

<div class="container clearfix">  

<a href="/">  

<img src="/logo.png" alt="NiceMenu" id="logo"/>  

</a>  

<ul id="top-menu" class="nav"><li id="menu-item-494" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-494"><a href="/">Home</a></li>  
<li id="menu-item-459" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-459"><a href="/">Page Templates</a>  
  <ul class="sub-menu">  
<li id="menu-item-577" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-577"><a href="/">Contact Form</a></li>  
<li id="menu-item-578" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-578"><a href="/">Gallery</a></li>  
<li id="menu-item-608" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-608"><a href="/">Portfolio</a>  
<ul class="sub-menu">  
<li id="menu-item-607" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-607"><a href="/">Portfolio Small</a></li>  
<li id="menu-item-606" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-606"><a href="/">Portfolio Medium</a></li>  
<li id="menu-item-605" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-605"><a href="/">Portfolio Large</a></li>  
<li id="menu-item-604" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-604"><a href="/">Portfolio With Sidebar</a></li>  
<li id="menu-item-611" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-611"><a href="/">Portfolio No Text</a></li>  
</ul>  
  </li>  
<li id="menu-item-576" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-576"><a href="/">Sitemap</a></li>  
<li id="menu-item-575" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-575"><a href="/">Advanced Search</a></li>  
<li id="menu-item-574" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-574"><a href="/">Member Login</a></li>  
<li id="menu-item-579" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-579"><a href="/">Full Width</a></li>  
<li id="menu-item-584" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-584"><a href="/">Blog Feed</a></li>  
  </ul>  
  </li>  
<li id="menu-item-462" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-462"><a href="/">Full Width</a></li>  
<li id="menu-item-463" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-463"><a href="/">Blog</a></li>  
<li id="menu-item-529" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-529"><a href="/">Shortcodes</a></li>  
<li id="menu-item-555" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-555"><a href="/">Gallery</a></li>  
  </ul>

</div> <!-- end .container -->  

</div> <!-- end #header -->


Из прикрепленного архива залейте картинки в папку images стили в папку css скрипт в папку js
Категория: jQuery | Добавил: Apocalypse | Теги: Замечательное, ucoz, на, JQuery, для, Меню
Просмотров: 485 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: