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.449
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.449
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.449
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.449
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.449
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
I Sto progettando nuovi siti utilizzando bootstrap e devo dire funziona bene, l'unico problema e la maschera -moz- HTML e CSS 0
K Problema form update PHP 2
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
S Problema nel ciclare un json Javascript 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
K Problema Inner join PHP 1
F firefox problema http Linux e Software 0
N Problema con position absolute e overflow HTML e CSS 4
E Problema jquery Success jQuery 2
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
E problema selezione sfumata Photoshop 2
K [PHP] Problema con variabili concatenate. PHP 1
A Problema filtro fluidifica Photoshop Photoshop 1
H Problema Bordi Scontorno Photoshop 1
O problema con query PHP 4
R Problema installazione Realtek WiFi USB rtl8821 Reti LAN e Wireless 0
I problema con 2 account Posta Elettronica 1
L problema collegamento file css con html HTML e CSS 1
Y Problema percorso file in rete PHP 1
N Problema SEO "L'URL non si trova su Google" SEO e Posizionamento 4
E Problema accesso a file con app sviluppata con MIT APP INVENTOR 2 Sviluppo app per Android 0
P Problema acquisizione clienti Webdesign e Grafica 1
F NetBeans problema creazione progetto Java Windows e Software 0
M Problema con Try Catch PHP 0
C problema seo + cerco esperto SEO e Posizionamento 11
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
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
R problema con else PHP 0

Discussioni simili