Menu in una Pagina

[SkyTechnologyes]

Come posso far si che questo Menu sia in un'unica pagina?

Cioè che non sia recenti.html e popolari.html, ma che sia solo una pagina, ad esempio pagina.html/php.

[autsel]

lavora sui css
fai 2 div diversi ed a seconda del click nascondi l'uno e visualizzi l'altro

[autsel]

ti ho fatto un piccolo esempio.... la via è questa, studiaci su.
forse la domanda sarebbe stata meglio nella sezione javascript

provalo in una pagina html o php e capirai come funziona.
Basta che cliccki all'interno del div bordato

 
<div id="div1" style="position:absolute; top:10px; left:10px; border: 2px solid #000000; width:100px;height:100px;display:inline;" onclick="cambiadiv(2);">DIV N. 1</div>
<div id="div2" style="position:absolute; top:10px; left:10px; border: 2px solid #FF0000; width:100px; height:100px;display:none;"onclick="cambiadiv(1);">DIV N. 2</div>

<script language="javascript">
function cambiadiv(i) {
	document.getElementById("div1").style.display="none";
	document.getElementById("div2").style.display="none";
	document.getElementById("div"+i).style.display="inline";
}

</script>

[SkyTechnologyes]

Ho fatto cosi, ma non mi funziona.
CSS

#page-wrap {
    width: 300px;
    margin: -270px 0 0 350px;
    position: absolute;
    top: 50%;
    left: 50%; 

Codice del menu:

[...]
<div="div1" style="display:inline;" onclick="cambiadiv(2)">
        <div id="page-wrap">
            <ul id="main-nav">
                <li class="current">[url="http://www.fantapic.net/recenti.html"]Recenti[/url]
                <li class="about">[url="http://www.fantapic.net/popolari.html"]Popolari[/url]
            [/list]
            <div class="clear"></div>
            <div id="featured">
                <div id="featured-content">
                    <h1>Recenti</h1>
                    


                        Elencate le Foto caricate piu recenti.
                    </p>
                </div>
            </div>
        </div>
    </div>
    
    <div id="div2" style="display:none;" onclick="cambiadiv(1)">
        <div id="page-wrap">
            <ul id="main-nav">
                <li class="home">[url="http://www.fantapic.net/recenti.html"]Recenti[/url]
                <li class="current">[url="http://www.fantapic.net/popolari.html"]Popolari[/url]
            [/list]
            <div class="clear"></div>
            <div id="featured">
                <div id="featured-content">
                    <h1>Popolari</h1>
                    


                        Elencate le Foto piu visitate/commentate del giorno.
                    </p>
                </div>
            </div>
        </div>
    </div> 

Puoi vedere QUI

Come mai?

[autsel]

a parte un errore di sintassi:

<div="div1" (manda id)

<div id="div1"

così non serve nel senso che hai ancora le due pagine in pagine differenti.

la sotituzione dovrebbe essere una cosa del genere:
vecchio codice:

<div id="div1" style="display:inline;" onclick="cambiadiv(2)">
        <div id="page-wrap">
            <ul id="main-nav">
                <li class="current">[url="http://www.fantapic.net/recenti.html"]Recenti[/url]
                <li class="about">[url="http://www.fantapic.net/popolari.html"]Popolari[/url]
            [/list]
            <div class="clear"></div>
            <div id="featured">
                <div id="featured-content">
                    <h1>Recenti</h1>
                    


                        Elencate le Foto caricate piu recenti.
                    </p>
                </div>
            </div>
        </div>
    </div>
    
    <div id="div2" style="display:none;" onclick="cambiadiv(1)">
        <div id="page-wrap">
            <ul id="main-nav">
                <li class="home">[url="http://www.fantapic.net/recenti.html"]Recenti[/url]
                <li class="current">[url="http://www.fantapic.net/popolari.html"]Popolari[/url]
            [/list]
            <div class="clear"></div>
            <div id="featured">
                <div id="featured-content">
                    <h1>Popolari</h1>
                    


                        Elencate le Foto piu visitate/commentate del giorno.
                    </p>
                </div>
            </div>
        </div>
    </div> 

va sostituito con:

<div id="page-wrap">
            <ul id="main-nav">
                <li class="current" id="div1" style="display:inline;" onclick="cambiadiv(2);">[url="http://www.fantapic.net/recenti.html"]Recenti[/url]
                <li class="about" id="div2" style="display:none;" onclick="cambiadiv(1);">[url="http://www.fantapic.net/popolari.html"]Popolari[/url]
            [/list]
            <div class="clear"></div>
            <div id="featured">
                <div id="featured-content">
                    <h1>Recenti</h1>
                    


                        Elencate le Foto caricate piu recenti.
                    </p>
                </div>
            </div>
        </div> 

cioè... nascondi i tag <li anzichè i <div

a questo punto però devi togliere i due tag <a href> all'interno dei tag[*] e sostituirli con il codice effettivo di ognuna delle due pagine.

In alternativa puoi utilizzare un include di php, oppure con jquery caricare nel tag[*] il contenuto di ogni pagina...

più facile a farsi che a spiegarsi.....

[SkyTechnologyes]

Capito tutto e Grazie mille davvero, ma una cosa sola mi sfugge...dov'è che dovrei mettere l'include?
P.s.: inoltre se poi tolgo l'<a href> per il link, come fa per passare da una tab all'altra?

[autsel]

include lo metti al posto dell'href.
Con questo metodo le tab sono tutte e due SEMPRE presenti nella pagina e devono essere complete di tutto il codice.
Lavorando sui css non fai altro che rendere visibile una e nascondere l'altra e di conseguenza quella nascosta non può essere utilizzata

[SkyTechnologyes]

Capito tutto, ma un dubbio rimane: se poi tolgo l'<a href> per il link, come fa per passare da una tab all'altra?

[autsel]

mmmm......
c'è qualche cosa che non mi torna.....

non avevi chiesto inizialmente un menu cge restasse su di un'unica pagina?

cioè... se fai click nelle due linguette superiori hai 2 menu di versi, e questo lo fai appunto renendo visibili 1 alla volta i menu.

Poi all'interno di ogni menu ci sanno tutti i link e con i tag <a>, infatti i tag <a> vanno tolti solo sui pulsanti per cambiare il menu

[SkyTechnologyes]

Allora ho sistemato cosi.

Html

<div id="page-wrap"> 
            <ul id="main-nav"> 
                <li class="current" onclick="cambiadiv(2)">Recenti</a> 
                <li class="about" onclick="cambiadiv(1)">Popolari</a> [/list]
            <div class="clear"></div>
            <div id="featured1" style="display:inline;">
                <div id="featured-content"> 
                    <h1>Recenti</h1> 
                    

 
                        Elencate le Foto caricate piu recenti. 
                    </p> 
                </div> 
            </div>
            <div id="featured2" style="display:none;">
                <div id="featured-content"> 
                    <h1>Popolari</h1> 
                    

 
                        Elencate le Foto piu visitate/commentate. 
                    </p> 
                </div> 
            </div> 
    </div> 

Funzione JS

function cambiadiv(i) 
    {
        document.getElementById("featured1").style.display="none";
        document.getElementById("featured2").style.display="none";
        document.getElementById("featured"+i).style.display="inline";
    } 

CSS: Puoi visualizzarlo QUI
PAGINA
Perché quel che voglio fare io è che spostandosi da una tendina all'altra sia il contenuto sotto a cambiare. Ma non funge.