Visualizzazione risultati 1 fino 29 di 29
Like Tree1Likes
  • 1 Post By NLSweb

Discussione: Bloccare barra del menù

  1. #1
    Guest

    Predefinito Bloccare barra del menù

    Per dare un idea, questo Sito se fai scorrere la pagina verso l'alto, la barra del menu si blocca sopra lo schermo, come si fa a creare così?

  2. #2
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    ti basta usare FRAMESET in html , o ci sono moltissimi altri modi .. dipende come strutturi il sito

  3. #3
    Guest

    Predefinito

    Citazione Originalmente inviato da NLSweb Visualizza messaggio
    ti basta usare FRAMESET in html , o ci sono moltissimi altri modi .. dipende come strutturi il sito
    Non è supportato da HTML5, nel mio sito quella barra è in un css

  4. #4
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    puoi creare un div menu con il tuo css di stile ed un altro div contenitore per tutto il resto , e fai scorrere solo il contenitore all'evento scroll del mouse .
    oppure puoi usare un iframe come contenitore , od anche usando jQuery AJAX con la funzione load

  5. #5
    Guest

    Predefinito

    Citazione Originalmente inviato da NLSweb Visualizza messaggio
    puoi creare un div menu con il tuo css di stile ed un altro div contenitore per tutto il resto , e fai scorrere solo il contenitore all'evento scroll del mouse .
    oppure puoi usare un iframe come contenitore , od anche usando jQuery AJAX con la funzione load
    I css ci sono già, si tratta di bloccare il css2 quando arriva sopra l monitor

    css1: header

    css2: barra del menú

  6. #6
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    ho creto una piccola pagina di esempio dove puoi vedere come usare jQuery e CSS per ottenere un buon risultato.
    chiaramente , il codice può essere migliorato ...

    http://nlsweb.altervista.org/esempiomenualtop.html

  7. #7
    Guest

    Predefinito

    Citazione Originalmente inviato da NLSweb Visualizza messaggio
    ho creto una piccola pagina di esempio dove puoi vedere come usare jQuery e CSS per ottenere un buon risultato.
    chiaramente , il codice può essere migliorato ...

    http://nlsweb.altervista.org/esempiomenualtop.html
    Se però la tua si fa scorrere velocemente, la barra verde non si attratta a quella sopra rossa

  8. #8
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    come dicevo il codice è solo di esempio e può / deve essere migliorato
    per il riposizionamento basta mettere uno script di controllo (in pratica un else all'istruzione if) con una variazione di posizione

  9. #9
    Guest

    Predefinito

    Citazione Originalmente inviato da NLSweb Visualizza messaggio
    come dicevo il codice è solo di esempio e può / deve essere migliorato
    per il riposizionamento basta mettere uno script di controllo (in pratica un else all'istruzione if) con una variazione di posizione
    Sto tendando col css, se metto position: fixed; la barra si blocca lì e sotto scorre la pagina. Quello che non capisco, è come fa a riconoscere che ha toccato la parte superiore (e perciò si ferma) dello schermo.
    Ultima modifica di gruppoalveo : 31-05-2014 alle ore 16.53.30

  10. #10
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    Codice:
    $(window).scroll(function() {
     var posizione = $(window).scrollTop();
     if(posizione>205){
      var y = posizione+"px";
      $("#menu").css({"top":y});
     }
    });
    lo script controlla l'evento scroll di window , quindi legge la posizione con scrollTop e controlla quando supera l'altezza del div sopra il menu (nell'esempio 200px) ; quando ciò accade assegna la posizione al menu (top -> posizione scroll).
    ma la position del menù deve essere absolute per ottenere l'effetto.

  11. #11
    Guest

    Predefinito

    Citazione Originalmente inviato da NLSweb Visualizza messaggio
    Codice:
    $(window).scroll(function() {
     var posizione = $(window).scrollTop();
     if(posizione>205){
      var y = posizione+"px";
      $("#menu").css({"top":y});
     }
    });
    lo script controlla l'evento scroll di window , quindi legge la posizione con scrollTop e controlla quando supera l'altezza del div sopra il menu (nell'esempio 200px) ; quando ciò accade assegna la posizione al menu (top -> posizione scroll).
    ma la position del menù deve essere absolute per ottenere l'effetto.
    Ti ringrazio per il codice, ma sai cosa ho pensato? Forse un menù scroll va bene se si ha solo quel menù, ma nel mio sito ne ho uno anche sinistra, perciò se io rendo scroll il menù superiore al visitatore sembra che sia il più importante, ma in realtà anche il sinistro è importante. Perciò io direi di lasciare tutto come prima.

  12. #12
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    un ultimo consiglio ... non creare troppi menu , l'utente ha bisogno di punti di riferimento mentre naviga.
    buona fortuna

  13. #13
    Guest

    Predefinito

    Citazione Originalmente inviato da NLSweb Visualizza messaggio
    un ultimo consiglio ... non creare troppi menu , l'utente ha bisogno di punti di riferimento mentre naviga.
    buona fortuna
    Ho dovuto crearne 2 anche per estetica, ho molti articoli SITO

  14. #14
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    il sito è ben strutturato , se vuoi un consiglio il menù laterale sinistro (che è al mio avviso il più importante) potresti gestirlo come un tab menu sotto il menu in alto al centro ; quando clicchi su un tab si apre il sottomenu con le voci.
    il logo , il menu con i tab menu li lascierei sempre in primo piano (non li fare scrorrere via con lo scroll down della pagina).

  15. #15
    Guest

    Predefinito

    Citazione Originalmente inviato da NLSweb Visualizza messaggio
    il sito è ben strutturato , se vuoi un consiglio il menù laterale sinistro (che è al mio avviso il più importante) potresti gestirlo come un tab menu sotto il menu in alto al centro ; quando clicchi su un tab si apre il sottomenu con le voci.
    il logo , il menu con i tab menu li lascierei sempre in primo piano (non li fare scrorrere via con lo scroll down della pagina).
    Perciò, se ho ben capito, il menu sx lo metto sotto quello alto e lo faccio diventare un menù a scomparsa, tipo quello che hanno i browsers in alto. Come fai a lasciare sempre in primo piano il logo ed il menù, sono un po grandi.

  16. #16
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    per la dimensione non mi preoccuperi troppo , basta ottimizzare un po' gli spazi :
    ad esempio l'ombra del logo volta verso l'alto ed il data time , se li ricollochi in altro modo ottieni l'altezza per il tab.

    per far si che la parte superiore sia sempre visibile , per me il modo più semplice è quello di modificare la struttura html
    avrai due div , uno per il top (menu, logo e tab) e l'altro per il contenitore

    il contenuto del contenitore potrai caricarlo (load) con un semplice jQuery , rendendolo quindi dinamico; questo ti permetterà di avere il top sempre in primo piano e di far scorrere il conteiner liberamente.

  17. #17
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

  18. #18
    Guest

    Predefinito

    Citazione Originalmente inviato da NLSweb Visualizza messaggio
    per la dimensione non mi preoccuperi troppo , basta ottimizzare un po' gli spazi :
    ad esempio l'ombra del logo volta verso l'alto ed il data time , se li ricollochi in altro modo ottieni l'altezza per il tab.

    per far si che la parte superiore sia sempre visibile , per me il modo più semplice è quello di modificare la struttura html
    avrai due div , uno per il top (menu, logo e tab) e l'altro per il contenitore

    il contenuto del contenitore potrai caricarlo (load) con un semplice jQuery , rendendolo quindi dinamico; questo ti permetterà di avere il top sempre in primo piano e di far scorrere il conteiner liberamente.
    Inizialmente il menù sinistro lo rendevo scroll con jQuery, tipo come quello che c'è in FAQ, però mettendomi nei panni del visitatore ho notato che l'utente vuole vedere tutto e subito, è per questo che ora è così in modo che quando entra ha subito la panoramica.

    Poi, riguardo al logo fisso, io dicevo che è un po' grande perché lo osservo dal mio mac 13 pollici, ed esiste anche l'11…è la grandezza del monitor che fa la differenza.
    Ultima modifica di gruppoalveo : 01-06-2014 alle ore 00.08.55

  19. #19
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    ridimensiona il logo in base alla dimensione della window

    $( window ).height();
    $( window ).width();

    o.. addirittura ridimensiona html document

    $( document ).width();
    $( document ).height();

    in base alla dimensione della window
    Ultima modifica di NLSweb : 01-06-2014 alle ore 00.14.15

  20. #20
    Guest

    Predefinito

    Citazione Originalmente inviato da NLSweb Visualizza messaggio
    ridimensiona il logo in base alla dimensione della window

    $( window ).height();
    $( window ).width();

    o.. addirittura ridimensiona html document

    $( document ).width();
    $( document ).height();

    in base alla dimensione della window
    Per questo uso le percentuali anche per i font, poi ho guardato il sito con un 15 ed era in propozione, anche usando i tasti + e - dei browser rimane omogeneo.

    Qui secondo me, o si riscrive la parte del logo oppure è meglio tenerlo così. Per es. Facebook ha il menù superiore scroll e non sta male perché è piccolo. Io non posso mettere una cosa del genere.

  21. #21
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    probabilmente hai ragione ... il top diventerebbe troppo invasivo...

    potresti pensare a due versioni del logo : una estasa (come adesso) ed una ridotta (tipo banner)

    quindi potresti all'inizio presentaro per intero , quindi dopo qualche secondo ritrarlo e mostrare il logo ridotto
    al passaggio del mouse sul logo lo mostri per intero , all'uscita lo riduci

    ..è solo un idea ..

  22. #22
    Guest

    Predefinito

    Citazione Originalmente inviato da NLSweb Visualizza messaggio
    probabilmente hai ragione ... il top diventerebbe troppo invasivo...

    potresti pensare a due versioni del logo : una estasa (come adesso) ed una ridotta (tipo banner)

    quindi potresti all'inizio presentaro per intero , quindi dopo qualche secondo ritrarlo e mostrare il logo ridotto
    al passaggio del mouse sul logo lo mostri per intero , all'uscita lo riduci

    ..è solo un idea ..
    Una regola commerciale che ho capito, è che il cliente deve VEDERE, perciò più gli imprimi negli occhi il prodotto e più gli rimane nel ricordo, perciò è meglio che ci sia un logo ben visibile, io lo lascerei così, anche se, da come si può notare nella sez. + Letti, gli utenti sono più interessati ai miei articoli che non hai prodotti.

  23. #23
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    concordo con la priorità commerciale .

    ti auguro un buon lavoro .

  24. #24
    Guest

    Predefinito

    Citazione Originalmente inviato da NLSweb Visualizza messaggio
    concordo con la priorità commerciale .

    ti auguro un buon lavoro .
    ho trovato anche un programma grafico free che riduce il peso delle jpg senza compromettere la qualità, es. era 760kb ora è 304kb
    Ultima modifica di gruppoalveo : 01-06-2014 alle ore 10.16.50

  25. #25
    Guest

    Predefinito

    Citazione Originalmente inviato da NLSweb Visualizza messaggio
    Codice:
    $(window).scroll(function() {
     var posizione = $(window).scrollTop();
     if(posizione>205){
      var y = posizione+"px";
      $("#menu").css({"top":y});
     }
    });
    lo script controlla l'evento scroll di window , quindi legge la posizione con scrollTop e controlla quando supera l'altezza del div sopra il menu (nell'esempio 200px) ; quando ciò accade assegna la posizione al menu (top -> posizione scroll).
    ma la position del menù deve essere absolute per ottenere l'effetto.
    Ciao,

    ho ripescato il tuo post perché voglio fare una prova. Ho messo position: absolute; nel css della barra del menu superiore e lo script. Ma non funziona. http://www.gruppoalveo.altervista.org/

  26. #26
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    hai chiaramento modificato lo script per puntare al tuo menu' superiore (class="bottoni") ...
    ed hai modificato il valore di controllo della posizione con l'altezza relativa al tuo menu ..

    se hai eseguito tutto e non funziona , forse bisogna capire bene come implementarlo , visto che il tuo sito e' complesso non sara' immediato trovare il buon risultato..

    ho pensato anche ad una soluzione diversa .. ma la devo sperimentare prima..

  27. #27
    Guest

    Predefinito

    Citazione Originalmente inviato da NLSweb Visualizza messaggio
    hai chiaramento modificato lo script per puntare al tuo menu' superiore (class="bottoni") ...
    ed hai modificato il valore di controllo della posizione con l'altezza relativa al tuo menu ..

    se hai eseguito tutto e non funziona , forse bisogna capire bene come implementarlo , visto che il tuo sito e' complesso non sara' immediato trovare il buon risultato..

    ho pensato anche ad una soluzione diversa .. ma la devo sperimentare prima..
    Nel frattempo ci sono riuscito, però la barra del menu non si ferma sempre allo stesso punto, a volte fa lo scroll a scatti, anche quella del tuo esempio fa così.

  28. #28
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    e prorpio per questo che ho pensato ad una soluzione diversa , ma la devo sviluppare...
    il problema del mio script e' che l'evento che legge lo scrolling non restituisce dei valori assoluti in tempo reale tali da parmettere una perfetta sincronia degli elementi.

    ho appena fatto una prova qui

    che funziona meglio come comportamento , ma ha delle implicazioni estetiche quando (e se) lo implementerai nel tuo sito.

    in pratica ho eliminato il continuo riposizionamento creando solo due posizione una absolute e l'altra fixed.
    Ultima modifica di NLSweb : 23-06-2014 alle ore 23.35.16
    renatino78 likes this.

  29. #29
    renatino78 non è connesso Neofita
    Data registrazione
    10-06-2014
    Messaggi
    1

    Thumbs up Grazie

    Citazione Originalmente inviato da NLSweb Visualizza messaggio
    e prorpio per questo che ho pensato ad una soluzione diversa , ma la devo sviluppare...
    il problema del mio script e' che l'evento che legge lo scrolling non restituisce dei valori assoluti in tempo reale tali da parmettere una perfetta sincronia degli elementi.

    ho appena fatto una prova qui

    che funziona meglio come comportamento , ma ha delle implicazioni estetiche quando (e se) lo implementerai nel tuo sito.

    in pratica ho eliminato il continuo riposizionamento creando solo due posizione una absolute e l'altra fixed.
    Esempio molto utile. Ti ringrazio:-)

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •