Consigli per sistemare meglio il menu

paperinik4 · 6 Mar 2016

Grazie domani lo provo e ti faccio sapere. Notte.

paperinik4 · 7 Mar 2016

Ciao Max 1,

Ho provato il tuo menu ed è magnifico. Quello che volevo. Solo una cosa, c'è possibilità di distanziare le voci anche di poco ???? se si dove ????

Max 1 · 7 Mar 2016

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title></title>

<style type="text/css">
#cm-nav li a.arrow {background-image: url(arrow-right.gif)}

#cm-nav > li > a.arrow {background-image: url(arrow-down.gif)}

ul#cm-nav ,
ul#cm-nav ul {
 list-style-type: none;
 padding: 0px;
 margin: 0px;
 list-style-image: none
}

ul#cm-nav li {
 list-style-type: none;
 width: auto;
 position: relative;
 float: left;
 padding: 0px;
[B][COLOR="#FF0000"] margin: 5px;[/COLOR][/B]
 list-style-image: none
}

ul#cm-nav li li {
 width: auto;
 float: none
}

#cm-nav a {
 font-size: 9pt;
 text-decoration: none;
 border-top: black 1px solid;
 font-family: verdana;
 border-right: black 1px solid;
 background: #d6d5f0;
 white-space: nowrap;
 border-bottom: black 1px solid;
 text-align: left;
 padding: 5px;
 border-left: black 1px solid;
 display: block
}

#cm-nav a:focus {
 outline-width: medium;
 outline-style: none;
 outline-color: invert
}

#cm-nav a.no-click {cursor: default}

#cm-nav li a {margin: -1px -1px 0px 0px}

#cm-nav li li a {margin: 0px 0px -1px}

#cm-nav > li > a.arrow {padding-right: 14px}

#cm-nav ul.arrow-pad > li > a {padding-right: 11px}

#cm-nav li a.arrow ,
#cm-nav > li > a.arrow {
 background-repeat: no-repeat;
 background-position: right 50%
}

#cm-nav li ul ,
#cm-nav li:hover ul ul ,
#cm-nav li:hover ul ul ul ,
#cm-nav li:hover ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {
 position: absolute;
 z-index: 999;
 display: none
}

#cm-nav li:hover ul {display: block}

#cm-nav li li:hover ul ,
#cm-nav li li li:hover ul ,
#cm-nav li li li li:hover ul ,
#cm-nav li li li li li:hover ul ,
#cm-nav li li li li li li:hover ul ,
#cm-nav li li li li li li li:hover ul ,
#cm-nav li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li li li:hover ul {
 margin-left: 100%;
 display: block
}

#cm-nav li:hover ul {margin-left: 0px}

#cm-nav ul ul {
 left: -1px;
 top: 1px
}

#cm-nav li {top: -1px}

#cm-nav a {background-color: #000000}

#cm-nav a {border-color: #ed1c24}

#cm-nav a {color: #ffffff}

#cm-nav li:hover > a {background-color: #ffffff}

#cm-nav li:hover > a {color: #000000}

#cm-nav a {font-weight: normal}
</style>

</head>

<body style="background:#FFFFFF">

<div style="display: table; margin-left: auto; margin-right: auto">
<ul id="cm-nav">
   <li><a href="menuprincipale.php" target="_self">Home Page</a></li>
   <li><a href="#" class="arrow no-click">Voce con sottomenu</a>
      <ul>
         <li><a href="#" target="_self">Sottomenu 1</a></li>
         <li><a href="#" target="_self">Sottomenu 2</a></li>
         <li><a href="#" target="_self">Sottomenu 3</a></li>
      </ul>
   </li>
   <li><a href="archiviodiabolik.php" target="_self">Archivio Diabolik</a></li>
   <li><a href="archdktablet.php" target=":self">Archivio Diabolik nel tablet</a></li>
   <li><a href="archlibrimamma.php" target="_self">Archivio libri Mamma</a></li>
   <li><a href="archlibrimammakindle.php" target="_self">Archivio libri mamma nel kindle</a></li>
   <li><a href="aboutprogram.php" target="_self">Archivio libri mamma nel kindle</a></li>
</ul>
</div>

</body>

</html>

Ho modificato la voce evidenziata in rosso da 0 a 5px. Puoi cambiare il valore se la distanza non va bene

paperinik4 · 7 Mar 2016

Grazie dell'aiuto. E' stato prezioso come sempre. Perdonami un utlima cosa questa benedetta freccetta che indica i sottomenu come viene caricata ??? Non ho la più pallida idea. basta che mi fai un esempio ed io lo applico dove va applicato. Grazie.

Max 1 · 7 Mar 2016

Sono richiamate nel css in questo modo e vanno messe dove c'è il css

Codice:

#cm-nav li a.arrow {background-image: url(arrow-right.gif)}

#cm-nav > li > a.arrow {background-image: url(arrow-down.gif)}

paperinik4 · 7 Mar 2016

e poi come vengono richiamati dalla voce del menu ???? Ossia a esempio nel mio caso ho:

Archivio Diabolik con il sottomenu sarebbe strutturato così:

PHP:

