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ì?
Printable View
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ì?
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 cssCitazione:
Originalmente inviato da NLSweb
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 monitorCitazione:
Originalmente inviato da NLSweb
css1: header
css2: barra del menú
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 rossaCitazione:
Originalmente inviato da NLSweb
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.Citazione:
Originalmente inviato da NLSweb
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).Codice:$(window).scroll(function() {
var posizione = $(window).scrollTop();
if(posizione>205){
var y = posizione+"px";
$("#menu").css({"top":y});
}
});
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.Citazione:
Originalmente inviato da NLSweb
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 SITOCitazione:
Originalmente inviato da NLSweb
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.Citazione:
Originalmente inviato da NLSweb
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.
ecco un piccolo esempio:
http://nlsweb.altervista.org/esempiohomedinamica.html
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.Citazione:
Originalmente inviato da NLSweb
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.
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.Citazione:
Originalmente inviato da NLSweb
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.
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.Citazione:
Originalmente inviato da NLSweb
concordo con la priorità commerciale .
ti auguro un buon lavoro .
:thumbsup: ho trovato anche un programma grafico free che riduce il peso delle jpg senza compromettere la qualità, es. era 760kb ora è 304kbCitazione:
Originalmente inviato da NLSweb
Ciao,Citazione:
Originalmente inviato da NLSweb
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/
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ì.Citazione:
Originalmente inviato da NLSweb
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:-)Citazione:
Originalmente inviato da NLSweb