Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it L'avatar di flydrose
    Registrato dal
    Oct 2019
    residenza
    Torino
    Messaggi
    24

    visualizzazione sotto-menu di menu a tendina

    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à
    Meglio tentare e fallire che non tentare affatto
    You can check out anytime you like, but you can never leave...

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,542
    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.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it L'avatar di flydrose
    Registrato dal
    Oct 2019
    residenza
    Torino
    Messaggi
    24
    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
    Meglio tentare e fallire che non tentare affatto
    You can check out anytime you like, but you can never leave...

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,542
    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:
    codice:
    #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.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  5. #5
    Utente di HTML.it L'avatar di flydrose
    Registrato dal
    Oct 2019
    residenza
    Torino
    Messaggi
    24
    Grazie. Farò un pò di prove e rileggo bene il tutto e ti farò sapere, gentilissimo.
    Meglio tentare e fallire che non tentare affatto
    You can check out anytime you like, but you can never leave...

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.