[v11] Integrazione Single Page Nav per sito monopagina

[lemonsong]

Se vogliamo costruire un sito monopagina con WS, possiamo usare i livelli ("Creazione della Mappa") per "puntare" ad un'àncora interna alla pagina.
In questo modo però, tutte le voci presenti nel menu principale risulteranno con lo stile "Voce per Pagina corrente".

Per evitare questo, possiamo ricorrere a jQuery come ha fatto, per esempio, essedi QUI

In questo esempio è stato integrato il plugin jQuery "Single Page Nav" (by Chris Wojcik): http://lemonsong.altervista.org/test_singlePageNav/

Il suddetto plugin è stato leggermente modificato per WS quindi, prima di tutto, dobbiamo scaricare il file modificato da QUI ed allegarlo al codice (cartella files o altro nome) tramite le funzioni del programma.

Questo il codice da inserire in Proprietà Pagina - Esperto - Prima della chiusura del tag HEAD:

<script src="files/jquery.singlePageNav.ws.js"></script>
<script>
$(document).ready(function () {
    $('#imMnMn li').removeClass('imMnMnCurrent');

    //singlePagNav - options
    $("#imMnMn").singlePageNav({
        offset: $('#imMnMn').outerHeight(),
        threshold: 140
    });
});
</script>

In rosso da personalizzare.
Possiamo aggiungere/modificare le opzioni del plugin secondo le nostre esigenze (consultare il sito dell'autore: https://github.com/ChrisWojcik/single-page-nav).

[Adriano Meis]

Su un sito monopagina è probabile nasca la necessità di avere delle voci di menu che puntino a pagine esterne,
se con X5 si prova ad aggiungere un livello che punta ad un sito esterno notiamo che il link non funziona.

L'autore dello script single-page-nav sul suo sito di esempio ha rimediato assegnando al link esterno la classe "external" e
aggiungendo un filtro nella funzione/opzioni dello script.

il codice da inserire in head diventa quindi così:

<script src="files/jquery.singlePageNav.ws.js"></script>
<script>
$(document).ready(function () {
    $('#imMnMn li').removeClass('imMnMnCurrent');


    //singlePagNav - options
    $("#imMnMn").singlePageNav({
        offset: $('#imMnMn').outerHeight(),
        filter: ':not(.external)',
        threshold: 140
    });
});
</script>

Lo scopo è di rimanere all'interno delle funzioni della mappa di x5, senza aggiungere link a mano.

Assegniamo la classe "external" al livello, entriamo nelle proprietà da creazione della mappa,
scegliamo il collegamento a file o url , file su internet e scriviamo

http://www.sitoesterno.com"class="external

( attenzione a come sono gli apici )

Chiedo una verifica di ciò che ho esposto nel caso avesse delle pecche che non ho ravvisato, grazie.

[lemonsong]

Da quello che vedo è tutto giusto.

Solo una piccola correzione per la validazione (probabilmente è un refuso): manca uno spazio tra i doppi apici e l'attributo class

http://www.sitoesterno.com" class="external

Grazie per l'aggiunta di questa opzione.

[andy67]

Questo script non funziona nel V13! Può questo script per i nuovi selettori "#imMnMn .main-menu" e "#imMnMn .static menu " corretta?