Tworzymy menu w HTML i CSS
Niektórzy nie wiedzą jak tworzyć ładne menu. W tym artykule postaram się omówić tworzenie ciekawych odnośników jedynie w CSS i HTML. Myślę, że nie trzeba specjalnie omawiać atrybutów, ponieważ w arkuszach styli stworzone są komentarze.
Pierwsze menu - "boczna kreska" i zmiana koloru po najechaniu myszką:
Plik HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="Creation-date" content="2006-01-23T10:06:39Z" />
<meta name="Authoring_tool" content="Pajaczek NxG STD v5.2.0" />
<title>Menu w CSS</title>
<link rel="stylesheet" href="style.css" /> <!-- załączamy plik style.css -->
</head>
<body>
<div class="menu">
<a href="#" class="link">Link nr 1</a>
<a href="#" class="link">Link nr 2</a>
<a href="#" class="link">Link nr 3</a>
<a href="#" class="link">Link nr 4</a>
</div>
</body>
</html>
Plik CSS:
.menu{
width: 150px;
height: auto;
background-color: #FFFFFF;
border: gray solid 1px;
padding: 3px;
}
.link{
border-left: navy solid 12px; /* tworzymy "boczną kreskę" */
font-family: Tahoma, Verdana, 'Times New Roman', sans-serif;
font-size: 10pt;
font-weight: bold;
color: navy;
display: block; /* elementy będą wyświetlane w bloku - nie będzie trzeba stosować <br /> */
padding-left: 7px; /* odstęp pomiędzy "kreską" a pierwszą literą */
text-decoration: none; /* bez "dekoracji", czyli bez podkreślenia*/
}
.link:hover /* "gdy myszka nad" */{
border-left: orange solid 12px;
font-family: Tahoma, Verdana, 'Times New Roman', sans-serif;
font-size: 10pt;
font-weight: bold;
color: orange;
display: block;
padding-left: 7px;
text-decoration: none;
}
Jest ono spotykane na wielu stronach i wygląda estetycznie.
Menu nr 2 - "kropkowe" podkreślenie po najechaniu i zmiana koloru.
Plik HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="Creation-date" content="2006-01-23T10:06:39Z" />
<meta name="Authoring_tool" content="Pajaczek NxG STD v5.2.0" />
<title>Menu w CSS</title>
<link rel="stylesheet" href="style.css" /> <!-- załączamy plik style.css -->
</head>
<body>
<div class="menu">
<a href="#" class="link">Link nr 1</a>
<a href="#" class="link">Link nr 2</a>
<a href="#" class="link">Link nr 3</a>
<a href="#" class="link">Link nr 4</a>
</div>
</body>
</html>
Plik CSS:
.menu{
width: 150px;
height: auto;
background-color: #FF7575;
border: black solid 1px;
padding: 3px;
}
.link{
font-family: Courier, Tahoma, Verdana, 'Times New Roman', sans-serif;
font-size: 13pt;
color: black;
display: block; /* elementy będą wyświetlane w bloku - nie będzie trzeba stosować <br /> */
text-decoration: none; /* bez "dekoracji", czyli bez podkreślenia*/
}
.link:hover /* "gdy myszka nad" */{
font-family: Courier, Tahoma, Verdana, 'Times New Roman', sans-serif;
font-size: 13pt;
color: yellow;
display: block;
text-decoration: none;
border-bottom: gray dotted 1px; /* podkreślenie */
border-width: thin; /* "szerokość" podkreślenia */
}
Menu nr 3 - zmiana tła
Plik HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="Creation-date" content="2006-01-23T10:06:39Z" />
<meta name="Authoring_tool" content="Pajaczek NxG STD v5.2.0" />
<title>Menu w CSS</title>
<link rel="stylesheet" href="style.css" /> <!-- załączamy plik style.css -->
</head>
<body>
<div class="menu">
<a href="#" class="link">Link nr 1</a>
<a href="#" class="link">Link nr 2</a>
<a href="#" class="link">Link nr 3</a>
<a href="#" class="link">Link nr 4</a>
</div>
</body>
</html>
Plik CSS:
.menu{
width: 150px;
height: auto;
background-color: #FFFFFF;
border: gray dashed 1px;
padding: 3px;
}
.link{
font-family: Courier, Tahoma, Verdana, 'Times New Roman', sans-serif;
font-size: 13pt;
color: black;
display: block; /* elementy będą wyświetlane w bloku - nie będzie trzeba stosować <br /> */
text-decoration: none; /* bez "dekoracji", czyli bez podkreślenia*/
}
.link:hover /* "gdy myszka nad" */{
font-family: Courier, Tahoma, Verdana, 'Times New Roman', sans-serif;
font-size: 13pt;
color: red;
background-color: #FFFEBF;
display: block;
text-decoration: none;
border-bottom: gray dotted 1px; /* podkreślenie */
border-width: thin; /* "szerokość" podkreślenia */
}
Menu nr 4 - przyciski jak w Windows 98
Plik HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="Creation-date" content="2006-01-23T10:06:39Z" />
<meta name="Authoring_tool" content="Pajaczek NxG STD v5.2.0" />
<title>Menu w CSS</title>
<link rel="stylesheet" href="style.css" /> <!-- załączamy plik style.css -->
</head>
<body>
<div class="menu">
<a href="#" class="link">Link nr 1</a>
<a href="#" class="link">Link nr 2</a>
<a href="#" class="link">Link nr 3</a>
<a href="#" class="link">Link nr 4</a>
</div>
</body>
</html>
Plik CSS:
.menu{
width: 150px;
height: auto;
background-color: #E5E5E5;
border: gray dashed 1px;
padding: 3px;
}
.link{
font-family: Tahoma, Verdana, 'Times New Roman', sans-serif;
font-size: 10pt;
background-color: #CFCDCD;
border-top: white solid 1px;
border-bottom: gray solid 1px;
border-left: white solid 1px;
border-right: gray solid 1px;
padding: 3px;
color: black;
display: block; /* elementy będą wyświetlane w bloku - nie będzie trzeba stosować <br /> */
text-decoration: none; /* bez "dekoracji", czyli bez podkreślenia*/
}
.link:hover /* "gdy myszka nad" */{
font-family: Tahoma, Verdana, 'Times New Roman', sans-serif;
font-size: 10pt;
background-color: #DBDBDB;
border-top: gray solid 1px;
border-bottom: white solid 1px;
border-left: gray solid 1px;
border-right: white solid 1px;
padding: 3px;
color: black;
display: block;
text-decoration: none;
}
Tak właśnie za pomocą CSS można tworzyć duzo fantazyjnych odnośników. Mozna się bawić, bawić i tworzyć coraz to ładniejsze linki. Tutaj podałem tylko najczęściej spotykane "kształty" i są one punktem wyjścia do dalszej praktyki.
Pierwsze menu - "boczna kreska" i zmiana koloru po najechaniu myszką:
Plik HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="Creation-date" content="2006-01-23T10:06:39Z" />
<meta name="Authoring_tool" content="Pajaczek NxG STD v5.2.0" />
<title>Menu w CSS</title>
<link rel="stylesheet" href="style.css" /> <!-- załączamy plik style.css -->
</head>
<body>
<div class="menu">
<a href="#" class="link">Link nr 1</a>
<a href="#" class="link">Link nr 2</a>
<a href="#" class="link">Link nr 3</a>
<a href="#" class="link">Link nr 4</a>
</div>
</body>
</html>
Plik CSS:
.menu{
width: 150px;
height: auto;
background-color: #FFFFFF;
border: gray solid 1px;
padding: 3px;
}
.link{
border-left: navy solid 12px; /* tworzymy "boczną kreskę" */
font-family: Tahoma, Verdana, 'Times New Roman', sans-serif;
font-size: 10pt;
font-weight: bold;
color: navy;
display: block; /* elementy będą wyświetlane w bloku - nie będzie trzeba stosować <br /> */
padding-left: 7px; /* odstęp pomiędzy "kreską" a pierwszą literą */
text-decoration: none; /* bez "dekoracji", czyli bez podkreślenia*/
}
.link:hover /* "gdy myszka nad" */{
border-left: orange solid 12px;
font-family: Tahoma, Verdana, 'Times New Roman', sans-serif;
font-size: 10pt;
font-weight: bold;
color: orange;
display: block;
padding-left: 7px;
text-decoration: none;
}
Jest ono spotykane na wielu stronach i wygląda estetycznie.
Menu nr 2 - "kropkowe" podkreślenie po najechaniu i zmiana koloru.
Plik HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="Creation-date" content="2006-01-23T10:06:39Z" />
<meta name="Authoring_tool" content="Pajaczek NxG STD v5.2.0" />
<title>Menu w CSS</title>
<link rel="stylesheet" href="style.css" /> <!-- załączamy plik style.css -->
</head>
<body>
<div class="menu">
<a href="#" class="link">Link nr 1</a>
<a href="#" class="link">Link nr 2</a>
<a href="#" class="link">Link nr 3</a>
<a href="#" class="link">Link nr 4</a>
</div>
</body>
</html>
Plik CSS:
.menu{
width: 150px;
height: auto;
background-color: #FF7575;
border: black solid 1px;
padding: 3px;
}
.link{
font-family: Courier, Tahoma, Verdana, 'Times New Roman', sans-serif;
font-size: 13pt;
color: black;
display: block; /* elementy będą wyświetlane w bloku - nie będzie trzeba stosować <br /> */
text-decoration: none; /* bez "dekoracji", czyli bez podkreślenia*/
}
.link:hover /* "gdy myszka nad" */{
font-family: Courier, Tahoma, Verdana, 'Times New Roman', sans-serif;
font-size: 13pt;
color: yellow;
display: block;
text-decoration: none;
border-bottom: gray dotted 1px; /* podkreślenie */
border-width: thin; /* "szerokość" podkreślenia */
}
Menu nr 3 - zmiana tła
Plik HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="Creation-date" content="2006-01-23T10:06:39Z" />
<meta name="Authoring_tool" content="Pajaczek NxG STD v5.2.0" />
<title>Menu w CSS</title>
<link rel="stylesheet" href="style.css" /> <!-- załączamy plik style.css -->
</head>
<body>
<div class="menu">
<a href="#" class="link">Link nr 1</a>
<a href="#" class="link">Link nr 2</a>
<a href="#" class="link">Link nr 3</a>
<a href="#" class="link">Link nr 4</a>
</div>
</body>
</html>
Plik CSS:
.menu{
width: 150px;
height: auto;
background-color: #FFFFFF;
border: gray dashed 1px;
padding: 3px;
}
.link{
font-family: Courier, Tahoma, Verdana, 'Times New Roman', sans-serif;
font-size: 13pt;
color: black;
display: block; /* elementy będą wyświetlane w bloku - nie będzie trzeba stosować <br /> */
text-decoration: none; /* bez "dekoracji", czyli bez podkreślenia*/
}
.link:hover /* "gdy myszka nad" */{
font-family: Courier, Tahoma, Verdana, 'Times New Roman', sans-serif;
font-size: 13pt;
color: red;
background-color: #FFFEBF;
display: block;
text-decoration: none;
border-bottom: gray dotted 1px; /* podkreślenie */
border-width: thin; /* "szerokość" podkreślenia */
}
Menu nr 4 - przyciski jak w Windows 98
Plik HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="Creation-date" content="2006-01-23T10:06:39Z" />
<meta name="Authoring_tool" content="Pajaczek NxG STD v5.2.0" />
<title>Menu w CSS</title>
<link rel="stylesheet" href="style.css" /> <!-- załączamy plik style.css -->
</head>
<body>
<div class="menu">
<a href="#" class="link">Link nr 1</a>
<a href="#" class="link">Link nr 2</a>
<a href="#" class="link">Link nr 3</a>
<a href="#" class="link">Link nr 4</a>
</div>
</body>
</html>
Plik CSS:
.menu{
width: 150px;
height: auto;
background-color: #E5E5E5;
border: gray dashed 1px;
padding: 3px;
}
.link{
font-family: Tahoma, Verdana, 'Times New Roman', sans-serif;
font-size: 10pt;
background-color: #CFCDCD;
border-top: white solid 1px;
border-bottom: gray solid 1px;
border-left: white solid 1px;
border-right: gray solid 1px;
padding: 3px;
color: black;
display: block; /* elementy będą wyświetlane w bloku - nie będzie trzeba stosować <br /> */
text-decoration: none; /* bez "dekoracji", czyli bez podkreślenia*/
}
.link:hover /* "gdy myszka nad" */{
font-family: Tahoma, Verdana, 'Times New Roman', sans-serif;
font-size: 10pt;
background-color: #DBDBDB;
border-top: gray solid 1px;
border-bottom: white solid 1px;
border-left: gray solid 1px;
border-right: white solid 1px;
padding: 3px;
color: black;
display: block;
text-decoration: none;
}
Tak właśnie za pomocą CSS można tworzyć duzo fantazyjnych odnośników. Mozna się bawić, bawić i tworzyć coraz to ładniejsze linki. Tutaj podałem tylko najczęściej spotykane "kształty" i są one punktem wyjścia do dalszej praktyki.
Materiał dodany przez użytkownika: maciekt