Indice del forum Olimpo Informatico
I Forum di Zeus News
Leggi la newsletter gratuita - Attiva il Menu compatto
 
 FAQFAQ   CercaCerca   Lista utentiLista utenti   GruppiGruppi   RegistratiRegistrati 
 ProfiloProfilo   Messaggi privatiMessaggi privati   Log inLog in 

    Newsletter RSS Facebook Twitter Contatti Ricerca
Questa volta è il menù verticale....
Nuovo argomento   Rispondi    Indice del forum -> Linguaggi per Internet
Precedente :: Successivo  
Autore Messaggio
HelpMe!!!
Eroe in grazia degli dei
Eroe in grazia degli dei


Registrato: 16/12/11 21:03
Messaggi: 87

MessaggioInviato: 17 Gen 2012 01:08    Oggetto: Questa volta è il menù verticale.... Rispondi citando

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
Profilo Invia messaggio privato
pibe81
Mortale devoto
Mortale devoto


Registrato: 12/11/05 14:23
Messaggi: 9

MessaggioInviato: 17 Gen 2012 08:29    Oggetto: Rispondi citando

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
Profilo Invia messaggio privato
HelpMe!!!
Eroe in grazia degli dei
Eroe in grazia degli dei


Registrato: 16/12/11 21:03
Messaggi: 87

MessaggioInviato: 17 Gen 2012 16:54    Oggetto: Rispondi citando

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
Profilo Invia messaggio privato
SverX
Supervisor Macchinisti
Supervisor Macchinisti


Registrato: 25/03/02 11:16
Messaggi: 11568
Residenza: Tokelau

MessaggioInviato: 17 Gen 2012 17:20    Oggetto: Rispondi citando

Conosci listamatic? Potrebbe fare al caso tuo...

Ciao
Top
Profilo Invia messaggio privato HomePage
HelpMe!!!
Eroe in grazia degli dei
Eroe in grazia degli dei


Registrato: 16/12/11 21:03
Messaggi: 87

MessaggioInviato: 17 Gen 2012 19:14    Oggetto: Rispondi citando

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. Wink
Top
Profilo Invia messaggio privato
madvero
Amministratore
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.

MessaggioInviato: 17 Gen 2012 23:33    Oggetto: Rispondi citando

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
Profilo Invia messaggio privato Invia e-mail HomePage
HelpMe!!!
Eroe in grazia degli dei
Eroe in grazia degli dei


Registrato: 16/12/11 21:03
Messaggi: 87

MessaggioInviato: 17 Gen 2012 23:38    Oggetto: Rispondi citando

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
Profilo Invia messaggio privato
madvero
Amministratore
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.

MessaggioInviato: 17 Gen 2012 23:45    Oggetto: Rispondi citando

non è che hai perso una acca per strada?

background-attachment: fixed;

(oddio, in questo momento non mi ricordo se è la sintassi corretta).
Top
Profilo Invia messaggio privato Invia e-mail HomePage
madvero
Amministratore
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.

MessaggioInviato: 17 Gen 2012 23:46    Oggetto: Rispondi citando

ritratto la precedente affermazione.
Top
Profilo Invia messaggio privato Invia e-mail HomePage
HelpMe!!!
Eroe in grazia degli dei
Eroe in grazia degli dei


Registrato: 16/12/11 21:03
Messaggi: 87

MessaggioInviato: 17 Gen 2012 23:47    Oggetto: Rispondi citando

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
Profilo Invia messaggio privato
freemind
Supervisor sezione Programmazione
Supervisor sezione Programmazione


Registrato: 04/04/07 20:28
Messaggi: 4643
Residenza: Internet

MessaggioInviato: 20 Gen 2012 01:17    Oggetto: Rispondi

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
Profilo Invia messaggio privato
Mostra prima i messaggi di:   
Nuovo argomento   Rispondi    Indice del forum -> Linguaggi per Internet Tutti i fusi orari sono GMT + 1 ora
Pagina 1 di 1

 
Vai a:  
Non puoi inserire nuovi argomenti
Non puoi rispondere a nessun argomento
Non puoi modificare i tuoi messaggi
Non puoi cancellare i tuoi messaggi
Non puoi votare nei sondaggi