Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
PHP - Menu a tendina
Forum - PHP - Menu a tendina

Avatar
Aangelus (Normal User)
Pro


Messaggi: 143
Iscritto: 29/03/2011

Segnala al moderatore
Postato alle 13:42
Sabato, 25/10/2014
Salve a tutti ho creato un menu a tendina e fino qui funzionava tutto, una volta introdotto subito sotto un div con margini che comprende tutta la larghezza del menu, quando vado a selezionare un sotto menu scompare subito senza poterlo selezionare suggerimenti ? grazie
foglio Style :

Codice sorgente - presumibilmente Plain Text
  1. #menu {
  2.     width: 500px;
  3.     margin: 150px auto;
  4. }
  5.  
  6. #menu ul {
  7.     padding: 0;
  8.     margin: 0;
  9. }
  10.  
  11. #menu li {
  12.     position: relative;
  13.     float: left;
  14.     list-style: none;
  15.     margin: 0;
  16.     padding: 0 5px;
  17.      
  18.     -webkit-transition: all 0.2s ease-in-out;
  19.     -moz-transition: all 0.2s ease-in-out;
  20.     -o-transition: all 0.2s ease-in-out;
  21.     -ms-transition: all 0.2s ease-in-out;
  22. }
  23.  
  24. #menu li a {
  25.     width: 120px;
  26.     line-height: 40px;
  27.     padding: 5px 13px;
  28.     display: block;
  29.     text-decoration: none;
  30.     text-align: center;
  31.     background-color: #222222;
  32.     color: white;
  33. }
  34.  
  35. #home { background: url("img/home.png") no-repeat no-repeat 10px 7px; }
  36. #feed { background: url("img/rss.png") no-repeat no-repeat 10px 7px; }
  37. #sezioni { background: url("img/sezioni.png") no-repeat 10px 7px; }
  38.  
  39.  
  40. #home:hover {
  41.     border-bottom: 3px solid #32CD32;  
  42. }
  43.  
  44. #feed:hover {
  45.     border-bottom: 3px solid #FFA500;
  46. }
  47.  
  48. #sezioni:hover {
  49.     border-bottom: 3px solid #FFFF00;
  50. }
  51.  
  52. #menu li a:hover{
  53.     text-shadow: 0px 0px 1px #FFF;
  54.     background-color: #000000;
  55. }
  56.  
  57. #menu ul li:hover {
  58.     transform: scale(1.1, 1.1);
  59.     -ms-transform: scale(1.1, 1.1); /* IE 9 */
  60.     -webkit-transform: scale(1.1, 1.1); /* Safari and Chrome */
  61. }
  62.  
  63. #menu ul li ul li:first-child {
  64.     margin-top: 3px;
  65. }
  66.  
  67. #menu ul li ul li:last-child:after, ul li ul li:last-child:before {
  68.     display: none;
  69. }
  70.  
  71. #menu ul ul {
  72.     position: absolute;
  73.     top: 50px;
  74.     right: -1px;
  75.     visibility: hidden;
  76. }
  77.  
  78. #menu ul li:hover ul{
  79.     visibility: visible;
  80. }
  81.  
  82. .Sub li:before {
  83.     content: "";
  84.     border-color: transparent #000000 transparent transparent;
  85.     border-style: solid;
  86.     border-width: 13px;
  87.     height: 0px;
  88.     width: 0px;
  89.     position: absolute;
  90.     left: -8px;
  91.     top: 38px;
  92.     z-index: -1;
  93. }
  94.  
  95. .Sub li:after {
  96.     content: "";
  97.     border-color: transparent  transparent transparent #000000;
  98.     border-style: solid;
  99.     border-width: 13px;
  100.     height: 0px;
  101.     width: 0px;
  102.     position: absolute;
  103.     right: -8px;
  104.     top: 38px;
  105.     z-index: -1;
  106. }
  107. #Box{
  108.     border: 1px solid blue;
  109.     height: 38px;
  110.     left: 533px;
  111.     position: absolute;
  112.     top: 206px;
  113.     width: 323px;
  114.     text-align: center;
  115.     padding: 2px;
  116.     box-shadow: 0 0 8px inset;
  117. }


pagina php

Codice sorgente - presumibilmente HTML
  1. <link rel="stylesheet" href= "Style2.css?v=1"/>
  2. <div id="menu">
  3.     <!-- Lista generale -->
  4.     <ul>
  5.         <!-- 1° Elemento: Home -->
  6.         <li>
  7.             <a href="#" id="home">Home</a>
  8.         </li>
  9.          
  10.         <!-- 2° Elemento: Feed -->
  11.         <li>
  12.             <a href="#" id="feed">Sezioni1</a>
  13.         </li>
  14.          
  15.         <!-- 3° Elemento: Sezioni -->
  16.         <li>
  17.             <a href="#" id="sezioni">Sezioni2</a>
  18.             <!-- Voci annidate 2° Elemento -->
  19.             <ul class="Sub">
  20.                 <li>
  21.                     <a href="#">Link 3-1</a>
  22.                 </li>
  23.                 <li>
  24.                     <a href="#">Link 3-2</a>
  25.                 </li>
  26.                 <li>
  27.                     <a href="#">Link 3-3</a>
  28.                 </li>
  29.             </ul>
  30.         </li>
  31.     </ul>
  32. </div>
  33. <div id="Box">
  34.    
  35. </div>

Ultima modifica effettuata da Aangelus il 25/10/2014 alle 16:20
PM Quote
Avatar
Aangelus (Normal User)
Pro


Messaggi: 143
Iscritto: 29/03/2011

Segnala al moderatore
Postato alle 1:45
Domenica, 26/10/2014
Dopo molte ore di ricerche e prove ho risolto cambiando il parametro  z-index: -1; Grazie comunque

PM Quote
Avatar
whitecrow4 (Normal User)
Newbie


Messaggi: 1
Iscritto: 12/01/2015

Segnala al moderatore
Postato alle 13:27
Lunedė, 12/01/2015
Se ci siano limiti di tabelle non so, ma solitamente (che io sappia) č meglio una singola tabella che contenga anche un campo (magari in relazione con la chiave primaria della tabella degli utenti)  indichi a quale utente si riferisca ogni record; quando poi bisogna accedere ai dati si filtra la tabella per ottenere solo quelli necessari.

______________
white

Ultima modifica effettuata da whitecrow4 il 12/01/2015 alle 13:28
PM Quote
Avatar
pbe (Normal User)
Pro


Messaggi: 131
Iscritto: 24/05/2014

Segnala al moderatore
Postato alle 15:07
Lunedė, 12/01/2015
Di PHP non ha proprio niente questo codice...

PM Quote