Salve sto realizzando una pagina web e vorrei creare dei <div> a "scomparsa", un po' come i menu a tendina dove è visibile solo l'etichetta e appena ci si passa sopra con il puntatore del mouse esce fuori il menù attinente (per rendere l'idea http://cssplay.co.uk/menus/tabs_two.html). Un sistema di visualizzazione simile io vorrei applicarlo non ai link di un menù ma a dei box contenitori, anzi a dire la verità l'ho già realizzato in modo molto semplice con una tecnica completamente diversa rispetto al css di cssplay usata per i menù. Per farvi capire meglio ho creato una pagina di esempio (basta copiare/incollare e salvare in html):
<html>
<head>
<title>Test contenitore a scomparsa</title>
<style type="text/css" media="screen">
html, body{margin: 0px; padding: 0px; height:99%;}
#container{
width: 500px;
border: 3px double #000000;
background-color: #33CC33;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
overflow:hidden;
height: 500px;
}
#box_1{
padding: 0px;
position: absolute;
top: 50px;
margin: 0px;
left: 477px;
background-color: #FF0000;
}
#box_1:hover {
left: 220px;
}
#finestra_1 {
background-color: #FFFFFF;
width: 250px;
border: 1px solid #000000;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 25px;
position: relative;
}
</style>
</head>
<body>
<div id="container">
<div id="box_1">
<div id="finestra_1">
<ul>[*]Prova 1[*]Prova 2[*]Prova 3[/list]
</div>
</div>
</div>
</body>
</html>
in breve consiste nell' impostare il posizionamento del container principale su relativo (relative) e l' overflow su nascosto (hidden). Poi si creerà un box con posizionamento assoluto (absolute) e all'interno di esso andrà inserita la finestra che si desidera far comparire al passaggio del mouse, impostando, anche per lei un posizionamento relativo con un margine a sx di 25px che sarà l'etichetta sensibile al passaggio del mouse (nell'esempio l'etichetta è semplicemente rossa, ma è possibile aggiungere anche delle immagini con il nome della finestra da far comparire). Infine bisognerà posizionare #box_1 in modo che nel contenitore principale resti visibile solo l'etichetta (la parte restante non sarà visibile a causa dell' overflow), mentre sulla proprietà hover applicata a #box_1 non faremo altro che posizionare #box_1 quel tanto che basta a mostrare la restante parte della finestra nascosta con overflow. Se avete avuto pazienza di leggere fino a quisiamo finalmente arrivati al punto
, questa tecnica si basa sull'hover applicato al <div> #box_1 che ovviamente non è supportata da IE 6.x
(quindi addio a tutto l'effetto "scomparsa" o meglio "comparsa"), e qui si ritorna alla solita questione, ossia c'è un modo per adattare questo tipo di tecnica o usare un' altra tecnica che abbia gli stessi effetti usando il tag <a>? Io con il tag <a> sono riuscito con una tecnica diversa basata sulla proprietà visible a far digerire a IE 6.x lo spostamento della sola etichetta del #box_1, ma l'effetto completo fino ad ora non sono riuscito a "localizzarlo" per IE 6.x
, c'è qualcuno che avrebbe qualche idea sul come fare ? :master:
(almeno fino a IE 6.x), la cosa che mi da speranza è che nel link che ho postato prima il menu a scomparsa funziona anche su IE 6.x, ho notato che per realizzarlo sono stati usati dei particolari selettori per discendenza del tipo: