GDRCD 5.4.1 - Menù in Colonna di Sinistra con Icone

GDRCD 5.4.1 - Menù in Colonna di Sinistra con Icone postato il 19/04/2017 12:28:48 nel forum programmazione, open source e hosting

Buongiorno a tutti.
Ho tentato di applicare i suggerimenti indicati qui https://www.gdr-online.com/readforum.asp?id=215092 ↗ e qui https://www.gdr-online.com/readforum.asp?id=219459 ↗ per ottenere un un menù laterale con icone in orizzontale.

Il problema sembra essere che non mi legge la classe CSS applicata e non riesco davvero a venirne a capo. Al momento la situazione è questa:.

Ecco le parti di codice che ho modificato seguendo i suggerimenti di Sadly:

MAIN CSS

/*CSS SECONDO_MENU*/

select#gotomap{
display:block;
width:160px;
margin:0 auto 15px auto;
}

div.link_menu .menu2 {
padding:0 0 0 20px;
background-color:trasparent;
padding: 2px;
display: inline-block;

}

div.link_menu .menu2 a{
padding:2px;
text-align:center;
display: inline-block;
}

div.link_menu .menu2 a:hover{
background-color:trasparent;
color: #000;
text-decoration:none;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

div.link_menu .menu2 a.sprite {
display: block;
width: 50px;
height: 50px;
background: no-repeat top left;
}

div.link_menu .menu2 a.sprite:hover {
background-position: 0 100%;
}

LINK_MENU.INC.PHP

echo '<div class="link_menu menu2"><a href="' . $link_menu['url'] . '" id="link_' . $mkey . '_' . $key . '"';
foreach ($link_menu as $k => $v) {
if (!in_array($k, array('text', 'image_file', 'url', 'image_file_onclick', 'sprite'))) {
echo $k . '="' . $v . '"';
}
}
echo $content . '</a></div>';
}
$raw_counter++;

CONFIG.INC.PHP

/*SECONDO MENU*/
$PARAMETERS['left_column']['box']['link_menu']['class'] = 'link menu .menu2';
$PARAMETERS['left_column']['box']['link_menu']['page'] = 'link_menu';
$PARAMETERS['left_column']['box']['link_menu']['menu_key'] = 'secondo_menu';
$PARAMETERS['left_column']['box']['link_menu']['no_gotomap_list'] = true;
/*Menù Aggiuntivo*/
$PARAMETERS['names']['gamemenu']['secondo_menu'] = 'Menu';
/* VOCI DEL SECONDO_MENU */
$PARAMETERS['secondo_menu']['refresh']['text'] = 'Aggiorna';
$PARAMETERS['secondo_menu']['refresh']['url'] = 'main.php?dir=' . $_SESSION['luogo'];
$PARAMETERS['secondo_menu']['refresh']['image_file'] = 'IconaAggiorna.png';
$PARAMETERS['secondo_menu']['refresh']['image_file_onclick'] = '';

$PARAMETERS['secondo_menu']['map']['text'] = 'Mappa';
$PARAMETERS['secondo_menu']['map']['url'] = 'main.php?page=mappaclick&map_id=' . $_SESSION['mappa'];
$PARAMETERS['secondo_menu']['map']['image_file'] = 'IconaMappa.png';
$PARAMETERS['secondo_menu']['map']['image_file_onclick'] = '';

$PARAMETERS['secondo_menu']['profile']['text'] = 'Scheda';
$PARAMETERS['secondo_menu']['profile']['url'] = 'main.php?page=scheda&pg=' . $_SESSION['login'];
/*Esempio di link nel caso si volesse aprire come scheda modale
$PARAMETERS['secondo_menu']['profile']['url']="javascript:modalWindow('scheda', 'Scheda di ". $_SESSION['login'] ."', 'popup.php?page=scheda&pg=". $_SESSION

['login'] ."');";
*/
$PARAMETERS['secondo_menu']['profile']['image_file'] = 'IconaScheda.png';
$PARAMETERS['secondo_menu']['profile']['image_file_onclick'] = '';

$PARAMETERS['secondo_menu']['forum']['text'] = 'Bacheca';
$PARAMETERS['secondo_menu']['forum']['url'] = 'main.php?page=forum';
$PARAMETERS['secondo_menu']['forum']['image_file'] = 'IconaBacheca.png';
$PARAMETERS['secondo_menu']['forum']['image_file_onclick'] = '';

if ($_SESSION['permessi'] >= MODERATOR) {
$PARAMETERS['secondo_menu']['backend']['text'] = 'Gestione';
$PARAMETERS['secondo_menu']['backend']['url'] = 'main.php?page=gestione';
$PARAMETERS['secondo_menu']['backend']['image_file'] = 'IconaGestione.png';
$PARAMETERS['secondo_menu']['backend']['image_file_onclick'] = '';
}

$PARAMETERS['secondo_menu']['services']['text'] = 'Servizi';
$PARAMETERS['secondo_menu']['services']['url'] = 'main.php?page=uffici';
$PARAMETERS['secondo_menu']['services']['image_file'] = 'IconaServizi.png';
$PARAMETERS['secondo_menu']['services']['image_file_onclick'] = '';

$PARAMETERS['secondo_menu']['user_services']['text'] = 'Menu utente';
$PARAMETERS['secondo_menu']['user_services']['url'] = 'main.php?page=utenti';
$PARAMETERS['secondo_menu']['user_services']['image_file'] = 'IconaMenuUtente.png';
$PARAMETERS['secondo_menu']['user_services']['image_file_onclick'] = '';

$PARAMETERS['secondo_menu']['quit']['text'] = 'Esci';
$PARAMETERS['secondo_menu']['quit']['url'] = 'logout.php';
$PARAMETERS['secondo_menu']['quit']['image_file'] = 'IconaEsci.png';
$PARAMETERS['secondo_menu']['quit']['image_file_onclick'] = '';

Mi sento un vero sciocco, perchè le istruzioni date sembrano così chiare...uff.

Ringrazio anticipatamente per la pazienza e l'aiuto.

19/04/2017 17:21:45

C'è un errore nelle regole css.

i div dei menù hanno una doppia classe, come si legge dal codice: .link_menu e .menu2

In css lo spazio tra una classe e l'altra non è una cosa da ignorare e no nè utile solo per rendere più leggibile il codice. Lo spazio in CSS è *un operatore*, in particolare è l'operatore che seleziona i discendenti di ciò che precede lo spazio.

Se tu scrivi

.link_menu .menu2{
}

Dato che c'è lo spazio tra una classe e l'altra il browser andrà a cercare tutti i blocchi con classe menu2 che sono figli di un blocco con classe link_menu
Peccato che la struttura del tuo html non sia fatta così.
Per andare a indicare un blocco che ha due classi devi scriverle una di seguito all'altra senza lo spazio

.link_menu.menu2{
}

In questo modo il browser andrà a cercare un blocco che ha sia la classe link_menu che la classe menu2, che è esattamente quello che hai nel tuo html

19/04/2017 17:30:08

Grazie leoblacksoul.

E colgo le tue considerazioni come un ulteriore spunto di studio.
Ora mi rileggo il codice seguendo quanto mi indichi per capire esattamente ed evitare, se possibile di ripietere l'errore.

(magari studiare definitivamente e per bene il CSS e come applicarlo correttamente)

La risposta è stata esauriente e ha risolto il problema.

Grazie ancora leoblacksoul.
Si può chiudere il topic come "Risolto".

Grazie!

Il Merovingio