Precedente :: Successivo |
Autore |
Messaggio |
HelpMe!!! Eroe in grazia degli dei
Registrato: 16/12/11 21:03 Messaggi: 87
|
Inviato: 17 Gen 2012 01:08 Oggetto: Questa volta è il menù verticale.... |
|
|
Allora vorrei creare una barra verticale con dei menù che si aprono al click del mouse sopra di essi o al passaggio del mouse, l'effetto visivo è quello di una casella chr contiene altre caselle, però incontro dei problemi: per esempio come ho adesso lo script quando clicco su una selezione i sub menù si aprono sotto il menù principale, rendendo inutile il tutto, perchè io vorrei che scansassero gli altri, per poi richiudersi da soli, inoltre vorrei che il menù rimanga fisso in un punto della pagina e si muova scrollando la stessa, ma il comando background-attcament:fixed non funziona come dovrebbe e il menù non mi sefue. Fatte le premesse posto gli script di tutto:
Codice: |
HTML:
<div id="menu">
<ul>
<li><a href="#nogo">Link 1 >></a>
<ul class="invisibile">
<li><a href="#nogo">Link 1-1</a></li>
<li><a href="#nogo">Link 1-2</a></li>
</ul>
</li>
<li><a href="#nogo">Link 2 >></a>
<ul class="invisibile">
<li><a href="#nogo">Link 2-1</a></li>
<li><a href="#nogo">Link 2-2</a></li>
<li><a href="#nogo">Link 2-3</a></li>
</ul>
</li>
<li><a href="#nogo">Link 3</a></li>
<li><a href="#nogo">Link 4 >></a>
<ul>
<li><a href="#nogo">Link 4-1</a></li>
<li><a href="#nogo">Link 4-2</a></li>
<li><a href="#nogo">Link 4-3</a></li>
</ul>
</li>
</ul>
</div>
CSS:
#menu, #menu ul, #menu li{
padding:0;
margin:0;
}
#menu li{
list-style: none;
position: relative;
width:120px;
height: 30px;
padding:0 20px;
background-color: black;
line-height: 30px;
top:0px;
left:-200px;
cursor: pointer;
background-attachment:fixed;
}
#menu li a{
text-decoration:none;
color: white;
}
#menu li:hover{
background-color:red;
}
#menu ul ul{
position: absolute;
top:30px;
left:200px;
visibility:hidden;
}
#menu ul li:hover ul{
visibility:visible;
}
|
|
|
Top |
|
|
pibe81 Mortale devoto
Registrato: 12/11/05 14:23 Messaggi: 9
|
Inviato: 17 Gen 2012 08:29 Oggetto: |
|
|
manca il javascript?
dov'è definita la classe css "invisibile"? Vedo che la usi nella unsorted list, ma non c'è scritto come (non) deve apparire. |
|
Top |
|
|
HelpMe!!! Eroe in grazia degli dei
Registrato: 16/12/11 21:03 Messaggi: 87
|
Inviato: 17 Gen 2012 16:54 Oggetto: |
|
|
Quella era solo una prova ch avevo fatto, ma non funziona quindi l'ho levata, per favore ignora quell'attribbuto ed eliminalo quando copi lo script, vorrei farlo io modificando il messaggio ma non me lo fà fare |
|
Top |
|
|
SverX Supervisor Macchinisti
Registrato: 25/03/02 11:16 Messaggi: 11568 Residenza: Tokelau
|
Inviato: 17 Gen 2012 17:20 Oggetto: |
|
|
Conosci listamatic? Potrebbe fare al caso tuo...
|
|
Top |
|
|
HelpMe!!! Eroe in grazia degli dei
Registrato: 16/12/11 21:03 Messaggi: 87
|
Inviato: 17 Gen 2012 19:14 Oggetto: |
|
|
Ho controllato e provato con alcuni ma non riesco ad ottenere l'effetto desiderato, l'effetto che vorrei ottenere è simile a questo: link, solo che con alcune correzzioni: i sub elementi del menù devono andare sotto la selezione dell'elemento collegato (non vogli che mi lasci quel margine visivo che lascia adesso), per capirci meglio voglio il tipo di funzionalità del primo link, ma applicato ad un menù di questo tipo: link. Vorrei unire l'estetica del secondo(compresa la posizione di menù e sub menù) con la funzionalità del primo. Adesso proverò ancora e ancora, però se sai come si fà fammelo sapere. |
|
Top |
|
|
madvero Amministratore
Registrato: 05/07/05 20:42 Messaggi: 19480 Residenza: Ero il maestro Zen. Scrivevo piccole poesie Haiku. Le mandavo a tutti via e-mail.
|
Inviato: 17 Gen 2012 23:33 Oggetto: |
|
|
il secondo link che hai postato non mi pare si avvalga di script, è un menù statico che sembra animato solo grazie al cambio del colore dello sfondo al passaggio del moure. |
|
Top |
|
|
HelpMe!!! Eroe in grazia degli dei
Registrato: 16/12/11 21:03 Messaggi: 87
|
Inviato: 17 Gen 2012 23:38 Oggetto: |
|
|
Diciamo che in pratica mi serve il primo, ma voglio che il menù sia graficamente come al secondo, ma ho provato con il css e ignora molte delle mie direttive, forse le imposto male, comunque mi sembra un pò strano, e onestamente non capisco il problema, inoltr avevo già provato ocn un'altro menù per metterlo fisso, ma background-attcament="fixed" non funziona come comando. BOh |
|
Top |
|
|
madvero Amministratore
Registrato: 05/07/05 20:42 Messaggi: 19480 Residenza: Ero il maestro Zen. Scrivevo piccole poesie Haiku. Le mandavo a tutti via e-mail.
|
Inviato: 17 Gen 2012 23:45 Oggetto: |
|
|
non è che hai perso una acca per strada?
background-attachment: fixed;
(oddio, in questo momento non mi ricordo se è la sintassi corretta). |
|
Top |
|
|
madvero Amministratore
Registrato: 05/07/05 20:42 Messaggi: 19480 Residenza: Ero il maestro Zen. Scrivevo piccole poesie Haiku. Le mandavo a tutti via e-mail.
|
Inviato: 17 Gen 2012 23:46 Oggetto: |
|
|
ritratto la precedente affermazione. |
|
Top |
|
|
HelpMe!!! Eroe in grazia degli dei
Registrato: 16/12/11 21:03 Messaggi: 87
|
Inviato: 17 Gen 2012 23:47 Oggetto: |
|
|
Con le altre immaigni funziona, nonfunziona se si tratta di un menù verticale ecco... Per questo non credo sia propio esatto, ma non mi viene in mente un'altra variabile, funzionerebbe se fosse uno sfondo come un'immagine tiopo un fiore, ma con un menù non mi funziona, eppure non c'è un comando simile.. |
|
Top |
|
|
freemind Supervisor sezione Programmazione
Registrato: 04/04/07 20:28 Messaggi: 4643 Residenza: Internet
|
Inviato: 20 Gen 2012 01:17 Oggetto: |
|
|
Qui sotto un esempio di menù verticale ad infiniti livelli fatto solo con css.
Tutte le menate di stile, grafica etc non sono state implementate per focalizzare il problema sull'effetto.
Per cambiare l'indentazione dei figli agire sulla proprietà margin-left.
Codice: |
<html>
<head>
<title></title>
<style>
#menu
{
display: block;
}
#menu li ul
{
display: none;
}
#menu li:hover > ul {
display: block;
margin-left: -30px;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2*</a>
<ul>
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
</ul>
</li>
<li><a href="#">3*</a>
<ul>
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a></li>
<li><a href="#">3.3*</a>
<ul>
<li><a href="#">3.3.1</a>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
|
Le voci con * hanno dei figli che appaiono al passaggio del mouse sul padre.
In pratica vengono nascosti tutti gli elementi ul se hanno un li come padre.
Poi al primo figlio ul di un li viene rimesso il block se si passa con il mouse sul padre.
P.S.
usate il bbcode "code" quando postate codice! |
|
Top |
|
|
|