Perché nel pulsante hamburger btn-responsive-menu non si vedono le tre linee

[podset]

Salve a tutti... cliccate su questo link e guardate se con il vostro browser riuscite a vedere correttamente il pulsante conosciuto con il soprannome "hamburger", ovvero il btn-responsive-menu per visualizzazioni mobile che appare quando lo schermo del browser viene ristretto.

Vi dovrebbe apparire un pulsantino quadrato con le classiche tre linee in verticale. Mi serve per capire se è un problema solo del mio browser o se anche in altri si comporta allo stesso modo del mio.

Io riesco a vedere solo un rettangolino bianco più stretto senza le tre linee verticali e non si dovrebbe vedere in questo modo.

C'è qualcuno che riesce a capire perché non si vede come dovrebbe essere visto?

Grazie...

[alemoppo]

Dove sono nel codice le barrette?

Io vedo:

.btn-responsive-menu{
display:                none;
padding:                5px;
cursor:                 pointer;
color:                  #fff;
background:             #fff;
-webkit-border-radius:  4px;
-moz-border-radius:     4px;
border-radius:          4px;
}

E dentro media queries:

.btn-responsive-menu
{
display:      block;
position:     absolute; 
top:          20px; 
right:        20px; 
}

Ciao!

[podset]

Se non sbaglio mi sembra di capire che dovrei aggiunggere il secondo css che hai postato, ma dove dovrei inserire tale codice, subito dopo il primo che hai postato? Potresti essere un po' più preciso e dettagliato? Grazie

[alemoppo]

No: quel codice è già presente.

Dalla tua risposta ipotizzo che non hai scritto tu il codice: da dove lo hai preso?

Ciao!

[podset]

La struttura di base del template non l'ho scritta io, ma per quanto riguada alcuni elementi presenti e i parametri della grafica invece si, l'ho scritto io.

Il template base l'ho preso in giro sul web. Io l'ho solo modificato un po' per quanto riguarda la grafica. Ma, a parte questo, potresti spiegarmi cosa devo fare per visualizzare le tre linee? Come ho spiegato all'inizio io vedo solo il quadratino bianco senza niente dentro. Mentre nella versione del tutorial di esempio in cui ho preso il codice per il pulsante hamburger mi funziona tutto, però quando vado a metterlo sul mio template il pulsante compare ma è bianco senza le tre linee dentro.

Qui ti inserisco il link del tutorial di esempio da dove ho preso il codice per l'hamburger.

[podset]

alemoppo forse ho capito perché il pulsante non viene visualizzato con le tre linee.
Partendo dal fatto che il codice che dovrebbe far vedere le tre linee è quello del ripetere l'elemento span per tre volte, ovvero con questo codice:

<div class="btn-responsive-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>

Io ho inserito tale codice all'interno del template, ma quando esco dall'editing di altervista per poter visualizzare sul web l'intero template, le tre righe di codice: <span class="icon-bar"></span> spariscano automaticamente senza che io faccia niente. Da che cosa dipende questo fatto? Forse questo tipo di codice non è compatibile con qualcosa?

Come mi devo muovere? Esiste altro codice alternativo?

[alemoppo]

Sì, quel codice va inserito. Nel tutorial però non mi sembra sia accennato, ma va inserito.

(vedo che tu hai inserito):

<div class="btn-responsive-menu">&nbsp;</div>

Ti consiglierei di editare le pagine con un editor nel tuo pc (come notepad++) ed utilizzare l'editor di AlterVista solamente per piccole modifiche: è sempre bene tenere una copia dei file nel proprio dispositivo.
Se comunque vuoi continuare ad usare l'editor, prova a scrivere a mano quelle righe senza copia-incolla: forse viene copiato anche qualche carattere strano; quei codici sono compatibili, è strano che non vengano salvati una volta uscito dall'editor.

Ciao!

[podset]

Ho provato a fare come dici tu a scrivere le righe di codice a mano e purtroppo il risultato è lo stesso. Le tre righe di codice scompaiono subito non appena lascio la modalità editing del codice sorgente. E' davvero strana questa cosa. Non capisco proprio da che cosa sia dovuta.

Al momento non ho installato nessun programma di editor nel pc, dato che sono abituato a fare tutto con altervista. Personalmente vorrei non installarne nessuno per far restare più leggero il mio pc. Non conosci un altro modo per risolvere il problema?

[alemoppo]

È molto strano: quale browser stai utilizzando?

Per l'editor del pc, ti consiglierei notepad++ che è molto leggero ma anche versatile tramite i suoi plugin.

(in realtà se non vuoi installare nulla potresti anche usare blocco note, io iniziai con quello però non colora il codice).

Ciao!

[podset]

Sto usando "Mozilla Firefox".

Adesso provo a scrivere con blocco note perché mi sembra di avere già avuto esperienza in passato con notepad ++ e non mi sono trovato molto bene, xche era sprovvisto della versione di anteprima. Si parla di 3-4 anni fa, ma adesso non so se hanno fatto versioni migliori.

Mentre aspettavo la tua risposta ho anche fatto delle ricerche per visualizzare il pulsante con la scritta [MENU] anziché la classica icona hamburger con le tre linee, in quanto sento dire sempre più spesso che da test effettuati la risposta di un utente medio o con media esperienza non sempre riconosce a cosa serve l'icona hamburger. Invece pare che inserendo un semplice pulsante con la scritta "MENU" viene maggiormente riconosciuto.

