Proste poziome menu nawigacyjne z pionowym rozwijanym w HTML i CSS

Przedstawię mniej więcej jak utworzyć menu i podmenu, które powinno wyglądać tak jak poniżej:

Menu

 

 

 

 



Składać się będą na to dwa pliki “index.html” i “style.css”.
Dokładniejszy opis wykonania będzie umieszczony w plikach źródłowych.

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Menu</title>
<!--zewnętrzny arkusz stylów-->
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li class="dropdown">
<!--to bedzie rozwijana do dołu lista-->
<a href="javascript:void(0)" class="dropbtn">News</a>
<!--po wybraniu nic sie nie dzieje-->
<div class="dropdown-content">
<!--zagnieżdżona lista rozwijana w dół-->
<a href="#news1">News 1</a>
<a href="#news2">News 2</a>
<a href="#news3">News 3</a>
</div>
</li>
<li><a href="#contact">Contact</a></li>

</ul>
</nav>
</header>
</body>
</html>

 

 

 

/*jako że są to kaskadowe arkusze stylów, to kolejno od góry do dołu są dokonywane kolejne zmiany i też jak zajdzie potrzeba nadpisywane*/
ul {
    list-style-type: none; /*wyłączenie punktowania elementów listy*/
    margin: 0; /*zerowy margines naokoło listy*/
    padding: 0; /*otoczenie wewnętrzne*/
    overflow: hidden; /*ukrycie nadmiarowego rozmiaru listy*/
    background-color: #333;
}

li {
    float: left; /*ustawienie elementów listy tak by "pływały" w lewym kierunku*/
}

li a, .dropbtn {/*znak spacji w css oznacza następujące (niekoniecznie kolejno) po sobie elementy, natomiast przecinek oznacza tylko, że ".dropbtn" jest kolejnym elementem do takiego samego ostylowania*/
    display: block; /*wyświetlanie jako bloku*/
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none; /*wyłączenie podkreślenia w linkach*/
}

li a:hover, .dropdown:hover .dropbtn {/*":hover", czyli co będzie się działo po najechaniu na podstawowe menu*/
    background-color: #04AA6D;
}
li.dropdown {
    display: block;
}
.dropdown-content {
    display: none; /*pierwotne ukrycie menu rozwijanego w dół*/
    position: absolute; /*tak jakby usunięte jest zajmowane miejsce w dokumencie zajmowane przez element i ustawione do najbliższego pozycyjnego przodka;*/
    background-color: #333;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1; /*określenie pozycji w dokumencie (że menu będzie widoczne nad elementami ciała dokumentu*/
}

.dropdown-content a:hover {
    background-color: #04AA6D; /*kolor po najechaniu na element rozwijany w dół*/
}

.dropdown:hover .dropdown-content {
    display: block;
}

HTML, CSS i JavaScript: przykładowy kod strony

Poniżej przedstawiam przykładowe zastosowanie tych języków w utworzeniu prostej strony www. Składa się z czterech plików dostępnych poniżej.

 

Plik index.html:

<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="skrypt.js"></script>
</head>
<body>
<div id="menu">
<ul>Kurs: 
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
<div id="srodek">
Strona z odrobiną HTML-a, CSS-a i JavaScript. Kliknij na podkreślony tekst, a zmieni on kolor: <div onclick="zmiana(this);" class="czarny" id="podkreslonyDiv">kliknij tu, a zmienię kolor.</div>
</div>
</body>
</html>

Strona jest zgodna ze specyfikacją HTML5. Składa się ze standardowej struktury znaczników: html, head, body.

W głowie dokumentu w znaczniku link umieszczamy odnośnik do zewnętrznego arkusza stylów. Dalej podobnie w znaczniku script zewnętrzny skrypt napisany w języku JavaScript.

W ciele dokumentu znajduje się menu w postaci listy nieuporządkowanej.

Następnie blok, który wypośrodkujemy i zastosujemy w znajdującym się w nim tekście, dynamikę strony, polegającą na wywołaniu funkcji zmiana(), która jest odpowiedzialna po kliknięciu na element o id podkreslonyDiv, za zmianę klasy tego elementu.

 

Plik style.css:

body{
background-color: #C0C0C0;
}
ul{
list-style-type:none;
background: url(menu.png) repeat-x;
font-size:23px;
width:332px;
border-radius:15px;
margin:0;
}
ul li{
display:inline;
padding:5px;
}
ul li a:hover{
background: rgb(45,75,80);
border-radius:2px;
color:white;
}
a{
text-decoration:none;
color:#303030 ;
}
#menu{
width:372px;
height:27px;
margin-left: auto ;
margin-right: auto ;
}
#srodek{
margin-top:10px;
width:700px;
margin-left: auto ;
margin-right: auto ;
border-radius:15px;
background-color:#e8edef;
padding:30px;
}
.czerwony{
color:red;
}
.czarny{
color:black;
}
#podkreslonyDiv{
text-decoration:underline;
display: inline;
cursor: pointer;
}

W liście wyłączamy style listy (wypunktowanie). Następnie podajemy lokalizację do obrazka, który posłuży za tło menu, musimy go odpowiednio rozciągnąć w poziomie. Za pomocą ul li, odpowiednio przodka i potomka, określamy, że elementy listy mają wyświetlać się w jednej linii. Pseudoklasa :hover odpowiada za czynność najechania kursorem na element łącza a, zmieniamy tu, m.in. tło i kolor. W łączu wyłączamy charakterystyczne dla linków podkreślenie tekstu.

.czerwony i .czarny odpowiednio to zdefiniowane własne klasy, każda posiada określony inny kolor.

 

Plik skrypt.js:

function zmiana(div){
if (div.className == "czarny")
div.className = "czerwony";
else
div.className = "czarny";
}

Wspomniana wcześniej funkcja zmiana() wywołana z parametrem div. Początkowo klasa div-a jest ustawiona na kolor czarny. Odpowiednio po wywołaniu funkcji ma się zmieniać na przeciwną, o odmiennym kolorze.

 

Plik menu.png (kliknij prawym przyciskiem myszy na linie pionową i kliknij zapisz jako):

 

Wszystko umieszczamy w jednym folderze i uruchamiamy plik index.html za pomocą dowolnej przeglądarki internetowej.