Najważniejszą częścią naszych zmian jest przedefiniowanie elementów wbudowanych na elementy blokowe. Teraz nasze linki zajmują całą dostępną przestrzeń elementów listy, co oznacza, że ​​nie musimy już najeżdżać kursorem na dokładny tekst, aby podążać za linkiem.

#navbar a ( kolor tła: #949494; kolor: #fff; dopełnienie: 5px; dekoracja tekstu: brak; grubość czcionki: pogrubienie; obramowanie po lewej: 5px solid #33ADFF; wyświetlacz: blok; ) #navbar li ( border-left: 10px solid #666; border-bottom: 1px solid #666; )

Połączyliśmy cały powyższy kod w jeden przykład, teraz klikając przycisk try, możesz przejść do strony przykładowej i zobaczyć wynik:

• Dom
• Aktualności
• Łączność
• O nas

Gdy przesuniesz kursor myszy nad element menu, jego wygląd może się zmienić, przyciągając na siebie uwagę użytkownika. Taki efekt można stworzyć za pomocą pseudoklasy :hover.

Wróćmy do naszego wcześniejszego przykładu menu pionowego i dodaj następującą regułę do arkusza stylów:

#navbar a:hover ( background-color: #666; border-left: 5px solid #3333FF; ) Wypróbuj »

Menu poziome

W poprzednim przykładzie przyjrzeliśmy się pionowemu paskowi nawigacyjnemu, który najczęściej znajduje się na stronach internetowych po lewej lub prawej stronie głównego obszaru treści. Jednak menu z łączami nawigacyjnymi często znajdują się również poziomo u góry strony internetowej.

Menu poziome można utworzyć, stylizując zwykłą listę. Wyświetl właściwość elementów

Aby ułożyć pozycje menu poziomo, najpierw utwórz listę punktowaną z łączami:

• Dom
• Aktualności
• Łączność
• O nas

Napiszmy kilka reguł dla naszej listy, które domyślnie zresetują styl używany dla list i przedefiniują elementy listy z bloku na małe litery:

#navbar ( margin: 0; padding: 0; list-style-type: none; ) #navbar li ( display: inline; ) Spróbuj »

Teraz wystarczy zdefiniować stylizację naszego menu poziomego:

#navbar ( margin: 0; padding: 0; list-style-type: brak; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; ) #navbar a ( kolor: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; ) #navbar a:hover ( border-radius: 20px 5px ; kolor tła: #0066FF; ) Wypróbuj »

Rozwijane menu

Menu, które utworzymy, będzie zawierało główne łącza nawigacyjne znajdujące się na poziomym pasku nawigacji i podelementy, które będą wyświetlane tylko wtedy, gdy kursor myszy zostanie najechany na element menu, do którego należą te podelementy.

Najpierw musimy stworzyć strukturę HTML naszego menu. Główne linki nawigacyjne umieścimy na liście punktowanej:

• Dom
• Aktualności
• Łączność
• O nas

Umieścimy podelementy na osobnej liście, zagnieżdżając je w elemencie

• Dom
• Aktualności
• Łączność
  • Adres
  • Telefon
  • E-mail
• O nas

Teraz zacznijmy pisać kod CSS. Pierwszym krokiem jest ukrycie listy z podpunktami z wyświetlaniem: brak, deklaracja, aby nie pojawiały się one cały czas na stronie. Aby wyświetlić elementy podrzędne, potrzebujemy tego po najechaniu kursorem na element

#navbar ul (wyświetlanie: brak; ) #navbar li:hover ul (wyświetlanie: blok; )

Z obu list usuwamy domyślne wcięcia i znaczniki. Tworzymy elementy listy z linkami nawigacyjnymi pływającymi, tworzącymi poziome menu, ale dla elementów listy zawierających podelementy ustawiamy float: none; tak, aby pojawiły się pod sobą.

#navbar, #navbar ul ( margin: 0; padding: 0; list-style-type: none; ) #navbar li ( float: left; ) #navbar ul li ( float: none; )

Następnie musimy się upewnić, że nasze menu rozwijane nie przesuwa zawartości poniżej paska nawigacyjnego w dół. W tym celu ustawimy pozycje listy na position: relative; , ale lista zawierająca pozycje podpunktów: bezwzględna; i dodaj górną właściwość o wartości 100%, aby podmenu pozycjonowane bezwzględnie pojawiło się dokładnie pod linkiem.

#navbar ul ( wyświetlacz: brak; pozycja: bezwzględna; góra: 100%; ) #navbar li ( float: lewo; pozycja: względna; ) #navbar ( wysokość: 30px; ) Spróbuj »

Wysokość listy nadrzędnej została dodana celowo, ponieważ przeglądarki nie traktują zawartości pływającej jako zawartości elementu, bez dodania wysokości nasza lista zostanie zignorowana przez przeglądarkę, a zawartość następująca po liście będzie zawijać się wokół naszego menu.

Teraz wystarczy tylko nadać styl obu naszym listom, a nasze rozwijane menu będzie gotowe:

#navbar ul ( wyświetlanie: brak; kolor tła: #f90; pozycja: bezwzględna; góra: 100%; ) #navbar li:hover ul ( wyświetlanie: blok; ) #navbar, #navbar ul ( margines: 0; dopełnienie: 0; list-style-type: none; ) #navbar (wysokość: 30px; kolor tła: #666; padding-left: 25px; min-width: 470px; ) #navbar li ( float: left; position: relative; wysokość: 100%; ) #navbar li a ( display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center; ) #navbar ul li ( float: brak; ) #navbar li:hover ( kolor tła: #f90; ) #navbar ul li:hover ( kolor tła: #666; )

Ogólnie rzecz biorąc, zadanie tworzenia menu obejmuje:

• dobór elementów HTML do budowania menu;
• tworzenie szablonu menu (tworzenie szablonu komponentu Menu);
• włączenie funkcji wyświetlania menu (wywołanie komponentu) Menu) we wspólnym wzorze („prolog” i „epilog”);
• wypełnienie menu zgodnie ze strukturą serwisu.

Struktura menu

Każde menu na stronie zbudowane jest na podstawie dwóch elementów:

• tablica danych $aMenuLinks, która definiuje kompozycję menu, ustawia nazwy i linki dla wszystkich pozycji menu. Tablica danych jest zarządzana przez interfejs administracyjny;
• szablon prezentacji zewnętrznej menu. Szablon menu to kod PHP, który definiuje wygląd menu (szablon komponentu Menu). Szablon menu przetwarza tablicę danych, tworząc kod HTML jako wyjście.

Tablica danych menu

Dane dla każdego typu menu są przechowywane w osobnym pliku, którego nazwa ma następujący format: .<тип меню>.menu.php. Na przykład, aby przechowywać dane menu, takie jak lewy plik zostanie użyty .lewe.menu.php, oraz do przechowywania danych typu menu szczyt- plik .top.menu.php.

Menu jest dziedziczone hierarchicznie. Pliki menu znajdują się w folderach tych sekcji witryny, w których wymagane jest wyświetlanie odpowiednich typów menu. Jeśli odpowiedni plik menu nie został utworzony dla tej sekcji, system wyszuka plik w katalogu o jeden poziom wyżej.

Na przykład, ponieważ menu główne (w wersji demonstracyjnej produktu jest to menu takie jak szczyt) powinny być wyświetlane we wszystkich sekcjach, wówczas plik tego menu znajduje się tylko w katalogu głównym serwisu.

W związku z tym menu drugiego poziomu (w wersji demonstracyjnej produktu to menu) lewy) jest wyświetlany osobno dla każdej sekcji witryny. Dlatego w folderze każdej sekcji tworzony jest osobny plik dla tego typu menu.

Inny przykład: Odwiedzający znajduje się w sekcji /pl/firma/o/. Aby wyświetlić menu typu left, plik menu jest przeszukiwany przez system w następującej kolejności:

1. /pl/firma/o/.left.menu.php
2. /pl/firma/.lewe.menu.php
3. /pl/.lewe.menu.php
4. /.lewe.menu.php

Jeśli w jednym z katalogów zostanie znalezione menu, wyszukiwanie zostanie zatrzymane i nie będzie już przeszukiwane w kolejnych katalogach.

System Bitrix Framework pozwala również na tworzenie menu typu dynamicznego Aby to zrobić, w komponencie Menu włącz opcję Dołącz pliki o nazwach takich jak.menu_type.menu_ext.php("USE_EXT" => "Y"), który jest domyślnie wyłączony.. Tych. tablica danych takich menu jest generowana automatycznie na podstawie niektórych danych uzyskanych za pomocą kodu programu. Ten kod powinien być przechowywany w folderze odpowiedniej sekcji witryny w pliku o nazwie .<тип меню>.menu_ext.php.