<li><a href="#" class="arrow no-click">Archivio Diabolik</a>
       
      <ul>
         <li><a href="inserimentodatidk.php" target="_self">Inserimento dati</a></li>
         <li><a href="inserimentodatilibrimamma.php" target="_self">Ricerca dati</a></li>
         <li><a href="#" target="_self">Cancellazione dati</a></li>
         <li><a href="elencocompletodk.php" target="_self">Elenco completo</a></li>
         <li><a href="elencocompletodkneltb.php" target="_self">Elenco completo nel tablet</a></li>
      </ul>
   </li>

In questo caso il richiamo della freccia verso il basso dove va inserito ???? Inoltre l'ho posizionata qua nel css:

PHP:

#cm-nav a.no-click {cursor: default}

#cm-nav li a {margin: -1px -1px 0px 0px}

#cm-nav li li a {margin: 0px 0px -1px}

#cm-nav > li > a.arrow {padding-right: 14px}

#cm-nav ul.arrow-pad > li > a {padding-right: 11px}

#cm-nav li a.arrow ,
#cm-nav > li > a.arrow {background-image: url(arrow-down.gif)}
#cm-nav > li > a.arrow {
 background-repeat: no-repeat;
 background-position: right 50%
}

Ho fatto giusto ?????

Max 1 · 7 Mar 2016

ma sono già richiamate nel codice che ti ho dato!
basta che tu posizioni le immagini nella stessa dir della pagina con il css o del css se lo hai separato dalla pagina

paperinik4 · 7 Mar 2016

Ah ok allora domani provo.

paperinik4 · 8 Mar 2016

Ciao Max 1,

Non capisco perchè ma le freccette se tu dici che già sono richiamate nel coice non vengono visualizzate. L'unico dubbio potrebbe essere per il fatto che lo sfondo è di colore nero e a freccetta è di colore nero ??? Potrebbe essere ????

Max 1 · 8 Mar 2016

Sì certo il problema è quello cambia colore alle icone!

paperinik4 · 8 Mar 2016

Ok domani provo.

P.S.: che colore mi consigli per le icone ???? E quale sarebbe la riga del colore incriminata??? Grazie.

Max 1 · 8 Mar 2016

Il bianco! Mi sembra il colore più visibile sul nero.
Ma non si cambia colore da css bisogna rifare le icone.
Adesso te le rifaccio io! 5 minuti di tempo poi te le mando

Max 1 · 8 Mar 2016

Ecco le icone ma non cambiargli nome perchè nel css sono richiamate con questo nome

Non si vedono perchè sono bianche ora te le allego con un zip

Max 1 · 8 Mar 2016

Riprovo perchè non mi sembra che lo abbia caricato

paperinik4 · 9 Mar 2016

Grazie. Vorrei imparare molto da te e non chiedere sempre aiuto. Sei stato molto gentile. Domani le provo.

P.S: l'allegato ora c'é

paperinik4 · 9 Mar 2016

Ciao Max 1,

Bene Bene Bene dire, hai risolto magnificamente il problema delle freccette. Non era il cambo del colore, era proprio che mancva il riferimento dell'immagin. Difatti inerita l'imagine magicamente l'icona è apparsa. Un ultima cosa ti vorrei chiedere. C'è la possibilità di mettere le voci al centro e di dare più spazio dove ci sono le freccette ???? Quest è il menu attuale:

Come vedi sono belle appiccicate fra di loro. Se lo disttacco con il margin mi distacca tutto quanto invece volevo cercare di distaccare sol le voci dove ci sono le freccette. Spero di essermi spegato per il meglio. Grazie.

Max 1 · 9 Mar 2016

Vuoi aumentare lo spazio tra il testo del pulsante e la frecetta?
Se è così aumenta il padding nella voce:

Codice:

#cm-nav > li > a.arrow {padding-right: 14px}

paperinik4 · 9 Mar 2016

Ci proverò e ti dirò il risultato. Una cosa volevo sfruttare x il campi ricerca la stessa pagina, però disabilitando il menù e una volta inserito il dato da ricercare mettere due pulsanti uno "altra ricerca" e l'altro "ritorno al menu" che in pratica riabilitazione il menù disabilitato e togliere il campo cerca. È fattibile ?????

paperinik4 · 9 Mar 2016

Ciao Max 1,

Ho esegutio il tuo consiglio facendo in questo modo:

#cm-nav > li > a.arrow {padding-right: 34px};
#cm-nav li a.arrow {background-image: url(arrow-right.gif)}

Ma non si è spostato di una virgola.

paperinik4 · 9 Mar 2016

Stupido che sono, Non avevo letto bene che c'era una voce specifica. Invece per allargare leggermente ogni sngola voce ossia:

Fig. 1:

Fig. 2:

Fig. 3:

Spero di essermi spiegato per il meglio. Grazie.

Consigli per sistemare meglio il menu

Utente Attivo

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Super Moderatore

Super Moderatore

Allegati

Utente Attivo

Utente Attivo

Super Moderatore

Utente Attivo

Utente Attivo

Utente Attivo

Discussioni simili

Privacy & Transparency

Privacy & Transparency