Odpowiedz 
 
Ocena wątku:
  • 0 Głosów - 0 Średnio
  • 1
  • 2
  • 3
  • 4
  • 5
Menu rozwijane poziome;)
07-03-2012, 08:54 PM
Post: #1
Menu rozwijane poziome;)
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 Uśmiech czyli te obrazki:
obrazek o nazwie 1.jpg :[Obrazek: 1.jpg]

obrazek o nazwie 2.png: [Obrazek: 2.png]

obrazek o nazwie 3.gif: [Obrazek: 3.gif]

obrazek o nazwie navigation-arrow.gif [Obrazek: navigation-arrow.gif]

i obrazek o nazwie separator.gif: [Obrazek: 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 Anioł 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 ...
Znajdź wszystkie posty użytkownika
Odpowiedz cytując ten post
Odpowiedz 


Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości