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.
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.
lavora sui css
fai 2 div diversi ed a seconda del click nascondi l'uno e visualizzi l'altro
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
codice:<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>
Ho fatto cosi, ma non mi funziona.
CSS
Codice del menu:Codice PHP:
#page-wrap {
width: 300px;
margin: -270px 0 0 350px;
position: absolute;
top: 50%;
left: 50%;
Puoi vedere QUICodice PHP:
[...]
<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>
Come mai?
Non preoccuparti di cosa sta per fare qualcun altro. Il miglior modo per predire il futuro è inventarlo. [Alan Kay]
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:
va sostituito con:Codice PHP:
<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>
cioè... nascondi i tag <li anzichè i <divCodice PHP:
<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>
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.....
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?
Non preoccuparti di cosa sta per fare qualcun altro. Il miglior modo per predire il futuro è inventarlo. [Alan Kay]
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
Capito tutto, ma un dubbio rimane: se poi tolgo l'<a href> per il link, come fa per passare da una tab all'altra?
Non preoccuparti di cosa sta per fare qualcun altro. Il miglior modo per predire il futuro è inventarlo. [Alan Kay]
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
Allora ho sistemato cosi.
Html
Funzione JSCodice PHP:
<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>
CSS: Puoi visualizzarlo QUICodice PHP:
function cambiadiv(i)
{
document.getElementById("featured1").style.display="none";
document.getElementById("featured2").style.display="none";
document.getElementById("featured"+i).style.display="inline";
}
PAGINA
Perché quel che voglio fare io è che spostandosi da una tendina all'altra sia il contenuto sotto a cambiare. Ma non funge.
Non preoccuparti di cosa sta per fare qualcun altro. Il miglior modo per predire il futuro è inventarlo. [Alan Kay]