0
我有一個單頁的網頁設計,其中菜單是垂直對齊和固定在左邊,每個頁面的內容在菜單上點擊右邊彈出。它是在打開索引頁時,只顯示沒有任何活動菜單的菜單。jQuery,HTML5網頁設計錯誤
但我希望主菜單被激活和網頁應該在適當的時候顯示加載索引頁時。
的家應該是積極和索引自動加載。
HTML
<ul id="menu">
<li><a id="link" href="#!/page_Home"><span></span><strong>Home</strong></a></li>
<li><a href="#!/page_About"><span></span><strong>About</strong></a></li>
<li><a href="#!/page_Portfolio"><span></span><strong>Gallery</strong></a></li>
<li><a href="#!/page_Services"><span></span><strong>Top Rated</strong></a></li>
<li><a href="#!/page_Contact"><span></span><strong>Contact</strong></a></li>
</ul>
jQuery的
$(window).load(function() {
var act='';
$('#content > ul > li').css({position:'absolute', display:'none'});
$('#content > ul > li').find('.box1').css({height:'0'})
$('#menu > li > a span').css({opacity:'0'})
$('#menu > li > a').hover(function(){
$(this).find(' > span').stop().animate({opacity:'1'},600);
}, function(){
if (!$(this).hasClass('active')) {
$(this).find(' > span').stop().animate({opacity:'0'},600);
}
})
$('#menu > li').each(function(num){
$(this).data({num:num})
})
$('#content > ul > li').each(function(num){
$(this).data({num:num})
})
if (location.hash.slice(0,3)=='#!/') {
page=location.hash.slice(3);
open_page('#'+page);
fl=false;
}
if ((location.hash=='#')||(location.hash=='')) {
open_page('');
fl=true;
$('#content').stop().animate({height:'668'})
}
$('a').click(function(){
if ($(this).attr('href').slice(0,3)=='#!/') {
page=$(this).attr('href').slice(3);
open_page('#'+page);
return false;
}
if ($(this).attr('data-type')=='close') {
close_page()
}
})
function open_page(page){
location.hash='#!/'+page.slice(1);
$('#menu a').removeClass('active').find(' > span').stop().animate({opacity:'0'},600);
Cufon.replace('#menu a', { fontFamily: 'Ubuntu', hover:true });
num=$(page).data('num');
$('#menu > li').each(function(){
if ($(this).data('num')==num) {
$(this).find('> a').addClass('active').find('> span').stop().animate({opacity:'1'},600);
Cufon.replace('#menu a', { fontFamily: 'Ubuntu', hover:true });
}
})
fl=false;
$('#content').stop().animate({height:'868'})
if (act!='') {
$(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){
$(act).css({display:'none'});
$(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
act=page;
});
})
} else {
$(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
act=page;
});
}
}
function close_page(page){
$('#menu a').removeClass('active').find(' > span').stop().animate({opacity:'0'},600);
Cufon.replace('#menu a', { fontFamily: 'Ubuntu', hover:true });
location.hash='#';
$(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){
$(act).css({display:'none'});
act='';
fl=true;
$('#content').stop().animate({height:'668'})
});
return false;
}
})