Salve a tutti,
attualmente ho un sito sviluppato in un'unica pagina index suddivisa in "n" li div dove in ciascuno abbiamo dei contenuti.
Sto cercando senza successo di spostare i diversi contenuti in nuove pagine singole ma cercando di conservare il funzionamento dinamico del menu.
file .js
struttura html
qualche idea di come possa o se possa procedere ? Grazie in anticipo
attualmente ho un sito sviluppato in un'unica pagina index suddivisa in "n" li div dove in ciascuno abbiamo dei contenuti.
Sto cercando senza successo di spostare i diversi contenuti in nuove pagine singole ma cercando di conservare il funzionamento dinamico del menu.
file .js
Codice:
$(function(){
var act;
var fl=true;
function all_null(){
$('#content > ul > li').css({visibility:'hidden', right:'-9999px'});
$('#page_0').css({visibility:'visible', right:'0'});
$('.box_img').css({width:'0', height:'0', left:'337px', top:'337px;'});
$('.text').css({opacity:'0', visibility:'visible'});
$('.but_close img').css({top:'29px',left:'29px', width:'0', height:'0', zIndex:'1'});
close_anim();
}
function null_content(){
}
all_null();
function open_page(page){
nav=parseInt(page.substr(6));
$('#footer_menu li').removeClass('active');
$('#footer_menu li').eq(nav).addClass('active');
$('#menu li a img').css({opacity:'0'});
if (page=='#page_0') {
$('.trigger').click();
$('#menu li a img').stop().animate({opacity:'1'},400);
$('.menu_box .images span').stop().animate({rotate:'0deg'},0);
$('.menu_box .images span').css({opacity:'0',visibility:'hidden'});
$('.menu_box .images .nav1').css({opacity:'1',visibility:'visible'});
menu_hover();
$('#page_0').stop().animate({width:'940px'});
$('#page_0 .inner').stop().animate({marginLeft:'387', marginTop:'255'});
fl=true;
$('#menu #nav1 a').mouseenter();
$('.menu_box .images span').stop().animate({rotate:'-=360deg'},800,function(){
$('.menu_box .images span').stop().animate({rotate:'0deg'},0);
});
act=page;
location.hash=page+'/'
} else {
if (fl) {
$('#page_0').stop().animate({width:'270px'});
$('#page_0 .inner').stop().animate({marginLeft:'23', marginTop:'243'});
fl=false
}
$('.images span').animate({rotate:51.4+360*k+'deg'}, function(){
$('.images span').animate({rotate:51.4+360*k+'deg'},0)
$('.menu_box .images span').stop().animate({opacity:'0'},400, function(){$(this).css({visibility:'hidden'})})
$('.menu_box .images .nav1').css({visibility:'hidden', opacity:'0'});
$('.menu_box .images .nav'+(nav+1)).css({visibility:'visible'}).stop().animate({opacity:'1'},400);
$('.tittles > div').stop().animate({opacity:'0'},400, function(){$(this).css({visibility:'hidden'})})
$('.tittles > .nav'+(nav+1)).css({visibility:'visible'}).stop().animate({opacity:'1'},400);
$(page).css({visibility:'visible', right:'0'});
close_anim();
$(page).find('.box_img').stop().animate({width:'100%', height:'100%',left:'0', top:'0'},400, function(){
$(page).find('.text').css({visibility:'visible'}).stop().animate({opacity:'1'},400, function(){
$(this).css({opacity:'none'})
$(page).find('.but_close').css({display:'block'}).find('.img').stop().animate({top:'0', left:'0', width:'100%', height:'100%'},400)
act=page;
location.hash=page+'/'
})
})
})
}
}
var page=location.hash.slice(0,-1);
if ((page=='')||(page=='#')) {
page='#page_0';
}
open_page(page);
var nav=parseInt(page.substr(6));
$('#footer_menu li').eq(nav).addClass('active');
$('a').click(function(){
if ($(this).attr('href').substr($(this).attr('href').indexOf('#'),6)=='#page_') {
page=$(this).attr('href');
if (act=='#page_0') {
if (page=='#page_0') {
$('.menu').removeClass('close')
open_page(page);
} else{
$('.trigger').click();
$('#menu li a').unbind('mouseenter')
$('#menu li a img').stop().animate({opacity:'0'},200);
open_page(page);
}
} else{
$(act).find('.but_close').unbind('mouseenter, mouseleave').find('img').stop().animate({top:'29', left:'29', width:'0', height:'0'},400, function(){$(act).find('.but_close').css({display:'none'})});
$(act).find('.text').stop().animate({opacity:'0'},400, function(){
$(act).find('.text').css({visibility:'hidden'});
$(act).find('.box_img').stop().animate({top:'337px',left:'337px', width:'0', height:'0'},400, function(){
$(act).css({visibility:'hidden',right:'-9999px'})
open_page(page);
})
})
}
return false;
}
})
})
function close_anim(){
$('.but_close').mouseenter(function(){
$(this).find('.img_act').css({zIndex:'2'}).stop().animate({top:'0',left:'0', width:'100%', height:'100%'},400)
$(this).find('.img').css({zIndex:'1'}).stop().animate({ top:'29',left:'29', width:'0', height:'0'})
}).mouseleave(function(){
$(this).find('.img').css({zIndex:'2'}).stop().animate({ top:'0',left:'0', width:'100%', height:'100%'})
$(this).find('.img_act').css({zIndex:'1'}).stop().animate({ top:'29',left:'29', width:'0', height:'0'})
})
}
struttura html
Codice:
<section id="content">
<ul>
<li id="page_0">
<div class="inner">
<nav class="menu">
<ul id="menu" class="reset">
<li id="nav1"><a href="#page_0"><img src="images/nav1.png" alt="" class="img"><img src="images/nav1_active.png" alt="" class="img_act"></a></li>
<li id="nav7"><a href="links.php"><img src="images/nav7.png" alt="" class="img"><img src="images/nav7_active.png" alt="" class="img_act"></a></li>
<li id="nav6"><a href="contatti.php"><img src="images/nav6.png" alt="" class="img"><img src="images/nav6_active.png" alt="" class="img_act"></a></li>
<li id="nav5"><a href="attrezzatura.php"><img src="images/nav5.png" alt="" class="img"><img src="images/nav5_active.png" alt="" class="img_act"></a></li>
<li id="nav4"><a href="servizi.php"><img src="images/nav4.png" alt="" class="img"><img src="images/nav4_active.png" alt="" class="img_act"></a></li>
<li id="nav3"><a href="portfolio.php"><img src="images/nav3.png" alt="" class="img"><img src="images/nav3_active.png" alt="" class="img_act"></a></li>
<li id="nav2"><a href="company_1.php"><img src="images/nav2.png" alt="" class="img"><img src="images/nav2_active.png" alt="" class="img_act"></a></li>
</ul>
</nav>
<div class="menu_box">
<div class="images">
<span class="nav1"></span>
<span class="nav2"></span>
<span class="nav3"></span>
<span class="nav4"></span>
<span class="nav5"></span>
<span class="nav6"></span>
<span class="nav7"></span>
<span class="nav8"></span>
<span class="nav9"></span> </div>
<div class="tittles">
<div class="nav1">
<h2>Home </h2>
</div>
<div class="nav2">
<h2>Company </h2>
<ul class="addit_menu">
<li><a href="company_1.php">Mission</a></li>
<li class="end"><a href="#page_1b">Il Team </a></li>
</ul>
</div>
<div class="nav3">
<h2>Portfolio </h2>
<ul class="addit_menu">
<li><a href="#page_2">Showreel</a></li>
<li class="end"><a href="#page_2b">Works</a></li>
</ul>
</div>
<div class="nav4">
<h2>Servizi </h2>
</div>
<div class="nav5">
<h2>Attrezzatura </h2>
<ul class="addit_menu">
<li><a href="#page_4">Produzione</a></li>
<li class="end"><a href="#page_4b">Post produzione</a></li>
</ul>
</div>
<div class="nav6">
<h2>Contatti </h2>
</div>
<div class="nav7">
<h2>Links </h2>
</div>
<div class="nav8">
<h2>Privacy </h2>
</div>
<div class="nav9">
<h2>Read more </h2>
</div>
</div>
</div>
</div>
</li>
<li id="page_1">
<div class="box">
<img src="images/box.png" alt="" class="box_img">
<a href="#page_0" class="but_close"><img src="images/close1.png" alt="" class="img"><img src="images/close_active.png" alt="" class="img_act"></a>
<div class="text">
<h3>Mission </h3>
<div class="scroll-pane">
<p>CONTENUTO PRESENTAZIONE</p>
</div>
</div>
</div>
</li>
<li id="page_1b">
<div class="box">
<img src="images/box.png" alt="" class="box_img">
<a href="#page_0" class="but_close"><img src="images/close1.png" alt="" class="img"><img src="images/close_active.png" alt="" class="img_act"></a>
<div class="text">
<h3>Il Team </h3>
<div class="scroll-pane">
<div class="wrapper">
<div class="cols marg_right1">
<figure class="pad1"><img src="images/page4_img1.jpg" alt=""></figure>
<p><span class="color1">Mauris fermentum.</span><br>
Praesent vestibulum molestie lacus. Aenea nomy hendrerit mauris. Phasellus porta.<br>
</div>
<div class="cols marg_right1">
<figure class="pad1"><img src="images/page4_img1.jpg" alt=""></figure>
<p><span class="color1">Quisque nulla.</span><br>
Praesent vestibulum molestie lacus. Aenea nomy hendrerit mauris. Phallus porta. Quisque nulla. Vestibulum libero nisl ac turpis.<br>
</div>
<div class="cols">
<figure class="pad1"><img src="images/page4_img1.jpg" alt=""></figure>
<p><span class="color1">Duis ac turpis.</span><br>
Praesent vestibulum molestie lacus. Aenea nomy hendrerit mauris. Phasellus porta.<br>
</div>
</div>
</div>
</div>
</div>
</li>
qualche idea di come possa o se possa procedere ? Grazie in anticipo