Jednym z najważniejszych aspektów tworzenia stron internetowych i oprogramowania jest tworzenie menu. Piękne wysuwane menu pozostaje punktem odniesienia dla wielu właścicieli witryn i programistów. Można to zrobić za pomocą narzędzi CSS i Expression Web.
Instrukcje
Krok 1
Otwórz Expression Web i przejdź do Zarządzaj stylem, aby rozpocząć tworzenie przesuwanego menu i naciśnij klawisz New Style. Nazwij nowy styl Selektora ul li. Upewnij się, że wygenerowany plik ma rozszerzenie dropdown.css. Aby utworzyć menu przesuwne, określ odpowiednią pozycję na ekranie. Określ szerokość każdej pozycji menu i usuń niepotrzebne kropki, które mogą znajdować się przed nimi.
Krok 2
Uruchom opcję Układ i ustaw atrybut Wyświetl. Nadaj mu odpowiednią wartość Inline, aby wyrównać ją na ekranie. Ustaw atrybut Float na Left i naciśnij klawisz Apply. Ustaw wszystkie elementy listy w jednym wierszu. Aby utrzymać je w porządku i nie nakładać się, ustaw atrybut Szerokość na Pozycja w postaci 150 px. Upewnij się, że wszystkie pozycje na liście mają ten sam rozmiar. Usuń kropki przed każdym elementem, przechodząc do atrybutu List i ustawiając Typ listy na Brak. Kliknij „OK”, aby zaakceptować zmiany i zacząć obowiązywać.
Krok 3
Dostosuj styl i rozmiar czcionki ul li. Przejdź do Zarządzaj stylami i kliknij prawym przyciskiem myszy ul li, wybierając opcję Modyfikuj styl. Zobaczysz już znajome menu dialogowe. Przejdź do Font, wybierz Font-family i ustaw ten atrybut na Helvetica, Arial, Sans-serif. Dostosuj rozmiar czcionki i ustaw go na 0, 9. Ustaw atrybut Text-transform na Greatcase. W atrybucie Wysokość - Pozycja określ dokładną wysokość pozycji menu, ustawiając wartość na 30 px.
Krok 4
Zapisz plik jako menu.html po zakończeniu wszystkich działań naprawczych. Przetestuj właśnie utworzone menu w różnych aplikacjach i przeglądarkach, aby sprawdzić, czy działa. Jak widać, stworzenie takiego menu nie jest trudne.
