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.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.395
338
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.395
338
83
Se vuoi che funzioni senza javascript, questo non è possibile
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.395
338
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.395
338
83
Nel link che hai menzionato c'è tutto il codice JS HTML CSS che ti può servire, basta che lo copi
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.395
338
83
Hai provato con z-index? All'immagine un valore 0 o anche un valore negativo e al menu un valore ad esempio 99
 
Discussioni simili
Autore Titolo Forum Risposte Data
F Problema hover voce di menù Javascript 2
P problema con tendina del menù, scompare sotto i contenuti HTML e CSS 7
LuigiDonato Problema Visualizzazione Menù HTML e CSS 17
Antares82 Problema menù a tendine PHP 6
B Problema con menù a tendina HTML e CSS 4
I Problema Menù a cascata complesso HTML e CSS 4
S problema menù espandibile Javascript 1
C Problema menù HTML e CSS 6
L problema con menù css HTML e CSS 1
E problema link nel menù XML 0
SilentMohai Problema di visualizzazione menù Javascript con InternetExplorer Javascript 0
P Problema con un menù a tendina PHP 7
M problema menù orizzonatale JS internet explorer Javascript 41
M [HTML/JAVASCRIPT] Problema Blocco Menù HTML e CSS 0
F Piccolo Problema menù espandibile toogle Javascript 6
G problema con menù e pulsanti flash Flash 0
P Problema: menù a tendina Javascript 1
T PROBLEMA CON SESSIONI PHP 3
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
I PROBLEMA: Sostituzione sito XAMPP E-Commerce 0
T problema data 30/11/-1 PHP 0
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Y Problema incolonnamento tabella PHP 7
S problema salvataggio immagini Photoshop 0
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
D problema php mysql PHP 1
D problema php mysql PHP 1
M Problema Wi-Fi Linux Linux e Software 0
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
Daniele_Carrara Problema Aperture Mailup Email Marketing 5
F PROBLEMA ACCESSO INSTAGRAM Discussioni Varie 2
R Problema connessione db PHP 7
M problema if PHP 2
G Problema con Get page PHP 4
N Problema passaggio variabili tra pagine PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 1
H problema carrello woocommerce PHP 2

Discussioni simili