Tutorial: menu css orizzontale con rollover e CSS3

Posted at novembre 3, 2010 // Video Tutorial, WebDesign

Oggi, con questo articolo, iniziamo la rubrica Video Tutorial.

Il video che segue, vi spiega come creare un menu di navigazione orizzontale, abbellito da un effetto rollover creato tramite la proprietà CSS3 border-radius.

Parte 1

Parte 2

Sorgente

File: index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio Menu</title>
</head>
 
<body>
	<div id="nav">
    	<li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">honehoneohone</a></li>
    </div>
</body>
</html>

File: style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

@charset "UTF-8";
/* CSS Document */
 
#nav {
	width:800px;
	height:30px;
	display:block;
	background:#C90;
	}
 
#nav li {
	float:left;
	list-style:none;
	line-height:30px;
	}
 
#nav a {
	padding-left:10px;
	padding-right:10px;
	padding-top:5px;
	padding-bottom:5px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	}
 
#nav a:hover {
	background:#963;
	border-radius:5px;
	-moz-border-radius:5px;
	}
SCARICA ESEMPIO

Scritto da Caluk

WebMaster prima per passione, poi per lavoro. Ho la passione per la fotografia, il montaggio video e la musica. Progetti? Tanti!! Tempo per realizzarli? Pochissimo!!
Leggi i miei post recenti Caluk

Tags : , , , ,

Se l'articolo è stato di tuo gradimento, puoi lasciare un commento oppure puoi abbonarti ai feed ed essere informato in futuro quando usciranno nuovi articoli.

Commenta l'articolo