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ì?
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
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
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
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
Ultima modifica di gruppoalveo : 31-05-2014 alle ore 16.53.30
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.
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
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).
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.
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
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
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.
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.
concordo con la priorità commerciale .
ti auguro un buon lavoro .
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/
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..
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