Jednym z pierwszych zadań na drodze projektu witryny internetowej jest stworzenie menu, czyli poziomego paska na górze strony, w obrębie którego umieszcza się odnośniki do najważniejszych podstron w serwisie.
Krok 1. Stworzenie plików na serwerze
- reset.css
- index.php
- nav.php
- css.css
- css-nav.css
Krok 2. Wydzielenie pliku z kodemu CSS (css.css) i wydzielenie pliku z kodem menu (nav.php) z pliku index.php
<head>
<link rel=”stylesheet” href=”css.css”>
</head>
<body>
<?php
include ‘nav.php’;
?>
</body>
Krok 2. Warstwa HTML dla pliku nav.pl
<body>
<header>
<nav>
<ul>
<li><a href=”#”><strona 1></li>
<li><a href=”#”><strona 2></li>
<li><a href=”#”><strona 3></li>
<li><a href=”#”><strona 4></li>
</ul>
</nav>
</header>
</body>
Krok 3. Import pliku css-nav.css i css-reset.css z pliku css.css i stylizacja menu
Plik css.css
@import “css-reset.css”;
@import “css-nav.css”;
Plik css-nav.css
header nav ul {
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 65px}
header nav ul li{
display:block;
line-height:4;
text-align:center;
background-color:black}
header nav ul li a{
color:white}
.item-1{
grid-column:1;
grid-row:1}
.item-2{
grid-column:2;
grid-row:1}
.item-3{
grid-column:3;
grid-row:1}
.item-4{
grid-column:4;
grid-row:1}
W efekcie powstaje proste menu, poziomy pasek z odnośnikami do najważniejszych stron na witrynie. Pasek ten nie łamie się, kurczy i rozciąga wraz z tym, jak zwężamy lub poszerzamy okno przeglądarki. Jest też częściowo dostosowany do urządzeń mobilnych, a przynajmniej stanowi dobry wstęp dla dalszej rozbudowy pod menu dla urządzeń mobilnych. Jest elastyczne, oparte na siatce CSS, czyli wiodącej technice CSS. W następnej części zajmiemy się dostosowaniem menu do urządzeń mobilnych, czyli tworzeniem menu typu “hamburger”.