Problema con position absolute e overflow

Nocciolina · 23 Gen 2023

Ciao a tutti!
Ho creato un menù in verticale, dove all'hover della voce principale, esce a destra una tendina di sottomenù.
Il problema sussiste dal momento in cui, per far in modo che tutte le voci del menù principale possano essere tutte visibili anche sopra ad uno schermo più piccolo (non cellulare), ho impostato overflow-y: auto, così che quel box possa essere scrollabile; purtroppo però facendo così, la tendina del sottomenù non esce più dal box e non è molto visibile.

Come posso fare per far sì che la tendina esca dal box e sia ben visibile?

HTML:

<div class="box_verticale">

    <ul class="involucro_menu">

        <li class="involucro_voce_menu mb10 mr3">
            <button class="button_icone_vert voce_menu">
                <img height="30px">
            </button>
            <ul class="involucro_sottomenu involucro_sottomenu">
                <li class="involucro_voce_sottomenu">
                    <a href="" class="voce_sottomenu">Ciao</a>
                    <a href="" class="voce_sottomenu">Miao</a>
                    <a href="" class="voce_sottomenu">Bau</a>
                    <a href="" class="voce_sottomenu">Slurp</a>
                </li>
            </ul>
        </li>

        <li class="involucro_voce_menu mb10 ml3">
            <button class="button_icone_vert voce_menu">
                <img height="30px">
            </button>
            <ul class="involucro_sottomenu">
                <li class="involucro_voce_sottomenu">
                    <a href="" class="voce_sottomenu">Ciao</a>
                    <a href="" class="voce_sottomenu">Miao</a>
                    <a href="" class="voce_sottomenu">Bau</a>
                    <a href="" class="voce_sottomenu">Slurp</a>
                </li>
            </ul>
        </li>

        <br>

        <li class="involucro_voce_menu mb10 mr3">
            <button class="button_icone_vert voce_menu">
                <img height="30px">
            </button>
            <ul class="involucro_sottomenu">
                <li class="involucro_voce_sottomenu">
                    <a href="" class="voce_sottomenu">Ciao</a>
                    <a href="" class="voce_sottomenu">Miao</a>
                    <a href="" class="voce_sottomenu">Bau</a>
                    <a href="" class="voce_sottomenu">Slurp</a>
                </li>
            </ul>
        </li>

        <li class="involucro_voce_menu mb10 ml3">
            <button class="button_icone_vert voce_menu">
                <img height="30px">
            </button>
            <ul class="involucro_sottomenu">
                <li class="involucro_voce_sottomenu">
                    <a href="" class="voce_sottomenu">Ciao</a>
                    <a href="" class="voce_sottomenu">Miao</a>
                    <a href="" class="voce_sottomenu">Bau</a>
                    <a href="" class="voce_sottomenu">Slurp</a>
                </li>
            </ul>
        </li>

        <br>

        <li class="involucro_voce_menu mb10 mr3">
            <button class="button_icone_vert voce_menu">
                <img height="30px">
            </button>
            <ul class="involucro_sottomenu">
                <li class="involucro_voce_sottomenu">
                    <a href="" class="voce_sottomenu">Ciao</a>
                    <a href="" class="voce_sottomenu">Miao</a>
                    <a href="" class="voce_sottomenu">Bau</a>
                    <a href="" class="voce_sottomenu">Slurp</a>
                </li>
            </ul>
        </li>

        <li class="involucro_voce_menu mb10 ml3">
            <button class="button_icone_vert voce_menu">
                <img height="30px">
            </button>
            <ul class="involucro_sottomenu">
                <li class="involucro_voce_sottomenu">
                    <a href="" class="voce_sottomenu">Ciao</a>
                    <a href="" class="voce_sottomenu">Miao</a>
                    <a href="" class="voce_sottomenu">Bau</a>
                    <a href="" class="voce_sottomenu">Slurp</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS:

