visualizzazione sotto-menu di menu a tendina

[flydrose]

Buonasera, vorrei chiedere se qualcuno potesse spiegarmi se e come fosse possibile allineare le voci del sotto-menu su di un'unica riga in orizzontale, invece che elencate in verticale, con css.
Scusate la domanda magari banale, ma io non ci arrivo.
Grazie a chi mi risponderà

[KillerWorm]

Ciao, è possibile fare in vari modi, non c'è una regola fissa, bisogna prima di tutto capire quale è la situazione di partenza quindi sarà possibile valutare come intervenire per ottenere ciò che stai chiedendo. Se posti un po' di codice HTML e le eventuali regole CSS che sono applicate, si potrà ragionare sulle possibili soluzioni. Se la pagina in questione è online e accessibile pubblicamente, puoi postare il link; sarà più semplice, per chi vuole aiutarti, verificare direttamente l'attuale situazione ed eventualmente capire come intervenire.

[flydrose]

Ciao grazie per la risposta, faccio che postare il link di prova così magari rimane più semplice da consultare.
Il menu in questione, sarebbe quello orizzontale subito sotto la prima immagine di banner, mi piacerebbe che, invece di apparirmi il sotto menu in verticale, mi apparisse su di un'unica riga in orizzontale. Altra cosa, ridimensionando la finestra, noto che viene visualizzato non proprio in modo bello da vedere, non saprei se ci sarebbe un modo migliore, nel caso sono disponibilissimo a suggerimenti vari ed eventuali. Naturalmente se ci fossero anche altri suggerimenti in generale, sarei strafelice di ascoltare, in modo da apprendere al meglio.

http://www.flydrose.epizy.com/indexprova.html

[KillerWorm]

Ciao, bene, ho visto. Per mettere in orizzontale gli elementi del sottomenu il discorso è abbastanza semplice. La larghezza dell'elemento contenitore <ul> attualmente è fissa, basterebbe lasciarla automatica.

Nel file style2col.css alla riga 77 è definita questa regola:

#menu_s li:hover ul {
	position: absolute;
	display: block;
	z-index: 1;
	width: 120px;
	padding: 0;
	margin: 0;
	border-top: 1px solid white;
	border-radius: 5px;
	background: #000000;
}

basterebbe rimuovere la riga in rosso (width: 120px;) ma il problema ora sta nel capire come vuoi che sia posizionato l'intero sottomenu.

Al momento la posizione resta quella di default, cioè le voci restano allineate da destra a sinistra a partire dal limite sinistro della voce del menu padre; in tal caso però, riducendo la finestra, i sottomenu più a destra vanno a ridimensionarsi e le voci si incolonnano.

Se si forzasse la disposizione orizzontale rischierebbero comunque di risultare tagliate fuori dal limite destro della pagina.

Si potrebbe pensare di centrare i blocchi relativi ai singoli sottomenu rispetto alla voce del menu padre. Se ci fossero molte voci di sottomenu, il problema precedente rimarrebbe.

Si potrebbe pensare di centrare i sottomenu rispetto all'intera larghezza del menu principale (o della pagina) ma ci sarebbe però un problema di corrispondenza per le voci di menu più esterne. Ad esempio se la prima voce avesse una sola voce di sottomenu, queste risulterebbero troppo distanti dal momento che il sottomenu risulterà al centro dell'intera larghezza, col rischio di non poter nemeno raggiungere col cursore tale sottomenu perché si uscirebbe dall'area sensibile per cui viene mantenuto aperto il sottomenu.

Si potrebbe però pensare di estendere il contenitore del sottomenu mantenendo le voci centrate rispetto a tutta la larghezza, quindi risolvere il precedente problema, ma nascerebbe un problema di definizione della grafica; infatti il contenitore del sottomenu ha un bordo superiore visibile che si estenderebbe per tutta la larghezza.

Inutile continuare ad elencare ipotetici scenari, piuttosto sarebbe più opportuno che tu facessi i tuoi ragionamenti e magari fornissi delle indicazioni più precise su come vorresti sia impostata esattamente la cosa; eventualmente anche una bozza grafica potrebbe essere utile per comprendere il risultato da ottenere.

Altra cosa, ridimensionando la finestra, noto che viene visualizzato non proprio in modo bello da vedere, non saprei se ci sarebbe un modo migliore, nel caso sono disponibilissimo a suggerimenti vari ed eventuali.

