Problema menù a scomparsa laterale

andreaco

Nuovo Utente
23 Ago 2014
6
0
0
Catania
Ciao ragazzi ho un problema che mi sta facendo impazzire, sto realizzando un portale web e ho riscontrato alcuni intoppi.
Ho il file index.html
Codice:
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Menù</title>   
   <link rel="stylesheet" href="./css/menu.css"/>   
</head>
<body>
   <ul id="nav"> 
    <li><a href="#">Agrumi</a> 
      <ul> 
         <li><a href="#">Arance</a></li> 
         <li><a href="#">Limoni</a></li> 
         <li><a href="#">Madarini</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Drupe</a> 
      <ul> 
         <li><a href="#">Albicocche</a></li> 
         <li><a href="#">Ciliegie</a></li> 
         <li><a href="#">Susine</a></li> 
      </ul> 
    </li>
    </ul>
   <div class="img">
      <img src="./image/frutti.jpg" width="800" height="400" />
   </div>
</body>
</html>
Con il relativo file css che è collocato in un file chiamato menu.css.
Codice:
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

/*Rimozione delle rientranze e dei punti*/
ul {
   margin: 0;
   padding: 0;
   list-style: none;
   width: 150px;
   /*Ricopre il bordo del menu*/
   border-bottom: 1px solid #ccc;
   position: fixed;   
   }

ul li {
   position: relative;
   }

li ul {
   position: absolute;
   left: 149px;
   top: 0;
   display: none;
   }

/*Stile del barra laterale*/
ul li a {   
   background: #ffc4af; 
   display: block;
   text-decoration: none;
   color: #000;
   padding: 5px;
   border: 1px solid #ccc;
   border-bottom: 0;
   opacity:0.9;
   font-weight:bold;
   }
   
/*Comparsa al passaggio del mouse*/
li:hover ul, li.over ul { 
   display: block; 
   }
   
/*Colore al passaggio del mouse*/
ul li a:hover { 
   color: #000; background: #fd4300; 
   } 
   
/*Grandezza Immagine*/
div.img {             
   text-align: center;
   }
I problemi che ho riscontrato sono:
  1. Il menù deve stare in alto a sinistra sopra l'immagine;
  2. Il menù deve essere a comparsa, rimane solo una linguetta e al passaggio del mouse si apre. Deve fare in questo modo però sopra l'immagine.

Pendo dalle Vostre labbra io ci ho provato in tutti i modi e non ci sono riuscito.
Vi ringrazio in anticipo.
 

andreaco

Nuovo Utente
23 Ago 2014
6
0
0
Catania
Ragazzi riprendo il vecchio post nessun mi saprebbe aiutare?
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.275
328
83
Ragazzi riprendo il vecchio post nessun mi saprebbe aiutare?
Per capire meglio cosa vuoi dire con sopra l'immagine e trovare una soluzione, dovresti fornirci un link per vedere la pagina funzionante.

Però noto che nel codice che hai postato manca la parte javascript che serve
 

andreaco

Nuovo Utente
23 Ago 2014
6
0
0
Catania
Per capire meglio cosa vuoi dire con sopra l'immagine e trovare una soluzione, dovresti fornirci un link per vedere la pagina funzionante.

Però noto che nel codice che hai postato manca la parte javascript che serve
Purtoppo la pagina web è in localhost quindi non è pubblicata, però posso fornire le immagini di come dovrebbe essere.Immagine.jpg

Il menù è sopra l'immagine delle arance però vorrei che facesse come il menù che ho messo nel link

Immagine2.jpg

Come si vede dall'immagine deve esserci una linguetta e una volta che si ci passa il mouse si espande verso destra.

Per quanto riguarda il codice in javascript, non l'ho messo perché il menù che sto indicando verrà creato da un json. Ma una volta che capisco come creare il menù a scomparsa sarà poi mia premura realizzarlo col javascript

Ps Scusatemi per l'immagine ma è stata elaborata con paint
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.275
328
83
Se vuoi che funzioni senza javascript, questo non è possibile
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.275
328
83
Quello secondo me senza JS non può funzionare. Altri esempi non centrano con il tuo e poi non funzionano così
 

andreaco

Nuovo Utente
23 Ago 2014
6
0
0
Catania
Quello secondo me senza JS non può funzionare. Altri esempi non centrano con il tuo e poi non funzionano così
Quindi per funzionare occorre specificare un qualche metodo con javascript.

Ok ma siccome sono nuovo con javascript quindi non ho molto praticità, cosa mi suggerisci?
Ad aggiungerlo è facile quindi poi lo realizzo dopo.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.275
328
83
Nel link che hai menzionato c'è tutto il codice JS HTML CSS che ti può servire, basta che lo copi
 

andreaco

Nuovo Utente
23 Ago 2014
6
0
0
Catania
Nel link che hai menzionato c'è tutto il codice JS HTML CSS che ti può servire, basta che lo copi
L'immagine si trova al centro della pagina web e quel menù a scomparsa funziona solo se si mette a sinistra, io invece voglio che sia sopra l'immagine
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.275
328
83
Hai provato con z-index? All'immagine un valore 0 o anche un valore negativo e al menu un valore ad esempio 99