Zawartość

• Kroki
• Rada
• Ostrzeżenie

To wikiHow uczy, jak tworzyć rozwijane menu w witrynie za pomocą kodu HTML i CSS. Rozwijane menu pojawi się, gdy użytkownik zatrzyma wskaźnik myszy nad określonym przyciskiem; Następnie mogą kliknąć jeden z elementów, aby przejść do witryny internetowej tej opcji.

Kroki

1. 

   Otwórz edytor tekstu HTML. Możesz użyć prostego edytora tekstu (Notepad, TextEdit) lub bardziej zaawansowanego (Notepad ++).
   • Jeśli zdecydujesz się przejść do Notepad ++, musisz wybrać HTML z części „H” menu Język (Język) u góry okna przed kontynuowaniem.

2. 

   
   
   Wprowadź tytuł dokumentu. Oto kod, który określa typ kodu, który ma być użyty w pozostałej części dokumentu:

3. 

   Utwórz menu rozwijane. Wprowadź poniższy kod, aby określić rozmiar i kolor menu rozwijanego, pamiętaj o zastąpieniu znaku „#” parametrem, którego chcesz użyć (im większa liczba, tym większe będzie menu rozwijane). Możemy również zamienić kolor tła „background-color” i „color” na dowolny kolor (lub kod koloru HTML):

4. 

   
   
   Określ, że chcesz zamienić łącza w menu rozwijanym. Ponieważ dodasz wtedy linki do menu, możesz je zastąpić w rozwijanym menu, wprowadzając następujący kod:

5. 

   Tworzy wygląd menu rozwijanego. Poniższy kod określa rozmiar i kolor menu rozwijanego, w tym pozycję w połączeniu z innymi elementami na stronie internetowej. Nie zapomnij zamienić „#” w sekcji „min-width” na żądaną liczbę (np. 250) i zmienić nagłówek „background-color” (kolor tła) na określony kolor lub kod HTML:

6. 

   
   
   Dodaj szczegóły do ​​zawartości menu rozwijanego. Poniższy kod określi kolor tekstu w środku i rozmiar przycisku menu rozwijanego. Nie zapomnij zastąpić znaku „#” liczbą pikseli, która definiuje rozmiar przycisku menu:

7. 

   Edytuje sposób zmiany wskaźnika myszy po najechaniu kursorem w menu rozwijanym. Po najechaniu kursorem myszy na przycisk menu niektóre kolory wymagają zmiany. Linia „background-color” będzie odzwierciedlać kolor zmieniony po wybraniu czegoś z rozwijanego menu, podczas gdy drugi „background-color” to kolor, na który zmieni się przycisk menu. W idealnym przypadku oba te kolory powinny być jaśniejsze niż wtedy, gdy nie były zaznaczone:

8. 

   Zamknij sekcję CSS. Wprowadź następujący kod, aby określić, że skończyłeś z częścią CSS dokumentu:

9. 

   Utwórz nazwę dla przycisku menu. Wpisz poniższy kod, ale pamiętaj, aby zastąpić „Nazwa” nazwą przycisku menu rozwijanego (na przykład: Menu):

10. 

    Dodaj linki do menu. Każda pozycja w rozwijanym menu będzie prowadzić do czegoś, czy to do strony w bieżącej witrynie, czy do zewnętrznej witryny internetowej. Dodaj swój wybór do rozwijanego menu, wpisując następujący kod, który musisz zastąpić https://www.website.com adresem linku (zachowaj nawiasy) i zastąp „Imię” nazwą linku.

11. 

    Zamknij dokument. Wprowadź następujące znaczniki, aby zamknąć dokument i określić koniec kodu menu rozwijanego:

12. 

    Kod recenzji określa menu rozwijane. Fragment będzie wyglądał mniej więcej tak: Reklamy

Rada

• Zawsze przejrzyj kod przed opublikowaniem go na stronie internetowej.
• Powyższe instrukcje dotyczą menu rozwijanych, które będą działać po najechaniu kursorem myszy na przycisk menu. Jeśli chcesz utworzyć menu rozwijane, które zostanie kliknięte, musisz użyć JavaScript.

Ostrzeżenie

• Kolorowanie HTML jest dość ograniczone, gdy używamy tagów takich jak „czarny” lub „zielony”. Możesz sprawdzić generator kodu kolorów HTML, który pozwala użytkownikom tworzyć i używać niestandardowych kolorów tutaj.