Qui entriamo in un discorso di impostazione responsive. Potrebbero esserci diverse soluzioni. In linea di massima per gestire al meglio le diverse impaginazioni relativamente alla dimensioni del viewport (cioè della finestra) si utilizzano i breakpoint con i quali è possibile definire diverse regole a seconda dell'attuale dimensione del viewport.

Il discorso però si estenderebbe troppo se deve essere affrontato a partire dalle basi. Ti consiglio eventualmente di dare uno sguardo a qualche guida per apprendere (qualora tu fossi a digiuno) quelle nozioni fondamentale relative all'impostazione di layout responsive.
Puoi iniziare da questa guida: https://www.html.it/guide/responsive...sign-la-guida/

Se vuoi approfondire puoi trovare altri interessanti riferimenti a guide ed articoli al capitolo 3 dei link utili CSS.

Definiti i breakpoint potresti ad esempio decidere di impostare una grandezza del font più piccola quando il viewport si riduce ad una determinata dimensione; magari ridurre anche gli spazi tra una voce e l'altra del menu. E' chiaro però che se il menu stesso comprende molte voci, tali da non starci comunque in una singola riga, bisognerà valutare bene quale disposizione si intende ottenere.

Spesso, per visualizzazioni su mobile, si adopera quello che in gergo viene chiamato "hamburger menu", cioè un menu nascosto che si estende (generalmente in colonna) premendo/toccando il pulsante ☰ (le famose tre lineette che ricordano appunto un hamburger) ma qui ci sono diverse scuole di pensiero che mettono in discussione l'usabilità di tale sistema. In tal caso dovrai valutare bene se e come puoi applicarlo al tuo progetto.

Tra le altre cose, riducendo la finestra nella tua pagina, noto che i vari blocchi di testo (a fianco alle immagini tra i contenuti) vengono tagliati in altezza; questo, perché è stata impostata un'altezza fissa per quei contenitori. Mi sembra di capire che il layout non sia stato concepito per essere responsive. Il discorso diventa troppo ampio ed eterogeneo per poterne discutere in un'unica discussione del forum. Il mio consiglio è quello di iniziare intanto a leggere qualche guida, come già indicato, quindi cercare di risolvere un problema alla volta.

Ritornando quindi al menu, prova a impostare ciò che ti ho indicato e ragionare tu stesso sulla disposizione esatta che vorresti ottenere. Fai sapere se serve ulteriore aiuto.

Buon proseguimento.

[flydrose]

Grazie. Farò un pò di prove e rileggo bene il tutto e ti farò sapere, gentilissimo.

[flydrose]

Ciao KillerWorm. Scusami, sto andando avanti un pò a rilento perchè ultimamente non riesco a proseguire nella mia pagina causa altri impegni, ma qualcosa sto facendo.. intanto completando i testi, poi con calma guarderò anche la responsività (spero averlo detto giusto )
Appena possibile pubblicherò gli aggiornamenti così magari mi darai, spero, un tuo preziosissimo parere.

Dimenticavo di dire una cosa per quanto riguarda i blocchi con testo e immagini accanto che dicevi non pensavi concepito per essere responsive. In realtà il sito è concepito per esserlo, avevo solo impostato l'altezza dei blocchi perchè volevo inserire un link che mi collegasse ad una pagina apposita per parlare dei vari argomenti in questione, lasciandomi una specie di riassunto o testo parziale per rendere l'idea di cosa trattasse l'argomento, così che cliccando su "continua a leggere", l'utente venga reindirizzato su di un'altra pagina. Scusami se la mia spiegazione è un pò contorta, ma sto scrivendo di fretta.

[KillerWorm]

Ciao KillerWorm. Scusami, sto andando avanti un pò a rilento
[...]
ma qualcosa sto facendo..

Ciao, nessun problema, figurati mi fa comunque piacere rileggerti

poi con calma guarderò anche la responsività (spero averlo detto giusto )

bene

Dimenticavo di dire una cosa per quanto riguarda i blocchi con testo e immagini
[...]
cliccando su "continua a leggere", l'utente venga reindirizzato su di un'altra pagina. Scusami se la mia spiegazione è un pò contorta, ma sto scrivendo di fretta.

Capito, in tal caso però, riducendo il contenitore, il testo potrebbe risultare letteralmente tagliato producendo un effetto sgradevole e nascondendo addirittura il presunto link "continua a leggere". Suppongo tu debba lavorarci ancora, ad ogni modo una delle soluzioni più semplici e utilizzate è quella di avere i testi di anteprima già preparati preventivamente, tenendo conto ad esempio di un numero massimo di caratteri o parole, per cui senza troncamenti al volo del testo o tecniche simili; lasciare quindi il contenitore libero di estendersi in base al suo effettivo contenuto, dal momento che il testo sarà comunque breve, e inserire l'eventuale link "Continue..." del caso.

Eventuali tecniche di troncamento sono possibili via CSS ma attualmente hanno delle limitazioni (come l'uso della proprietà text-overflow:ellipsis non supportato però da contenuto multiriga) o sono macchinose (vedi questo Pen o altri simili approcci, qui, qua, che potrebbero fare al caso ma in cui si usano dei "sofisticati hack" che lasciano il tempo che trovano).

Una novità in CSS3 è la proprietà line-clamp con cui è possibile specificare il numero massimo di linee di testo da mostrare. Potrebbe essere una soluzione alternativa in questo caso, se l'intento è quello di troncare il testo ad un tot di righe. Attualmente è supportata dalle ultime versioni di tutti i moderni browser (vedi caniuse) ma non è ancora una specifica standard (va usata col prefisso -webkit-), per cui è una soluzione che prenderei con le pinze.

A mio parere la scelta più efficace resta quella di usare, come anteprima, un sunto del testo preparato preventivamente ad hoc e lasciato comunque libero di occupare il suo spazio, considerando magari anche il fattore responsive, e aggiungere il semplice link a fine testo o in basso al contenitore... ma questa è un'altra storia da trattare magari in un'altra discussione.

Per il momento buon proseguimento e in bocca al "luppolo" per tutto il resto

[flydrose]

Ciao KillerWorm, chiedo sempre scusa per le mie lunghe assenze, ma ho molto poco tempo ultimamente causa incremento lavoro per il periodo quarantena, famiglia, ecc, quindi proseguo molto a rilento per il mio "sito", e un pezzettino alla volta.
Mi sono cimentato nella lettura della guida responsive, anche se per ora poco anche perché temo di fare confusione con la marea di idee e miglioramenti che mi frullano per la mente.
Per ora mi sono concentrato sulle modifiche base di impaginazione, cercando di renderlo responsive in modo molto grezzo, per poi migliorarlo definitivamente una volta terminato, nel modo professionalmente corretto. Ho letto i tuoi suggerimenti ed ho definito un pò meglio ciò che già comunque avrei dovuto ed avevo in mente di fare, con i troncamenti dei paragrafi tra un tema e l'altro..

A mio parere la scelta più efficace resta quella di usare, come anteprima, un sunto del testo preparato preventivamente ad hoc e lasciato comunque libero di occupare il suo spazio, considerando magari anche il fattore responsive, e aggiungere il semplice link a fine testo o in basso al contenitore... ma questa è un'altra storia da trattare magari in un'altra discussione.

Per il momento buon proseguimento e in bocca al "luppolo" per tutto il resto

Praticamente avevo in mente già di fare proprio in questo modo che tu mi hai suggerito, ed ora quella parte si può dire "conclusa".

Potresti dare un'occhiata e darmi un tuo parere e, naturalmente, consigliarmi con i tuoi preziosissimi suggerimenti?
Tieni presente che dovrò ancora inserire delle immagini qua e là in mezzo al testo per spezzare un pò la lettura, fra le tante cose.
Magari anche per quanto riguarda i menu a inizio pagina presente in tutte le pagine, e anche per quelli in territorio e storia farebbe comodo un tuo parere e/o suggerimento..
A te risulta abbastanza responsive già così?
Pareri su tutto il sito insomma...

http://www.flydrose.epizy.com/home.html
le pagine attive sono la home, informazioni, territorio e storia

Altra cosa, ho pensato anche per una versione alternativa, senza il div per il logo (in tal caso inserirei il logo nell'immagine del banner)
http://www.flydrose.epizy.com/indexprova_nologo.html
non guardare dall'immagine in giù, guarda solo la parte con sfondo nero fino all'immagine

Grazie e in bocca al "luppolo" anche a te!

[KillerWorm]

Ciao KillerWorm, chiedo sempre scusa per le mie lunghe assenze, ma ho molto poco tempo [...]

Ciao, tranquillo, la cosa buona è che non hai di certo il tempo per annoiarti

Mi sono cimentato nella lettura della guida responsive, anche se per ora poco [...]

Considera che una parte importante sarà creare, per il menu, una buona impaginazione per renderlo più usabile su mobile (come già accennato); attualmente infatti non si presta bene.

Ho letto i tuoi suggerimenti [...] Potresti dare un'occhiata e darmi un tuo parere

Ho visto, è già qualcosa meglio di prima. Un consiglio su questa parte: potrebbe essere meglio staccare, dal paragrafo, il link "...Continua a leggere" e dargli un colore di risalto, piuttosto che grigio.

Questo serve a rendere più individuabile il link e invogliare l'utente a cliccarci sopra. Può essere inoltre utile creare uno stato differente per l'hover dei link, sia il "continua a leggere" sia il relativo titolo; magari un cambio di colore o un'aggiunta della sottolineatura.

Un esempio tra tanti, il sito thetimes; nota come i link in questione risultino più ordinati e individuabili.

Interessante anche il fatto che su quel sito abbiano perfino organizzato, per ogni anteprima, tre formati dello stesso testo con diverse lunghezze, inseriti nei relativi contenitori (showOnWide, showOnMedium, showOnSmall), per cui, a seconda della dimensione della finestra in cui è visto il sito, attraverso le media query CSS viene mostrato il testo con la lunghezza opportuna. E' sicuramente un accorgimento apprezzabile soprattutto per il mobile; le informazioni essenziali vengono comunque fornite con un'anteprima maggiormente ridotta, in questo modo l'utente viene risparmiato dall'effettuare un eccessivo scorrimento del contenuto.

NOTA: nei tuoi link vedo che hai usato l'attributo alt in cui sostanzialmente hai riportato lo stesso valore dell'attributo title. Tieni conto che l'attributo alt non è permesso sui tag <a>; non sta a farci nulla lì, dovresti toglierlo.

Altra cosa di fondamentale importanza (mi sembra strano non avertelo indicato prima), il tuo codice presenta svariati errori che lo rendono non valido; per ottenere buoni risultati, controlla sempre il tuo elaborato con un validatore; vedi questo: validator.w3.org

Tra le altre cose prendi in considerazione di passare il prima possibile all'uso di HTML 5, quindi rivedere il doctype e alcune parti del tuo HTML che risultano obsolete rispetto agli standard attuali, nonché correggere gli svariati errori che salteranno fuori nel validatore dopo che avrai cambiato il doctype.

Ancora, riguardo al codice, ho notato che fai un uso improprio degli id.
Ad esempio queste righe CSS sono sintomo di una cattiva architettura del codice:

#slide img, #slide2 img, #slide3 img, #slide4 img, #slide5 img, #slide6 img, #slide7 img, #slide8 img, #slide9 img, #slide10 img, #slide11 img, #slide12 img, #slide13 img, #slide14 img, #slide15 img, #slide_focus img, #slide2_focus img {
[...]
#territorio, #economia, #istruzione, #turismo, #media, #zone, #gastronomia, #sport, #storia, #societa, #architettura, #eventi, #trasporti, #mercati, #parchi {
[...]
#slide, #slide3, #slide5, #slide7, #slide9, #slide11, #slide13, #slide15, #slide2, #slide4, #slide6, #slide8, #slide10, #slide12, #slide14 {

... e altre simili. In questi casi, piuttosto che gli id, sarebbe più opportuno usare delle classi che puoi applicare agli elementi desiderati così da poterli identificare in maniera "generica".

Vedi magari qualche guida per comprendere meglio la differenza tra classi e id, e in che modo andrebbero usati:
Qual è la differenza tra classe e id?
Quando usare class o id
Quando usare una classe? E quando usare un ID?

Tieni presente che dovrò ancora inserire delle immagini qua e là in mezzo al testo per spezzare un pò la lettura, fra le tante cose.

Se ti riferisci alle pagine interne (territorio, storia), sì, potrebbe essere buono inserire qualche immagine a corredo del contenuto testuale; mentre per la home, il numero di immagini mi pare sufficiente; ovviamente suppongo che dovrai sostituire poi quell'immagine ripetuta con altre immagini scelte opportunamente.

Piuttosto, ora che tutti i testi sono a destra e le immagini a sinistra, noto una certa monotonia con questa impaginazione, che può stancare la lettura. Prima avevi creato un'alternanza tra testo e immagine, ma forse in quel caso c'era troppa confusione; una valida soluzione potrebbe essere quella di impostare un layout a due o tre colonne, un po' come una pagina di giornale; in quel caso sarà possibile distribuire meglio i contenuti e creare degli spazi di respiro in maniera più uniforme per rendere la lettura più confortevole.

Ovviamente potrà risultare anche più semplice reimpaginare i contenuti riducendo il numero di colonne a seconda della dimensione del viewport. Vedi la possibilità di usare un layout a colonne, qui una guida "CSS Multiple Columns" su w3schools.

Un altro consiglio, rimuoverei dalle immagini quell'effetto di stondatura e ombreggiatura; sa di effetto retrò e in questo caso lo vedo più come un elemento di disturbo piuttosto che un possibile abbellimento; meglio un'immagine pulita con tagli netti che, tra le altre cose, resti nitida (cioè senza elementi di disturbo) anche quando viene ridimensionata col variare del viewport.

Magari anche per quanto riguarda i menu a inizio pagina presente in tutte le pagine, e anche per quelli in territorio e storia farebbe comodo un tuo parere e/o suggerimento..
A te risulta abbastanza responsive già così?

Per il menu principale ti ho già indicato qualcosa riguardo una possibile migliore impaginazione per il mobile, magari prevedendo un menu a scomparsa.

Per il menu laterale (su territorio e storia) qualche annotazione:

- gli spazi di respiro mi sembrano mal distribuiti; sembra un elemento messo lì per riempire la colonna. Potrebbe essere sufficiente dare uno sfondo (anche con un colore lieve) al contenitore del menu in modo che si creino quelle linee utili a stabilire dei limiti visivi.

- l'effetto "testo ingrandito" dato alla voce attiva, crea un po' di confusione. Se apro la pagina "territorio" vedo la voce "Territorio e clima" come se fosse il titolo di quel menu, lasciandomi pensare che le altre voci siano delle sottosezioni di quella stessa pagina. Inoltre l'effetto all'hover mi sembra troppo netto con un cambio di dimensione eccessivo del carattere. Personalmente lascerei la dimensione invariata e andrei a cambiare solo il colore, magari con una semplice transizione per ammorbidire l'effetto all'hover.

- il contenuto del menu è comunque dispersivo per via del numero eccessivo di voci; oltre le 5 o 6 voci sarebbe utile suddividere il menu in qualche modo, definendo delle categorie, magari indicando un titoletto per ogni categoria. Eventualmente vedi tu come puoi suddividere le voci.

- una soluzione alternativa potrebbe essere quella di eliminare il menu e mettere due pulsanti che linkano relativamente all'articolo precedente e successivo; prendo sempre come esempio il sito thetimes riguardo la pagina di dettaglio dell'articolo. Nuoi notare i pulsanti "PREVIOWS ARTICLE" e "NEXT ARTICLE" a destra e sinistra del corpo centrale nella visualizzazione desktop, e in basso in quella mobile (o riducendo la finestra del browser).

Altra cosa, ho pensato anche per una versione alternativa, senza il div per il logo (in tal caso inserirei il logo nell'immagine del banner)

Non so, il logo può restare e, anzi, direi che dev'esserci, magari studiato a dovere e possibilmente "slegato" delle immagini del layout; il problema secondo me è nell'impaginazione dell'intero header.

Lo spazio bianco in alto alla silhouette, mi sembra eccessivo e inutilizzato (sempre per un discorso di armonizzazione degli spazi di respiro), almeno su desktop; il menu lo metterei proprio in alto, così che resti più distinto, visibile, pulito e in qualche modo riempia quello spazio bianco.

Quella bella foto di Torino subito sotto la silhouette, per quanto possa essere bella, non ha un formato che si presta bene a fare da banner in quella posizione; vedo che tu l'hai pensata come uno slide di immagini cliccabili, ma mi sembra troppo ingombrante, devo tirare giù la rotellina almeno 3 volte prima di arrivare ai contenuti

Potrebbe essere più equilibrato mettere, al posto di quel presunto slide, un banner più stretto, magari applicando anche un semplice effetto parallax giusto come elemento decorativo per creare un po' di movimento.

Mentre la silhouette bianca, più in basso, la eliminerei. Mi sembra un'inutile ripetizione grafica che non da un valore in più al layout ma, anzi, crea disturbo dal momento che quell'elemento è già proposto appena sopra con un certo ingombro.

Tieni presente che ciò che ti ho indicato, a parte qualche possibile gusto personale, riguarda l'usabilità e in generale ciò che tecnicamente viene detto UX/UI Design.

Ogni elemento del layout deve essere studiato vedendolo con gli occhi degli utenti che dovranno fruire il sito; ogni elemento deve quindi essere funzionale, usabile, graficamente omogeneo con il contesto.

Per il momento penso di averti fornito sufficienti informazioni per poter aggiustare il tiro. Se riesco, provo a buttare giù una bozza con le possibili migliorie che ho indicato, magari può esserti utile per prendere spunto.

Per ora è tutto, buon proseguimento