[HTML] Problema con menu orizzontale a tendina per sito web

[podset]

Salve, sono podset e vorrei intavolare una discussione che riguarda il menu a tendina.

Premetto che non sono un esperto di programmazione e sto lavorando a un sito che non ho fatto io (ma l'ho scaricato dal web) che ha un menu orizzontale SENZA sottovoci che vengono fuori dalla tendina.

Ecco, io vorrei trasformare questo menu senza sottovoci, in un menu CON delle sottovoci che vengono fuori da un menu a tendina al passaggio del mouse. Solo che lo vorrei fare senza stravolgere i parametri css che ci sono già del menu e lo stile del menu stesso, perché il sito è già ottimizzato per essere visto correttamente in modalità mobile-responsive.

Ho provato con un menu a tendina esterno a quello di default del sito, ma quando faccio la prova di visualizzazione del sito per "mobile" non si vede più correttamente come dovrebbe essere visto, quindi ho bisogno di mantenere il menu così com'è, ma con l'iserimento del menu a tendina.

Qualcuno sa darmi una mano? Grazie...
Qui di seguito vi pubblico i due codici (html e css) solo del menu e non dell'intero sito.

Ecco il codice html del menu senza il menu a tendina:

<!-- Navigation Bar -->
<div class="navbar"><a href="#">Sezione1</a><a href="#">Sezione2</a> <a href="#">Sezione3</a> <a href="#">Sezione4</a><a href="#">Sezione5</a><a href="#">Sezione6</a></div>

Ecco qui invece il codice css già presente di default:

/* Style the top navigation bar */
.navbar {
    display: flex;
    background-color: #666;
}

/* Style the navigation bar links */
.navbar a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
}
/* Change color on hover */
.navbar a:hover {
    background-color: #ddd;
    color: black;
}

Per inserire le voci del sottomenu potete fare a vostra scelta ma io suggerirei si usare i nomi sottosezione1 - sottosezione2 - sottosezione3... ecc... ecc.

Grazie ancora in anticipo per l'aiuto!

 

[Max 1]

@podset
Da regolamento del forum, come tutti noi sei tenuto ad usare il tag

quando posti del codice, oppure la funzione codice dalla barra degli strumenti

Inoltre ti prego di leggere attentamente il regolamento generale del forum e quello di sezione dove posti
Grazie
Per questa volta te lo sistemo io ma mi raccomando per il futuro

Per la tua richiesta non è così semplice come tu credi! Il menu vuole rifatto con i criteri del responsive usando le media query!
Questi sono i problemi di chi vuole utilizzare cose già mezze preconfezionate credendo di risolbere i problemi di stesura del codice

 

[podset]

Il media query è già impostato ed è impostato sul parametro che in qualunque schermo al di sotto dei 700 pixel le varie parti del sito vengono visualizzate una sopra l'altra in ordine gerarchico, quindi non devo risolvere il problema dell'ottimizzazione del sito in modalità responsive (ma mi pare di averlo già scritto in apertura della discussione). Io ho bisogno solo del codice html e css per creare nel menu già esistente un menu con tendina che viene fuori al passaggio del mouse. Cerco solo qualcuno che ci capisce qualcosa e che possa tirare fuori un codice che fa al caso mio. Forse chiedo troppo?

Poi per quanto riguarda gli altri appunti ho infatti cercato le opzioni per inserire i codici ma nell'interfaccia di pubblicazione non lho trovato e quindi l'ho inserito insieme al commento

 

[Max 1]

Cerca di non arabbiarti, non è il posto adatto!
Aspetta qualcuno che capisca qualche cosa io purtroppo sono troppo ignorante per rispondere al tuo problema.
Ora lo sai dove sono le opzioni e anche dove è il regolamento da leggere!

 

[podset]

Non mi sembra di aver usato un tono incazzato nella mia risposta, se così è sembrato chiedo scusa, non era mia intenzione.
E' forse un po' di stanchezza perché sto lavorando a questo sito da un sacco di giorni e sto girando tutti i vari forum ma nessuno mi da una risposta in termini di codice.

Forse è troppo difficile e quindi dovrò rinunciare al menu a tendina e fare col menu normale cercando di non affollare il menu con troppe sezioni. Grazie lo stesso!

Purtroppo io ne farei anche a meno perché un menu a tendina lo avevo trovato, ma come ho detto in apertura di discussione tale menu non viene visualizzato bene in mobile-responsive. E come si sa oggi i dispositivi mobili sono importanti per la visualizzazione di un sito.

 

[Max 1]

Non è difficile da fare!
Il fatto che tu ponga subito condizioni di non stravolgere il codice, che debba rimanere inalterata la grafica, ecc..
Poi posti delle porzioni di codice che dicono ben poco invece di farci vedere la pagina online per renderci conto della situazione e fare due prove.
Come avrai notato tutto questo fa si che nessuno ti dia una soluzione in nessun forum.
Poi come detto vedi tu!

 

[podset]

Faccio vedere il sito online. Eccolo qui a questo link

 

[Max 1]

Come detto quello non è e non può essere un menu responsive neanche così come si trova! Un menu dove le voci si dispongono una sotto l'altra riducendo la risoluzione non è responsive! Tutto questo perchè non è stato fatto con nessun criterio adeguato ad un menu riducendolo a dei semplici link dentro ad un div. Un menu come si deve per prima cosa usa una lista non ordinata sostenuta da un adeguato css che non può essere quelle due regoline che tu hai postato!