*, *:after, *:before {
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

.box_verticale {
    display: inline-block;
    width: 200px;
    min-width: 200px;
    height: 100%;
    text-align: center;
    overflow: visible;
    background-color: #9ebd41;
}

.involucro_menu {
    display: inline-block;
    list-style: none;
    text-align: center;
    float: none;
    padding: 0;
    width: 100%;
    height: 100%;
    position:relative;
    overflow-y: auto;
}

.involucro_voce_menu {
    display:inline-block;
    position:relative;
    float: none;

}

.voce_sottomenu {
    display:block;
    text-decoration:none;
    text-decoration: none;
    color: white;
    white-space: nowrap;
    padding:7px;
    z-index: 9999;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.3s;
    float: none;
}

.voce_sottomenu:hover {
    border-radius: 15px;
    background-color: #1c8ec7;
    float: none;
    z-index: 9999;
}

.involucro_sottomenu {
    list-style: none;
    background-color: #555555;
    border-radius: 15px;
    width: 130px;
    float: none;
    overflow: visible;
    padding: 0;
    z-index: 9999;
    position:absolute;
    top:0;
    left: 100%;
    opacity: 0;
    visibility: hidden;
}

ul.involucro_menu li:hover ul{
    float: none;
    opacity: 1;     
    visibility: visible;
}

ul.involucro_menu li:hover > button {
    background-color: transparent;
    color:white;
    box-shadow: none;
}

.button_icone_vert {
    display: inline-block;
    text-align: center;
    font-size: x-small;
    text-decoration: none;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    background-color: white;
    color: #555555;
    height: 53px;
    width: 65px;
    box-shadow: 2px 2px 8px 0 #555555;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

.button_icone_vert:hover {
    background-color: #9ebd41;
    color: white;
}

.mb10 {
    margin-bottom: 10px;
}

.ml3 {
    margin-left: 3px;
}

.mr3 {
    margin-right: 3px;
}

WmbertSea · 24 Gen 2023

Ciao, con overflow credo non si possa risolvere. Secondo la documentazione, se si imposta "auto" o "scroll" per un'asse, l'altra è implicitamente calcolata come "auto", per cui il contenuto risulterà sempre tagliato all'interno del contenitore.
Vedi documentazione:

overflow-y - CSS: Cascading Style Sheets | MDN

The overflow-y CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content.

developer.mozilla.org

Dovresti quindi usare delle soluzioni alternative. Alcuni applicano il posizionamento fixed quindi spostano gli elementi con l'uso di javascript. Puoi trovare dei tutorial con qualche ricerca. Uno tra tanti: Popping Out of Hidden Overflow

Un'altra possibilità, usando solo css, è quella di allargare la colonna in modo che possa accogliere i sottomenu. In questo caso però la barra di scorrimento andrebbe nascosta in qualche modo perché altrimenti comparirebbe alla destra della colonna "allargata". Con qualche regola aggiuntiva è possibile nasconderla mantenendo comunque la funzionalità di scorrimento (vedi l'esempio in fondo a questa pagina, su W3schools)

Considera inoltre che, benché la colonna sia scorrevole, i tuoi sottomenu non stanno nel normale flusso dei contenuti perché hanno position absolute, perciò risulteranno tagliati nel lato basso qualora il loro contenuto vada oltre l'altezza totale del contenuto principale di quella colonna.

In tal caso potrebbe essere necessario impostare un padding basso con un valore ipotetico che possa essere sufficiente a contenere gli eventuali sottomenu con più contenuti.

Qui la parte che dovresti modificare/aggiungere al tuo css:

CSS:

.involucro_menu {
    display: inline-block;
    list-style: none;
    text-align: center;
    float: none;
    
    padding: 0 200px 150px 0;
    width: calc(100% + 200px);
    
    height: 100%;
    position:relative;
    overflow-y: scroll;
}

.involucro_menu::-webkit-scrollbar {
  display: none;
}
.involucro_menu {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

Ancora, per risolvere alla radice potresti evitare l'uso dell'overflow e lasciare che la colonna e il body siano liberi di estendersi in altezza in base ai propri contenuti. A quel punto si potrà scorrere normalmente l'intera pagina tutta assieme (colonna e contenuti).

Può essere che ci siano ulteriori soluzioni ma personalmente non mi viene in mente nient'altro.

Valuta tu, fai sapere se e come risolverai. Buon proseguimento

Nocciolina · 27 Gen 2023

Ciao, ti ringrazio per i consigli utilissimi!

Alla fine ho risolto usando la tua soluzione di allungare il box ed aumentare il padding, ma avevo comunque il problema che le cose sotto al box che si estendeva, non erano i cliccabili. Allora ad un mio collega è venuto in mente di implementare anche dello Javascript nell'head e così, ora, il box si estende solo all'hover, rendendomi tutto il resto cliccabile quando non ho i sottomenù aperti. Ed ho anche rimosso la scrollbar visibile.

Ovviamente pubblico il codice per spiegarmi meglio e poter aiutare altre persone!

JavaScript:

        <script>

            function mostraNascondiMenuAggiuntivo(azione) {
                var element_ = document.getElementById("menuEstensibile");
                if (azione == 1) {
                    if(element_.classList.contains("no_estensione_menu")) {
                        element_.classList.remove("no_estensione_menu");   
                    }
                    element_.classList.add("estensione_menu");
                } else if (azione == 2) {
                    if(element_.classList.contains("estensione_menu")) {
                        element_.classList.remove("estensione_menu");   
                    }
                    element_.classList.add("no_estensione_menu");

                }

            }

        </script>

CSS:

        *, *:after, *:before {
            -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
        }

        html {
            height: 100%;
        }

        body {
            margin: 0;
            height: 100%;
            overflow: hidden;
        }

        .box_verticale {
            display: inline-block;
            width: 200px;
            min-width: 200px;
            height: 100%;
            text-align: center;
            overflow: visible;
            background-color: #9ebd41;
        }

        .involucro_menu {
            display: inline-block;
            list-style: none;
            text-align: center;
            float: none;
            height: 100%;
            position:relative;
            overflow-y: auto;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none !important;  /* Firefox */
        }

        .estensione_menu {
            width: calc(100% + 200px);
            padding: 7px 200px 150px 0;
        }

        .no_estensione_menu {
            width: 100%;
            padding: 7px;
        }

        .involucro_menu::-webkit-scrollbar {
            display: none;
        }



        .involucro_voce_menu {
            display:inline-block;
            position:relative;
            float: none;

        }

        .voce_sottomenu {
            display:block;
            text-decoration:none;
            text-decoration: none;
            color: white;
            padding: 8px 15px;
            z-index: 9999;
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            transition: all 0.3s;
            float: none;
        }

        .voce_sottomenu:hover {
            border-radius: 15px;
            background-color: #1c8ec7;
            float: none;
            z-index: 9999;
        }

        .involucro_sottomenu {
            list-style: none;
            background-color: #555555;
            border-radius: 15px;
            width: 230px;
            max-width: 230px;
            word-wrap: break-word;
            float: none;
            text-align: left;
            overflow: visible;
            padding: 0;
            z-index: 9999;
            position:absolute;
            top:0;
            left: 100%;
            opacity: 0;
            visibility: hidden;
        }

        ul.involucro_menu li:hover ul{
            float: none;
            opacity: 1;     
            visibility: visible;
        }

        ul.involucro_menu li:hover > button {
            background-color: transparent;
            color:white;
            box-shadow: none;
        }

        .button_icone_vert {
            display: inline-block;
            text-align: center;
            font-size: x-small;
            text-decoration: none;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            background-color: white;
            color: #555555;
            height: 53px;
            width: 65px;
            box-shadow: 2px 2px 8px 0 #555555;
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            transition: all 0.5s;
        }

        .button_icone_vert:hover {
            background-color: #9ebd41;
            color: white;
        }
        
        .mb10 {
            margin-bottom: 10px;
        }

        .ml3 {
            margin-left: 3px;
        }

        .mr3 {
            margin-right: 3px;
        }

HTML:

        <div class="box_verticale">

            <ul class="involucro_menu no_estensione_menu" id="menuEstensibile">

                <li class="involucro_voce_menu mb10 mr3" onmouseout="mostraNascondiMenuAggiuntivo(2)" onmouseover="mostraNascondiMenuAggiuntivo(1)">
                    <button class="button_icone_vert voce_menu">
                        <img src="" width="30px">
                        <br>
                        
                    </button>

                    <ul class="involucro_sottomenu">
                        
                        <li class="involucro_voce_sottomenu">
                            <a href="" class="voce_sottomenu"></a>
                            <a href="" class="voce_sottomenu"></a>
                            <a href="" class="voce_sottomenu"></a>
                            <a href="" class="voce_sottomenu"></a>
                        </li>

                    </ul>
                </li>

                <li class="involucro_voce_menu mb10 mr3" onmouseout="mostraNascondiMenuAggiuntivo(2)" onmouseover="mostraNascondiMenuAggiuntivo(1)">
                    <button class="button_icone_vert voce_menu">
                        <img src="" width="30px">
                        <br>
                        
                    </button>

                    <ul class="involucro_sottomenu">
                        
                        <li class="involucro_voce_sottomenu">
                            <a href="" class="voce_sottomenu"></a>
                            <a href="" class="voce_sottomenu"></a>
                            <a href="" class="voce_sottomenu"></a>
                            <a href="" class="voce_sottomenu"></a>
                        </li>

                    </ul>
                </li>

                <br>

                <li class="involucro_voce_menu mb10 mr3" onmouseout="mostraNascondiMenuAggiuntivo(2)" onmouseover="mostraNascondiMenuAggiuntivo(1)">
                    <button class="button_icone_vert voce_menu">
                        <img src="" width="30px">
                        <br>
                        
                    </button>

                    <ul class="involucro_sottomenu">
                        
                        <li class="involucro_voce_sottomenu">
                            <a href="" class="voce_sottomenu"></a>
                            <a href="" class="voce_sottomenu"></a>
                            <a href="" class="voce_sottomenu"></a>
                            <a href="" class="voce_sottomenu"></a>
                        </li>

                    </ul>
                </li>

                <li class="involucro_voce_menu mb10 mr3" onmouseout="mostraNascondiMenuAggiuntivo(2)" onmouseover="mostraNascondiMenuAggiuntivo(1)">
                    <button class="button_icone_vert voce_menu">
                        <img src="" width="30px">
                        <br>

                    </button>

                    <ul class="involucro_sottomenu">
                        
                        <li class="involucro_voce_sottomenu">
                            <a href="" class="voce_sottomenu"></a>
                            <a href="" class="voce_sottomenu"></a>
                            <a href="" class="voce_sottomenu"></a>
                            <a href="" class="voce_sottomenu"></a>
                        </li>

                    </ul>
                </li>
                
            </ul>

        </div>

WmbertSea · 27 Gen 2023

Ciao, benissimo, mi fa piacere che tu sia riuscito a risolvere anche gli effetti collaterali

Grazie anche per aver condiviso la tua soluzione.

Il problema dell'overlay che rende non cliccabile ciò che sta sotto, può essere comunque risolto anche solo attraverso il css.

Puoi applicare la proprietà "pointer-events:none;" all'elemento <ul> "involucro_sottomenu". Questo ne impedisce l'interazione tramite il mouse, rendendo quindi cliccabile ciò che gli sta sotto.

Ovviamente dovrai "annullare" questo effetto per gli elementi <li> "involucro_voce_menu", che diversamente resterebbero non cliccabili anche questi perchè tale proprietà è ereditaria. Dovrai quindi applicare "pointer-events:auto;" per questi.

CSS:

.involucro_menu {
  pointer-events: none;
}
.involucro_voce_menu{
  pointer-events: auto;
}

Buon proseguimento

Nocciolina · 31 Gen 2023

Ciao, purtroppo c'è un altro problema di cui non mi ero resa conto e su cui continuo a sbattere la testa.
Quando al mio bottone del menù metto troppe voci nel sottomenù, mi taglia una o due voci finali. Purtroppo più che giocare con l'altezza (e non funziona), non mi viene in mente altro. Non credo ci sia da giocare con l'overflow, perchè il box è già "overflow-y: auto" Come potrei risolvere?

Poi un secondo fatto è che se scrollo i sottomenù, mi scrolla tantissimo anche il box con i bottoni del menù. C'è un modo per separare lo scroll dei menù, dallo scroll dei sottomenù?

TI / Vi ringrazio tantissimo per la pazienza, sto impazzendo!!

Autore	Titolo	Forum	Risposte	Data
F	Problema position span con barretta dinamica	HTML e CSS	0	9 Gen 2014
I	problema overflow con elementi "position absolute"	HTML e CSS	3	2 Gen 2014
D	Problema con lo scroll della pagina e del div position:fixed	HTML e CSS	0	23 Ott 2013
S	problema con position:absolute	HTML e CSS	0	3 Ago 2007
O	problema con dvr dahua xvr5116	IP Cam e Videosorveglianza	0	11 Mar 2023
G	Problema con Xampp	Web Server	1	5 Mar 2023
	Problema con miniature comandi	Photoshop	0	27 Feb 2023
I	problema con alice	Posta Elettronica	0	10 Feb 2023
L	Problema con inner join	PHP	11	23 Nov 2022
K	[php] Problema con inner join	PHP	4	22 Nov 2022
K	[PHP] Problema con variabili concatenate.	PHP	1	17 Ott 2022
O	problema con query	PHP	4	23 Mag 2022
I	problema con 2 account	Posta Elettronica	1	11 Mar 2022
L	problema collegamento file css con html	HTML e CSS	1	2 Mar 2022
E	Problema accesso a file con app sviluppata con MIT APP INVENTOR 2	Sviluppo app per Android	0	22 Dic 2021
M	Problema con Try Catch	PHP	0	10 Ott 2021
	Problema con gli eventi del mouse su una data table:	Javascript	2	7 Ago 2021
T	PROBLEMA CON SESSIONI	PHP	3	13 Lug 2021
T	ALTRO PROBLEMA CON ARRAY PHP	PHP	1	30 Mag 2021
R	problema con else	PHP	0	27 Mag 2021
T	PROBLEMA CON ARRAY	PHP	8	27 Mag 2021
L	problema con query select	PHP	2	25 Mag 2021
R	Problema query con ricerca id numerico	PHP	2	5 Mag 2021
F	Problema con risposta	PHP	0	28 Apr 2021
S	problema con recupero dati tabella mysql	PHP	2	12 Apr 2021
Z	Problema con il mio tp-l i nk	Reti LAN e Wireless	1	11 Apr 2021
L	Problema RAM con Tomcat 8	Apache	0	10 Mar 2021
	problema con sort e asort	PHP	4	19 Feb 2021
Z	Problema con INT MySQL	PHP	1	7 Gen 2021
Z	Problema database MySQL con XAMPP	PHP	0	5 Gen 2021
M	Problema con controllo form in real time	jQuery	6	21 Dic 2020
Z	Problema di sincronizzazione PAYPAL con PHP	PHP	1	11 Nov 2020
G	Problema con Get page	PHP	4	1 Set 2020
P	Problema con require once	PHP	6	23 Ago 2020
P	Problema con i package	Java	1	2 Ago 2020
A	Problema login con Safari	PHP	14	21 Lug 2020
F	INDESIGN: problema esportazione esecutivo per la stampa con foto B/N	Webdesign e Grafica	0	29 Giu 2020
S	problema con css bootstrap3	HTML e CSS	4	13 Giu 2020
M	.load() problema con caricamenti dinamici di js	Javascript	0	12 Giu 2020
G	Problema con eccessiva nitidezza apertura Camera Raw	Photoshop	0	7 Giu 2020
G	Problema ------- con Query	PHP	1	30 Mag 2020
G	Problema con Query	PHP	1	30 Mag 2020
T	problema con select dinamica con jquery	Javascript	0	28 Mag 2020
S	Problema con spazi bianchi	HTML e CSS	5	21 Mag 2020
A	PROBLEMA: insert mysqli con dati Tagsinput	Presentati al Forum	0	30 Apr 2020
	Problema con z-index	HTML e CSS	3	21 Apr 2020
M	Problema inserimento parole con apostrofo nel db	PHP	5	18 Apr 2020
C	Problema con dati meteo xml	XML	1	14 Apr 2020
S	Problema con infrarossi videocamera	IP Cam e Videosorveglianza	1	8 Apr 2020
V	Problema con librerie allegro5 c++	C/C++	1	5 Apr 2020

Cerca

Cerca

Problema con position absolute e overflow

Nocciolina

Nuovo Utente

WmbertSea

Moderatore

overflow-y - CSS: Cascading Style Sheets | MDN

Nocciolina

Nuovo Utente

WmbertSea

Moderatore

Nocciolina

Nuovo Utente

Discussioni simili