[Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html

  • Creatore Discussione Creatore Discussione podset
  • Data di inizio Data di inizio

podset

Nuovo Utente
11 Lug 2018
14
0
1
Salve, sto cercando qualcuno che sappia destreggiarsi con linguaggio css (foglio di stile) e con l'html. Devo creare un menu a tendina ottimizzato per mobile-responsive. Deve esserci anche un pulsante/icona hamburgher per far apparire il menu quando il sito viene visualizzato con schermo smartphone o tablet (cioè con schermo sotto i 700 pixel).

Vi inserisco il link dov'è situato l'intero sito sul web e poi vi metto il relativo codice css e html della parte relativa al menu del sito. Se avete bisogno di altro ditemelo.

Il menu del sito attualmente non è a tendina, perché pur sapendo come si fa col codice html non mi riesce creare il css per nascondere le sottosezioni e come farlo visualizzare per mobile, per cui ho bisogno che qualcuno me lo faccia.

Qui potete vedere il sito online com'è attualmente ancora in fase di costruzione, ovvero senza il menu a tendina, così potete vedere anche l'intero codice del sito.

Qui inserisco il codice css del menu:

Codice:
/* 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;
}

Questo è il codice html attuale del menu:

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>

Questo è il codice html del menu come dovrebbe venire trasformandolo a tendina:

HTML:
<ul>
<li><a href="#">Sezione1<br /></a></li>
<li><a href="#">Sezione2<br /></a>
<ul>
<li><a href="#">Sottosezione1</a></li>
<li><a href="#">sottosezione3</a></li>
</ul>
</li>
<li><a href="#">Sezione1<br /></a></li>
<li><a href="#">Sezione2<br /></a>
<ul>
<li><a href="#">Sottosezione1</a></li>
<li><a href="#">Sottosezione2</a></li>
</ul>
</li>
<li><a href="#">Sezione5<br /></a></li>
<li><a href="#">Sezione6<br /></a>
<ul>
<li><a href="#">Sottosezione1</a></li>
<li><a href="#">Sottosezione2</a></li>
<li><a href="#">Sottosezione3</a></li>
</ul>
</li>
</ul>

Grazie mille!
 
Ultima modifica:
Ti allego uno zip ove c'è la pagina html e il file css!
Hai solo da cambiare i colori del menu e del header!
Poi mi arrendo
 

Allegati

Max 1 questa volta c'è mancato veramente un pelo. Menomale che sono abituato a lavorare sui codici dei template, pur non essendo un esperto programmatore, ma il mio senso di osservazione del codice in questo caso ha fatto la differenza e quindi sono riuscito a risolvere il tutto.

Quindi funziona tutto, però ci sono ancora alcuni difetti (di poco conto) che ti voglio esporre e vorrei sapere da te,
se lo sai, se essi sono normali o se c'è qualcosa che mi è sfuggito.

I difetti sono questi:

- Con il nuovo codice aggiunto il template non occupa più l'intero spazio del monitor ma c'è uno spazio tutto intorno (lo potrai vedere qui in questo link)

- restringendo la dimensione del browser per fare la prova di visualizzazione mobile nel menu è tutto apposto, tranne che sotto la voce "blog" si vedono anche le sottosezioni, mentre invece dovrebbero essere nascoste?

- L'icona del pulsante per far apparire il menu appare come un'icona bianca e non con le tre righe in verticale

Secondo le tue conoscenze, questi tre aspetti possono essere risolti? E in che modo?

Ti ringrazio di tutto per avermi suggerito questo codice....
 
Ultima modifica:

Discussioni simili