Menu in CSS

**Jigulina** · 05-03-2010, 22:22

Ciao ragazzi, sono una ragazza alla prime armi con i css, vi spiego cosa sto cercano di realizzare.
Io ho bisogno di un menù creato con immagini, solo che fin'ora sono riuscita a creare solo l'effetto a.hover. Io avrei bisogno che il quando il mause va sopra cambia l'immagine, ma quando l'utente sceglie la pagina, il menu utilizza l'immagine dell'effetto a.hover per contradistinguersi tra le altre voci. Come posso fare?
Vi posto il codice css e html.

codice:

<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style-type: none; }
 
.linea { float: left; }
a {
display: block;
overflow: hidden;
width: 99px;
height: 33px;
text-indent:-9999px;
background-repeat: no-repeat;
background-position: 0 -33px; }
 

a.home { background-image: url(home.png); }
</style>

HTML

codice:

<ul>
<li class="linea">Home[/list]

**miki003** · 05-03-2010, 22:45

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
                <title></title>
                <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
                <meta name="author" content="" />
                <meta name="Copyright" content="" />
<style type="text/css">
<!--
body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        margin: 0;
        font-size: 80%;
        font-weight: bold;
        background: #F3FAFF;
        }

ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }
#menu4 {
        width: 200px;
        border-style: solid solid none solid;
        border-color: #D76100;
        border-size: 1px;
        border-width: 1px;
        margin: 10px;
        }

#menu4 li a {
          height: 32px;
          voice-family: "\"}\"";
          voice-family: inherit;
          height: 24px;
        text-decoration: none;
        }

#menu4 li a:link, #menu4 li a:visited {
        color: #9E3C02;
        display: block;
        background: url(menu4.gif);
        padding: 8px 0 0 30px;
        }

#menu4 li a:hover, #menu4 li #current {
        color: #fff;
        background: url(menu4.gif) 0 -32px;
        padding: 8px 0 0 30px;
        }

#menu4 li a:active {
        color: #fff;
        background: url(menu4.gif) 0 -64px;
        padding: 8px 0 0 30px;
        }
-->
</style>
        </head>

        <body>
                <div id="menu4">
                        <ul>[*]Home[*]Products[*]Services[*]Support[*]Order[*]News[*]About
[/list]
                </div>
        </body>
</html>

**Jigulina** · 05-03-2010, 23:05

Ma io ho delle immagini diverse per ogni voce del menu:

codice:

<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style-type: none; }
 
.linea { float: left; }
a {
display: block;
overflow: hidden;
width: 99px;
height: 33px;
text-indent:-9999px;
background-repeat: no-repeat;
background-position: 0 -33px; }


 

a.home { background-image: url(home.png); }
a.lav { background-image: url(azienda.png); }
a.storia { background-image: url(servizi.png); }
a.cant { background-image: url(lavori.png); }
a.imm { background-image: url(immobili.png); }
a.cont { background-image: url(contatti.png); }

a:hover { background-position: 0 0; }
</style> 
</head>

<body>
<ul>
<li class="linea">Home
<li class="linea">Storia
<li class="linea">Lavori
<li class="linea">Cantiere
<li class="linea">Contatti
<li class="linea">Contatti[/list]
</body>

Come lo posso modificare su questo? Ogni voce ha un immagine che suddivisa in 2parti...

**ultimateshadow** · 07-03-2010, 00:22

se ho capito quello che vuoi fare, per me è un po contorta l'idea... spostare lo sfondo è una cosa che non ho mai usato per fare un menu...
o fai un css che imposta uno sfondo per ogni pulsante del menu (con relativo cambio di sfondo al passaggi del mouse) e poi ci scrivi sopra in html oppure ti fai un bel rollover con javascript sulle immagini che andranno ad essere i pulsanti del menu...

ti faccio un esempio, spero ti possa aiutare, guarda tu quale ti sembra più conforme a ciò che vuoi fare...

Menu CSS (come lo farei io):

codice:

<html>
<head>
    <title>TEST CSS</title>
    <style type="text/css">
	 #menu{
	  float:left;
	 }
	 #menu a:link, a:visited{
	  display:block;
	  background-image: url(bg.png); /* Qui io metterei un'immagine da 1px X 33px con un apposito gradiente verticale */
	  background-repeat:repeat-x;
	  height:33px;
	  width:99px;
	  padding: 7px auto auto 7px;
	 }
	 #menu a:hover{
	  background-image: url(bg_h.png); /* Anche qui un'altra immagine con gradiente verticale magari opposto per creare profindità */
	 }
    </style> 
</head>

<body>
 <div id="menu">
  link1
  link2
  link3
  link4
 </div>
</body>
</html>

altrimenti nella versione javascript:

codice:

<html>
<head>
    <title>TEST JS</title>
    <style type="text/css">
	 #menu{
	  float:left;
	 }
	 #menu img{
	  display:block;
	 }
    </style>
</head>

<body>
 <div id="menu">
  [img]./img1.png[/img]
  [img]./img2.png[/img]
  [img]./img3.png[/img]
  [img]./img4.png[/img]
 </div>
</body>
</html>

**Mich_** · 08-03-2010, 10:37

Rollover creativi
Sprites con i CSS e JQuery

Oppure cerca un menu che assomigli al tuo.
Tra i "link utili" ci sono alcuni riferiemnti (a me piacciono i menu di CSSplay)

@ultimateshadow
Nota che il rollover si fa anche senza JS: molto piu` veloce e accessibile.

**ultimateshadow** · 09-03-2010, 12:49

con css intendi? io conoscevo questi due modi... xD

ps: carini i link!!! però io sono per soluzioni visivamente molto semplici, li alcune sono un po ingombranti
(questo che hai postato tu mi piace veramente tanto!!!)

Discussione: Menu in CSS

Strumenti discussione

Ricerca discussione

Visualizza

Menu in CSS

Permessi di invio