Solo che se l'editor non mi riconosce le righe di codice non posso usare nemmeno il pulsante con la scritta "menu".

Tu sai qual è il codice corretto per inserire la scritta "MENU" nel pulsante hambureger che adesso mi appare bianco? Può darsi che sia questo?

<div class="btn-responsive-menu">
<span class="sr-only">MENU</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>

[alemoppo]

Con Firefox ho provato quel codice. Ho eliminato le tre voci e le ho re-inserite il tutto dall'editor AlterVista e non ho avuto alcun problema.

Puoi provare da un altro browser o da un altro PC?

Riguardo agli editor, la funzionalità di anteprima può essere utile per siti completamente in html+css. Se però aggiungi del javascript o ancora peggio del PHP, l'anteprima diventerà assolutamente inutile: come anteprima va sempre usato il browser.

Ciao!

[podset]

Alemoppo vuoi dire che il pulsante lo vedi correttamente con tanto di scritta "MENU" all'interno del pulsante?
Se è così allora è quello che sospettavo, ovvero che il problema c'è l'ho solo io dal mio pc.

Infatti è per questo che ho intavolato questa discussione. Per avere delle riprove tramite altri dispositivi di altra gente.

In questo momento ho solo un pc su cui posso fare le prove, quindi ora non posso fare niente al riguarddo, anche se avevo già in mente di fare dei test su un paio di pc di un mio amico che ha uno studio privato di architettura. Solo che devo andare da lui e quindi come ho già detto, così su due piedi non posso vedere niente.

Però, se tu mi confermi che il test che hai fatto è positivo e che hai visto tutto correttamente, allora sono tranquillo che non ho sbagliato niente.

Ti chiedo se per favore potresti postarmi qui il codice che hai usato tu nella tua prova, così provo ad inserirlo con il mio pc e il mio browser. Per quanto riguarda se posso usare un altro browser... SI, posso usare "Chrome".

[alemoppo]

Nella tua pagina non vedo le tre lineette, perché mancano appunto quegli elementi html.

Io ho fatto una prova qui, le tre lineette appaiono(perché ci sono gli elementi html che il tutorial non indica).

Comunque il codice che ho usato è (puoi vederlo anche dalla pagina indicata):

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test mobile</title>
<style type="text/css">

body{
background-color:#0f0;
}
header{ 
position:relative; 
background: navy;
text-align:left;
overflow:hidden;
padding: 20px 0;
}

#navigation{
clear:both; 
text-align:left;
margin:0 0 35px;
background:#ddd;
position:relative;
z-index:10;
}

#navigation ul ul { display: none; }

#navigation ul li:hover > ul { display: block; }

.btn-responsive-menu{
display:none;
padding:5px;
cursor:pointer;
color:#fff;
background:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;}

.icon-bar {
display:block;
width: 20px;
height: 3px;
margin: 5px;
background-color: #f4421a;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;}

@media screen and (max-width:799px){

#navigation{display:none;}

#navigation ul ul {
width: 100%;
position:relative;
display: table;}

.btn-responsive-menu{
display:block;
position:absolute; 
top:20px; 
right:20px; }

}


</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
     $(document).ready(function(){   
        //When btn is clicked
          $(".btn-responsive-menu").click(function() {
           $("#navigation").toggleClass("show");
          });
        });
</script>
</head>
<body>
<div class="btn-responsive-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<nav id="navigation" role="navigation">
<ul>
<li><a href="#">HOME</a></li>
<li id="blog"><a href="#">BLOG</a>
<ul>
<li><a href="#">SOTTO VOCE 1</a></li>
<li><a href="#">SOTTO VOCE 2</a></li>
</ul>
</li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>

</body>
</html>

Ciao!

[podset]

Allora, sul mio editor altervista ho provato interamente il codice che mi hai postato qui sopra è il pulsante rimane bianco senza le tre linee. Ma quando clicco sul link del tuo test il pulsante si vede correttamente con le tre linee.

Le cose sono due:

- il mio editor è diverso dal tuo ma mi pare improbabile visto che usiamo tutti e due altervista
- oppure il problema è qualcosa che è nel codice del mio template.

Ho fatto la prova anche con il browser chrome e il problema rimane, quindi a questo punto non è neanche un problema di browser o di pc. Tu che dici?

Prova a guardare se nel codice del mio template c'è qualcosa che non è compatibile o che non va...

[alemoppo]

Il tuo template non mi sembra abbia nulla che vada in conflitto con quello script.
Certo potresti migliorarlo aprendo il tag <head> alla terza riga e non alla 284, inoltre la sesta riga include un file css non esistente.

Secondo me il problema è semplicemente qui:

<div class="btn-responsive-menu">&nbsp;</div>

Modificandolo in:

<div class="btn-responsive-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>

Vedrai funzionerà.

Prova a fare la modifica tramite blocco note: scarica il file, aprilo con blocco note, modifica il file e ricaricalo su AlterVista.

Ciao!

[podset]

Ho fatto tutto come hai detto e finalmente si vede tutto ed è tutto perfetto.
Ti ringrazio di tutto.