Digitális kiadványok
CSS
CSS technikák
Bootstrap
Vízszintes menü úsztatással
A technika kiindulási alapja egy navigációs menü egy listából, és lista elemekből felépítve (
nav elemről bővebben itt):1
<nav>
2
<ul>
3
<li class="active"><a href="#">Home</a></li>
4
<li><a href="#">About us</a></li>
5
<li><a href="#">Products</a></li>
6
<li><a href="#">Services</a></li>
7
<li><a href="#">Contact</a></li>
8
<li><a href="#">Blog</a></li>
9
</ul>
10
</nav>
Copied!
Formázatlan menü megjelenése.
Első lépésként eltüntetjük a lista elemek pontjait, és a listán lévő külső és belső margót:
1
nav ul {
2
list-style-type: none;
3
padding: 0;
4
margin: 0;
5
}
Copied!
Lista pontok nélkül.
Második lépésként balra úsztatjuk a lista elemeket, ennek következtében egy sorba rendeződnek:
1
nav li {
2
float: left;
3
}
Copied!
Lista elemek vízszintesen rendezve.
A harmadik lépés, hogy a menüpontokat széthúzzuk, belső margó segítségével, ezt az
a elemre tesszük. Ahhoz, hogy a belső margót rá tudjuk tenni az a elemre, blokkos elemmé kell alakítani, alapesetben szövegközi elem (inline).1
nav a {
2
display: block;
3
padding: 0 16px;
4
}
Copied!
Ez már egy használható vízszintes menü.
menu.css
menu.html
1
nav ul {
2
list-style-type: none;
3
padding: 0;
4
margin: 0;
5
}
6
7
nav li {
8
float: left;
9
}
10
11
nav a {
12
display: block;
13
padding: 0 16px;
14
}
Copied!
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7
<title>Menu</title>
8
<link rel="stylesheet" href="menu.css">
9
</head>
10
<body>
11
<nav>
12
<ul>
13
<li class="active"><a href="#">Home</a></li>
14
<li><a href="#">About us</a></li>
15
<li><a href="#">Products</a></li>
16
<li><a href="#">Services</a></li>
17
<li><a href="#">Contact</a></li>
18
<li><a href="#">Blog</a></li>
19
</ul>
20
</nav>
21
</body>
22
</html>
Copied!
Kész a vízszintes menü, jelen formájában már használható, a következő példában további stílusokkal látjuk el (elemek magassága, szövegszín, háttérszín):
menu.css
menu.html
1
nav ul {
2
list-style-type: none; /* Listáról leveszi a pöttyöket */
3
padding: 0; /* Alapértelmezett lista margó letiltása */
4
margin: 0; /* Alapértelmezett lista belső margó letiltása */
5
height: 46px; /* Lista magasságának beállítása */
6
background-color: #495057; /* A menü háttérszíne */
7
font-family: sans-serif;
8
}
9
10
nav li {
11
float: left; /* Egy sorba rendezi a lista elemeket */
12
}
13
14
nav a {
15
display: block; /* Ez kell, hogy be tudjuk állítani az elem magasságát, belső margóját */
16
padding: 0 16px; /* Menü elemek közötti (belső) térköz */
17
text-decoration: none; /* Eltünteti a linkekről az aláhúzást */
18
height: 46px; /* Menü elem magassága */
19
line-height: 46px; /* Vkálisan középre rendezi a menü elemben a szöveget */
20
color: white; /* A menü elemek szövegszíne */
21
}
22
23
nav li.active a {
24
background-color: #099268; /* Aktív menü elem háttérszíne */
25
26
}
27
28
nav a:hover {
29
background-color: #0ca678; /* Kurzor alatt lévő menü elem héttérszíne */
30
}
Copied!
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7
<title>Menu</title>
8
<link rel="stylesheet" href="menu.css">
9
</head>
10
<body>
11
<nav>
12
<ul>
13
<li class="active"><a href="#">Home</a></li>
14
<li><a href="#">About us</a></li>
15
<li><a href="#">Products</a></li>
16
<li><a href="#">Services</a></li>
17
<li><a href="#">Contact</a></li>
18
<li><a href="#">Blog</a></li>
19
</ul>
20
</nav>
21
</body>
22
</html>
Copied!
Egy lehetséges menü stílus.
Last modified 2yr ago
Export as PDF
Copy link