Allora se hai un attimo di pazienza appena trovo 5 minuti ti propongo un mio esempio, sempre che tu sia d'accordo

 

[podset]

D'accordo... aspetto l'esempio. Ti chiedo però che non sia qualcosa di complicato perché poi lo devo implementare nel template. Oppure, per fare prima, se fosse possibile, ti chiedo il favore di fare l'esempio usando lo stile del mio menu, così risolviamo in partenza il problema dell'implementazione.

Comunque, riguardo alla questione responsive, io so che negli schermi piccoli come smartphone i menu vengono visualizzati tutti così (cioè con le sezioni una sopra all'altra) e quella modalità è considerata quella giusta, poi posso sbagliare.
Aspetto il tuo esempio. Grazie per il tuo tempo...

 

[Max 1]

io so che negli schermi piccoli come smartphone i menu vengono visualizzati tutti così (cioè con le sezioni una sopra all'altra) e quella modalità è considerata quella giusta, poi posso sbagliare.

Sbagli! Ti sei fissato in quel modo ma non è quello giusto! Il menu quando la risoluzione si abbassa deve diventare uno di quei menu con l'icona a tre righe vedi esempio
Comunque QUI puoi trovare un esempio di menu con suttomenu. Devi solo adattare l'aspetto alle tue esigenze
QUI UN TUTORIAL

 

[podset]

Si, già sapevo che al restringimento dello schermo il menu deve scomparire e diventare una specie di pulsante.

Però, non vorrei sembrare insistente, ma quando uno preme l'icona il menu deve comunque uscire fuori anche su smartphone e quindi a quel punto come viene visualizzato il menu? Negli esempi che ho trovato io viene visualizzato uno sopra l'altro. Anche se mi hai portato un esempio con menu verticale, mentre a me serve un menu orizzontale, come dovrebbe comparire il menu secondo te?

Poi per quanto riguarda il tutorial adesso vado a vederlo e lo provo, anche se, come ti avevo sottolineato in precedenza, a me serviva più qualcosa di personalizzato sul mio caso, perché ti ricordo che non sono un esperto, quindi devo riadattare il tutto e finora con tutte le prove che ho fatto, non sono andate a buon fine, perché forse c'è qualcosa che sbaglio. Le ricerche dei tutorial posso farle anche da me. Io sto cercando invece qualcuno che riadatti il menu già preimpostato. Comunque, se non sei in grado e non c'è nessun'altro in questo forum che possa aiutarmi, guarderò se mi riesce da me con quest'ultimo tutorial che mi hai suggerito.

Ti faccio sapere com'è andata...

 

[podset]

Ok, a me non mi riesce. Siccome ho già perso un sacco di tempo dietro a questa cosa ho deciso di rinunciare al menu a tendina. Però almeno potresti farmi vedere come ottenere l'effetto che dicevi della scomparsa del menu sotto i 700 e rotti px con comparsa dell'icona pulsante? Vorrei almeno ottenere quell'effetto sempre per la questione mobile. E' possibile farmi vedere il tutto prendendo in esame il mio menu, anziché farmi vedere dei tutorial esterni a cui non so dove mettere le mani? Se anche te non riesce suggerirei di coinvolgere qualcun'altro che conosci nella discussione.

Aspetto risposta. Grazie

 

[Max 1]

Giaà detto con il tuo codice non si può fare nulla per fare quello che cerchi bisogna usare al posto del div con i link interni una lista non ordinata <ul><li>....</li></ul> per poter inserire dei sottomenu; wiport, le media query ecc. per il responsive e lo hamburgher, tutte cose che ci viene molto difficile spiegarti qui in un post-

Ti potrei consigliare di mettere un annuncio nella sezione Offerte e Richieste di Lavoro e/o Collaborazione https://forum.mrw.it/forums/offerte-e-richieste-di-lavoro-e-o-collaborazione.87/
Li potresti trovare qualcuno che si impegni a fartelo seguendo le tue direttive

 

[Max 1]

Qui il codice
http://www.extrowebsite.com/blog/responsive-flyout-menu
Qui la demo
http://www.extrowebsite.com/lab/blog/30/responsive-flyout-menu.html

 

[podset]

Ecco... la risorsa che mi suggerisci di sopra mi sembra una soluzione su cui posso lavorarci sù con più semplicità, perché si avvicina di più delle altre soluzioni al mio menu di default.
Adesso provo a tirarci sù qualcosa che mi vada bene e poi ti faccio sapere.
Grazie!

 

[podset]

Max 1 ho provato a tirare fuori qualcosa dal turorial che mi hai suggerito ma purtroppo è stato l'ennesimo nulla di fatto.
Ero anche riuscito a mantenere lo stesso stile del menu inziale ma non mi appare il pulsante hamburgher per far apparire il menu su responsive. Nella sezione Offerte e Richieste di Lavoro e/o Collaborazione che mi dicevi ci sono solo collaborazioni a pagamento o si possono anche trovare esperti che possono anche collaborare gratuitamente?

 

[Max 1]

Puoi trovare sicuramente anche chi si presta gratuitamente devi però specificarlo chiaramente senza però pretendere nulla perchè nessuno è obbligato

 

[podset]

Ok, allora proverò in quella sezione a vedere se riesco a trovare qualcuno... grazie!