Głównym zadaniem takich plików jest manipulowanie tablicą $aMenuLinks. Te pliki nie są edytowane wizualnie w module Zarządzanie strukturą, dzięki czemu nie można ich przypadkowo edytować podczas wizualnej edycji menu. Podczas tworzenia tego pliku użyj komponentu Elementy menu (bitrix:menu.sekcje).

Notatka: W powyższym akapicie mówimy tylko o uzupełnieniu stworzonego menu o nazwy sekcji infobloków. Na przykład ta opcja nie nadaje się do uzupełniania menu o nazwy forów.

Uwaga! Jeśli jako elementy menu używane są partycje katalogu innego niż NC, zmienne muszą być określone w zrozumiałych zmiennych zapytania.

Przykładem takiego menu jest lewe menu sekcji Katalog książek prezentowane w wersji demonstracyjnej produktu. Oto dwie pierwsze pozycje menu Autorzy oraz Opinie utworzone w zwykły sposób, a reszta ( literatura biznesowa, Literatura dziecięca itp.) są tworzone dynamicznie.

W tym przypadku nazwy grup katalogów są używane jako pozycje menu. Książki, tworzony na podstawie bloków informacyjnych. Kod programu, na podstawie którego generowane jest menu, jest przechowywany w pliku .left.menu_ext.php w katalogu /e-sklep/książki/.

W plikach .<тип меню>.menu.php można użyć następujących zmiennych standardowych:

• $sMenuTemplate - bezwzględna ścieżka do szablonu menu (ta zmienna jest rzadko używana);
• $aMenuLinks - tablica, której każdy element opisuje kolejną pozycję menu.

  Struktura tej tablicy:

  Tablica ( => pozycja menu 1 Tablica ( => tytuł pozycji menu => link do pozycji menu => tablica dodatkowych linków do podświetlenia pozycji menu: Tablica ( => link 1 => link 2 ...) => tablica dodatkowych zmiennych przekazanych do szablonu menu: Tablica ([nazwa zmiennej 1] => wartość zmiennej 1 [nazwa zmiennej 2] => wartość zmiennej 2 ...) => warunek, w którym pojawia się pozycja menu jest wyrażeniem PHP, które powinno zwrócić "true") => pozycja menu 2 => pozycja menu 3 ...)

Przykłady plików menu

IsAuthorized()"), Array("Książka szkoleniowa", "gradebook.php", Array(), Array(), "\$GLOBALS["USER"]->IsAuthorized()"), Array("Kwestionariusz specjalisty" , "profile.php", Array(), Array(), "\$GLOBALS["USER"]->IsAuthorized()")), ?>IncludeComponent("bitrix:menu.sections", "", Array("ID" => $_REQUEST["ELEMENT_ID"], "IBLOCK_TYPE" => "książki", "IBLOCK_ID" => "30", "SECTION_URL" = > "/e-sklep/books/index.php?SECTION_ID=#ID#", "CACHE_TIME" => "3600")); $aMenuLinks = array_merge($aMenuLinks, $aMenuLinksExt); ?>

Organizacja wyświetlania menu

Wyświetlanie menu na stronach witryny odbywa się za pomocą komponentu Menu (bitrix:menu). Na przykład wywołanie górnego menu w witrynie demonstracyjnej wygląda tak.

Jeśli interesuje Cię odpowiedź na pytanie, jak stworzyć menu serwisu, to trafiłeś we właściwe miejsce.

Przyjrzymy się tworzeniu dynamicznego menu w php, napisanego specjalnie dla manekinów w programowaniu, a także dla tych, którzy wciąż są w zbiorniku.

Lekcja 3

Stwórzmy przyszły układ naszej strony. Aby to zrobić, narysuj super piękną witrynę w Photoshopie i pokrój ją na kawałki. Wyobraźmy sobie, że nagłówek, logo, menu i stopka nie są napisane słowami, jak w tym przykładzie, ale są to pięknie i kolorowo zaprojektowane elementy strony.

Na przykład utwórzmy trzy strony i nazwijmy je Sekcja 1, Sekcja 2, Sekcja 3

Ten tekst będzie inny dla różnych stron, ale nie będziemy się nim zawracać i zostawimy go tak, jak jest na wszystkich stronach.

Zacznijmy tworzyć stronę internetową w php.

1. Rozdziel bloki nagłówka, logo, menu, stopki na osobne pliki z rozszerzeniem php lub html

header.html

logo.html

menu.html

footer.html

Dodajmy plik z tym tekstem, aby zobaczyć go na wszystkich stronach. Nazwijmy to tekst.html

Notatka. Od teraz dalsze zapisy będę prowadził bezpośrednio w teczce tekst.html

2. Stwórzmy szablon dla naszej strony w php.

Aby to zrobić, zróbmy to po prostu - zapisz prawdziwy plik, ale z rozszerzeniem php i usuń całą zawartość tekstową. Niech to nie będzie profesjonalne, ale to zrozumiałe, a wszystko później skomplikujemy. Teraz najważniejsze jest zrozumienie zasady układu.

3. Teraz nie potrzebujemy pliku template.html.

Dzięki niemu mamy wyobrażenie, jak będzie wyglądać nasza strona.

4. Naszym szablonem jest plik template.php

Teraz wstawimy do niego wszystkie elementy witryny za pomocą polecenia include.

5. Stwórzmy trzy strony, jak pierwotnie zamierzaliśmy.

Sekcja 1, zadzwońmy 1.php

Sekcja 2, zadzwońmy 2.php

Sekcja 3, zadzwońmy 3.php

Aby to zrobić, możesz użyć najprostszego polecenia Zapisz jako...

Dla najmniejszych wyjaśnię: otwórz plik szablon.php, następnie naciśnij Zapisz jako... i zapisz pod nazwą 1.php, powtórz procedurę i kolejno zapisuj strony serwisu 2.php, 3.php

Otrzymaliśmy 3 strony z tym samym projektem. Wystarczy wstawić zamiast pliku tekst.html innym, aby uzupełnić o różne zdjęcia lub dowolne kody html, skrypty i treść każdej strony będzie niepowtarzalna.

Uwaga!

Jeśli plik nie został utworzony index.php dla strony głównej, to w przeglądarce, wpisując adres witryny, nie zobaczymy samej witryny, a jedynie strukturę katalogów (listę folderów).

Możesz zajrzeć do Denver i zobaczyć na własne oczy. Naprawmy sytuację - utwórz plik index.php i dzwoń przez długi czas bez zbędnych ceregieli Dom. Stwórzmy plik tekst-dom.html i z poleceniem włączać Wklej na nowo utworzonej stronie głównej serwisu.

6. Jak wyświetlić stronę w php?

Co się stało - więc po prostu nie widać. To nie jest już szablon z rozszerzeniem html.

Ale też nie ma problemu. Potrzebujemy własnego, tj. lokalny serwer na komputerze. W tym celu zainstalujemy Denver i przyjrzymy się wynikowi naszej pracy w przeglądarce bez wchodzenia do Internetu.

Teraz oto kolejność. Wpisałem adres strony i zobaczyłem wszystko, co właśnie powstało, w normalnej formie z projektem.

Przejdźmy teraz do menu strony php.

1. Otwórz plik menu.html i zamień sekcje 1, 2 i 3 w linki do stron. Linki w php są tworzone na różne sposoby.

Naszym zadaniem jest nauczyć się czuć stronę stworzoną w php. Dlatego zrobimy linki, jak na zwykłej statycznej stronie Sekcja 1, itd.

Bardzo podoba mi się ta procedura tworzenia linków w Macromedia Dreamweaver. Mieć czas na zbieranie OK i pić kawę.

2. Jak sprawić, by link w menu był nieaktywny, jeśli odwiedzający jest na tej stronie.

Odwiedzającemu będzie wygodniej poruszać się po witrynie, wiedząc, na której stronie się znajduje.

Jeśli wykonałeś wszystkie kroki ściśle punkt po punkcie, możesz zobaczyć, że wszystkie linki w menu są u nas stale aktywne. Jak to naprawić?

Zacznijmy od definicji tego, co jest Instrukcje warunkowe

- to jest, gdy jakaś akcja jest wykonywana lub nie jest wykonywana w zależności od warunków.

Zróbmy co następuje:

• Będziemy potrzebować zmienne i jeden operator warunkowy: