Dobra teraz mały tutrial jak zrobić bardzo proste menu rozwijane .
Oczywiście ten skrypt pisałem z nudów więc nie chciało mi się pisać rozbudowanego skryptu … dlatego też napisałem bardzo okrojony …
Potrzebne nam będą komponenty graficzne żeby jako tako to wyglądało
czyli te obrazki:
obrazek o nazwie 1.jpg :
obrazek o nazwie 2.png:
obrazek o nazwie 3.gif:
obrazek o nazwie navigation-arrow.gif
i obrazek o nazwie separator.gif:
dobra lecimy dalej...
Jako że to dział html i css pisałem właśnie w tych plikach a nie w .js ..Pierwszy skrypt zapisujemy do pliku .css nadajemy mu nazwę „menu.css” postaram się teraz dokładnie opisać każdą linijkę w komentarzach dla tego pliku .css komentarze tak wyglądają /* */ ...
Ok to teraz przepisz coś takiego do pliku menu.css:
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 */
Dobra ale sam plik .css nam wiele nie da to teraz tworzymy plik np. menu.html
zawartość menu.html:
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>
I teraz już masz gotowy plik z menu rozwijanym
wiem, wiem ... jakość wykonania może jest nie najlepsza ale mi chodziło tylko o pokazanie jak to mniej więcej się tworzy ...Jeżeli admin nie będzie miał nic przeciwko to niebawem pokaże jak zmodyfikować ten skrypt abyś miał menu pionowe rozwijane lub aby zamiast w duł rozwijało się w górę... i to koniec tutrialu mam nadzieje że komuś się przyda ...
Ps... Nie powinno być błędów chyba w tych skryptach ... a zresztą nie wiem bo nie testowałem za bardzo jak to działa ...