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

podset

Nuovo Utente
11 Lug 2018
14
0
1
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:
HTML:
<!-- 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:
HTML:
/* 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!
 
Ultima modifica di un moderatore:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
@podset
Da regolamento del forum, come tutti noi sei tenuto ad usare il tag
code.gif
quando posti del codice, oppure la funzione codice dalla barra degli strumenti
box inserisci 2.png.JPG

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

Nuovo Utente
11 Lug 2018
14
0
1
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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!
ciao.gif
ciao.gif
 

podset

Nuovo Utente
11 Lug 2018
14
0
1
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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!
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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

Nuovo Utente
11 Lug 2018
14
0
1
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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

Nuovo Utente
11 Lug 2018
14
0
1
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

Nuovo Utente
11 Lug 2018
14
0
1
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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
 

podset

Nuovo Utente
11 Lug 2018
14
0
1
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

Nuovo Utente
11 Lug 2018
14
0
1
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Puoi trovare sicuramente anche chi si presta gratuitamente devi però specificarlo chiaramente senza però pretendere nulla perchè nessuno è obbligato
 

podset

Nuovo Utente
11 Lug 2018
14
0
1
Ok, allora proverò in quella sezione a vedere se riesco a trovare qualcuno... grazie!
 
Discussioni simili
Autore Titolo Forum Risposte Data
L problema collegamento file css con html HTML e CSS 1
tomorc [HTML] Problema con scroll bar (risolto) HTML e CSS 0
P [HTML] Problema ERR_INCOMPLETE_CHUNKED_ENCODING 206 (Partial Content) con Font HTML e CSS 1
L [HTML] Problema con navbar HTML e CSS 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
L [HTML] problema sfondo tutto schermo con immagine HTML e CSS 1
M problema con video in html 5 HTML e CSS 7
Selenio89 problema a caricare immagine con html. dove sbaglio? HTML e CSS 25
J [HTML] problema IFrame con dispositivi IOS HTML e CSS 0
R [PHP] Problema stampa array bidimensionali con formula $html.=<<<myHtml... PHP 2
jonnino2004 [HTML] problema con bordo su h1 HTML e CSS 2
S [HTML] Problema Sovrapponimento Tab con Contentuto HTML e CSS 0
D [HTML] Problema con Dreamweaver; 1) tabella con larghezza 100% 2) Immagine che si adatta a Div HTML e CSS 28
filomeni Problema con mail() in html PHP 4
C Problema con html e php :D PHP 1
D Problema collegamento file css con html HTML e CSS 4
O Problema con email in formato HTML PHP 1
G html problema table scrollable con header fisso HTML e CSS 2
F problema con la stampa su pagina html PHP 1
M css html problema con explorer help HTML e CSS 0
V Problema con le tabelle in html HTML e CSS 35
T problema con codice html dentro javascript Javascript 1
M Problema con php in html PHP 3
I Problema con Form html HTML e CSS 9
J Problema con HTML e iframe HTML e CSS 5
N [PHP+HTML+CSS] Problema con un div HTML e CSS 4
JellyBelly Problema con xsl con html nel db XML 2
P problema con multibox per html Javascript 0
F [HTML] problema tag canonical HTML e CSS 7
Tommy03 [HTML] Problema Iphone - Android HTML e CSS 1
A [HTML] Problema HTML e CSS 2
Daniele_Carrara [HTML] Problema attributo min HTML e CSS 0
S [HTML] problema resonsive HTML e CSS 2
S [HTML] Problema <input type="date"> HTML e CSS 0
A [HTML] Sfondo responsive - problema specifico HTML e CSS 5
1992lvc [WordPress] Problema sidebar widget html Facebook WordPress 2
M [HTML] problema spazio aggiuntivo tra elementi <li> di menu a tendina HTML e CSS 1
Andrea_Ventura [HTML] Problema centrare elemento orizzontalmente HTML e CSS 9
Angelo Russo [HTML] piccolo problema di impaginazione HTML e CSS 13
M [HTML] Problema visualizzazione immagini su dispositivi HTML e CSS 4
Kolop [WordPress] [HTML] Problema header su mobile WordPress 4
S [HTML] Problema non visibilità del sito HTML e CSS 1
D [phpBB] [HTML] Problema pagina elenco argomenti (di forum) phpBB 9
A [HTML] Problema Safari e unita vw e vh. HTML e CSS 4
trattorino [PHP] [HTML] problema form PHP 1
B [HTML] Problema main box di un template HTML e CSS 2
Michaelweb93 [HTML] Problema sito web - wordpress WordPress 2
T [HTML] Problema pulsante scroll down su ecommerce CMS (Content Management System) 0
S [Javascript] [HTML] problema nella stampa degli elementi della pagina Javascript 3
S Problema invio form php/html PHP 3

Discussioni simili