Kod:
#navigation {
width:950px; /*gługość menu*/
height:51px;/*wysokość menu */
background: #d6eaf8 url(images/1.jpg) repeat-x left top; /*tło menu*/ }
ul.nav-main li:hover > ul {visibility: visible;} /*Taki wpis powoduje utworzenie , a raczej powoduje to że rozwijane menu jest widoczne*/
ul.nav-main li:hover {
position: relative; /*To pozwala na rozwijanie się menu pod odpowiednim klawiszem*/
background: url(images/2.PNG) repeat-x left top; /*tutaj zostaje podkreślenie klawisza gdy najedziemy na niego kursorem */
}
ul.nav-main li {
float:left; /* Takie coś pozwala nam posegregować klawisze od lewej strony*/
display:block;
height: 51px; /*Wysokość pionowych separatorów */
color: #999; /* kolor #999 taki kolor mają te rozsuwane klawisze :P */
/*Ale ten kolor co po najechaniu na menu wyskakuje jest brany z obrazka a nie z #999*/
font: 14px Arial, Helvetica, sans-serif; /*czcionka ...*/
background: url(images/separator.gif) no-repeat right center; /* tak jak nazwa wskazuje tutaj zostają oddzielane klawisze separatorem */
}
ul.nav-main li a { /*Tutaj ustawiamy gdzie i jak ma się pokazywać tekst w menu */
display:block; /* to pozwala na wyśrodkowanie napisów*/
padding: 16px 16px 0 16px;/* to pozwala na ustawienie napisów ( a dokładniej pola na którym się on znajduje)szerokość głównie i wysokość*/
color: #999; /* kolor*/
font: 14px Arial, Helvetica, sans-serif;
/*text-decoration:none; */
}
ul.nav-main *.list { /* Tutaj , to pozwala na wyświetlanie tej strzałki obok kursora*/
padding-right: 22px;/*wymiary*/
background: url(images/navigation-arrow.gif) no-repeat right top; /*obrazek*/
}
ul.nav-sub { /*a to tajemnica ;) To odpowiada mniej więcej za listy te rozwijalne*/
visibility: hidden;position: absolute;
padding:10px; /*wymiary*/
top: 48px; /* Odległość od menu, odległość w której pojawi się rozwinięta lista najlepiej wpisać tutaj wysokość paska menu */
left: 0; /* tu chyba jasne*/
background: #353535 url(images/3.gif) repeat-x left top; /*podkład listy */
/*to takie coś magiczne co pozwala nam ustawić wymiary czarnego podkładu menu */
border-right: 1px solid #000; /*prawa strona*/
border-bottom: 1px solid #000;/*dolna częćś strony*/
border-left: 1px solid #000;/*lewa strona*/
}
ul.nav-sub li {
height: 27px; /*wysokość klawisza z listy*/
float: none;/*To pozwala na płynne podświetlanie klawiszy w liście*/
width:145px;/*A to pozwala nam na określenie długości klawisza ,jeśli klawisz jest krótszy od tekstu to tekst nam zwinie się i trochę nie estetycznie będzie wyglądała nasza lista rozwijana */
border-bottom: 1px solid #5a5a5a;
background: none;
}
ul.nav-sub li a { /* Tutaj ustawiamy gdzie i jak mają być ustawione klawisze */
padding: 6px 5px 6px 5px;
height: 15px;
float: none;
width:805px;
font: 12px Arial, Helvetica, sans-serif;}
/* the end */
Kod:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- Kodowanie liter-->
<title>Menu</title> <!-- tytuł strony-->
<link href="menu.css" media="screen" rel="stylesheet" type="text/css" /> <!--tutaj Podłączamy plik css czyli standard -->
</head>
<body>
<!-- A tutaj zaczynamy nasze menu !! Oczywiście możesz ten punkt załączyć pod już gotową stronę wykonano w HTML-->
<ul id="navigation" class="nav-main">
<li><a href="#">menu</a></li>
<li class="list"><a href="#">menu1</a>
<ul class="nav-sub">
<li><a href="#">menu2</a></li>
<li><a href="#">menuiQQQ3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
</ul>
</li>
<li class="list"><a href="#">menu10</a>
<ul class="nav-sub"> <!--ta klasa nav-sub pozwala na menu rozwijane zobacz składnie pliku csss-->
<li><a href="#">menu11</a></li>
<li><a href="#">menu12</a></li>
<li><a href="#">menu13</a></li>
</ul>
</li>
<li><a href="#">menu14</a></li>
<li><a href="#">menu15</a></li>
<!--
<li class="list"><a href="#">menu1</a>
<ul class="nav-sub">
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
<li><a href="#">menu6</a></li>
<li><a href="#">menu7</a></li>
<li><a href="#">menu8</a></li>
<li><a href="#">menu9</a></li>
</ul>
</li>
Taki układ jak powyżej tworzy nam menu z listą rozwijalną
A taki jak poniżej tworzy nam jedną główną pozycje w menu która jest nie rozwijalna
<li><a href="#">menu15</a></li>
-->
</ul>
</body>
</html>