visualizzazione condizionata al device delle voci di menu

[Filippo Pieri]

Salve a tutti,è possibile poter nascondere una voce di menu dal menu principale del sito joomla pubblicato nel modulo predefinito nella posizione predefinita del template cassiopeia?
Vi chiederete il perchè....sto sviluppando un sito nel quale ci sono contenuti creati con l'editor e questi sono già responsive per loro conto.Alcuni contenuti però sono stati stilizzati con attributi css inseriti nel file users.css del template per avere alcune funzionalità non standard diciamo (non fornite di default dall'editor),
 tipo ad es lo scorrimento delle tabelle con l'intestazione fissa etc...
Queste pagine non sono ovviamente responsive e non hanno alcun bisogno di esserlo in quanto non devono essere consultate se non in sede con pc.
Vorrei quindi che per pulizia e ordine generale del progetto, la voce di menu dalla quale si accede a tali contenuti non sia visibile quando al sito si accede da mobile (tablet, telefoni o in ogni caso schermi inferiori diciamo a 10 pollici in diagonale).
Il menu di suo ho visto che si trasforma in una icona hamburger e si apre in verticale quando toccato ad es nel touchscreen del mio tel android, e questo è già buono ma la voce che vorrei nascondere compare nella tendina che si apre.
Ho trovato una guida secondo la quale  si potevano nascondere dei moduli. (ma si riferiva a joomla 3 con template protostar mi pare, a giudicare dalle immagini);
cosi ho provato a creare un modulo a parte con un menu ovviamente separato e di spostare in esso la voce di menu che deve scomparire su mobile,  per sfruttare tale suggerimento, ma non funziona. In oltre tale voce si sposta tutta a dx e staccata dalle altre in maniera poco coerente.... quindi dovrei anche spostare il suo modulo con chissà quale altro casino che si creerebbe di conseguenza...Niente ...
Non credo di aver imboccato la via giusta.
Avete idee alternative?
Vorrei solo che l'ultima voce del main menu, scomparisse quando lo schermo si riduce sotto 760 px circa.... insomma deve vedersi solo su desktop..
Grazie mille per qualsiasi suggerimento.
Filippo P
 

[marine]

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

[Filippo Pieri]

   Translator            il Illperoii
Il fatto è che purtroppo non ho idea di dove diavolo metterla la dichiarazione di classe css da richiamare per mettergli le proprieta css che mi darebbe la funzione voluta perchè devo applicarla ad una voce di un menu di un sito costruito col joomla e non idea di come fare a sapere quell'elemento che sara un <ul><li></li><li></li><li></li><li class="hidden-mobile">mia voce di menu</li></ul> ma chissa dove..........Temo addirittura che non esista neppure un file html che contenga i tag del menu ma una applicazione joomla che lo genera al momentoNon lo so .... So solo che in teoria poi la regola css la vado a mettere in /media/template/site/cassiopeia/users.css (everride)....in teoria....Non so neppure se l'attributo @media screen and....  funziona solo con elementi blocco come div oppure anche con tag <li> di una lista....So solo che Joomla mi sta davvero deludendo... appena si devono fare delle cose un pelo più in la ... diventa un casino e credo che probabilmente mi converra rifare tutto a mano.ffffvAbe scusa lo sfogo 

[Filippo Pieri]

   Translator                Translator                Translator                Translator             

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Ho provato oggi a crearmi un menu in html leggermente stilizzato con css per dargli un aspetto simile ad un classico menu in alto posizione centrale e in linea. usando la proprieta css

@mediascreen and (max-width: 760px) {             nav li.hidden-mobile {display: none;}
}

Funziona, ok e funziona non solo su un elemento div ma anche su un elemento <li> quindi una singola voce di una lista.
Il punto è che in joomla non so come applicare una classe alla voce di menu che ho creato.
Nel codice di cui sopra ho richiamato il tag nav e poi il tag li con la classe hidden-mobile; ma, sempre che lo si possa fare in joomla, dove posso dare una classe alla singola voce di menu che creo appunto in joomla?
 Nel mio esempio ho provato a richiamare sia la voce della lista sia il link che essa rappresenta e funziona lo stesso:
@mediascreenand (max-width: 760px) {                         navli.hidden-mobilea{                           display: none;}     }
Quindi a sto punto dovrei solo sapere se posso mettere una classe all'elemento che joomla crea.... si puo fare?
Spero in vostre risposte.Filippo P

[marine]

Ad ogni singola voce di menù è possibile associare una specifica classe CSS

[Filippo Pieri]

Ad ogni singola voce di menù è possibile associare una specifica classe CSS

Ciao si alla fine ci sono riscito... o quasi...alla voce di menu ho inserito una classe chiamata hidden-mobile nel box "Classe css del link" che si trova nella terza scheda (opzioni link) accanto alle schede "Dettagli"  e "Opzioni" .
Ricaricando la pagina e analizzandola ho notato che la classe non viene aggiunta alla voce del munu (tag <li>) bensi al solo link cioè al tag <a>  contenuto dal tag <li> che definisce la voce dell'elenco;  quindi cosi facendo applicando la proprietà css:

/* Nascondi l'elemento se lo schermo è inferiore a 760px in larghezza */
@media screen and (max-width: 760px) {
  .hidden-mobile {display: none;}
}

nel file users.css nella cartella del template (over ride) ottenendo effettivamente il mio risultato ma solo relativamente al link rappresentato dalla voce di elenco.
Siccome però il tag <li> contiene anche una iconcina che rappresenta un pulsante che apre la tendina del sottomenù, questa giustamente non sparisce assieme alla voce del menu.... perché è un tag <botton>.
Questa purtroppo credo venga generata da qualche script di joomla non appena si applica la voce di menu come menu principale di un'altra voce di menu, e la si può solo abilitare o disabilitare globalmente dalle impostazioni del modulo. Purtroppo ho altre voci di menu che hanno dei sotto-menù quindi la disabilitazione dei sotto-menù non la posso adottare...
Morale della favola:
dal momento che questa benedetta voce del menu punta ad una tabelle piuttosto corposa che va consultata  su device di almeno 12-13 pollici, ho spostato tutti i sotto-menù in un altro menu e quindi in un altro modulo che deve apparire solo in certe pagine in posizione sidebar-right e... amen.
Svuotati i sottomenu dalla voce che deve sparire e spostate le voci stesse nel menu dell'altro nuovo modulo,  la freccettina nera sparisce dal main menu e.... opla...
Non è che l'avessi pensata proprio cosi ma .. può andare.
Daltronde ci ho perso due pomeriggi senza trovare il modo di assegare al tag botton una classe cosi da poterla "condizionare" con una regola css, e neppure al  tag <li> dell'elenco che conterrebbe appunto sia il link che il pulsante...
In teoria pensavo potesse essere il campo css modulo.. ma la classe assegnata in quel box va a condizionare l'intero body che contiene tutto il menu...VA beh... questo è quanto... buona giornata e buon ferragosto .
Filippo P

 
Purtroppo non son riuscito atrovare il modo di assgnare la classe a 

[mariarosaria]

Crea un altro modulo di menu con le voci che ti interessano e applichi le classi ai moduli.Così da mobile verrà caricato un certo menu, da desktop un altro