Jednym z najważniejszych aspektów tworzenia oprogramowania i stron internetowych jest tworzenie menu. Microsoft i jego najsłynniejszy pomysł, system operacyjny Windows, należy traktować jako doskonały przykład. Pomimo tego, że z tego produktu korzysta zdecydowana większość użytkowników komputerów PC na świecie, krytyka nie tylko nie maleje, ale stale rośnie. Zasadniczo dotyczy to niedogodności lokalizacji pozycji menu. Poniżej znajduje się opis tworzenia menu w CSS i Expression Web.
Instrukcje
Krok 1
Aby rozpocząć tworzenie menu poziomego, przejdź do opcji Zarządzaj stylem, a następnie kliknij przycisk Nowy styl. Nazwij nowy styl Selector ul li. Ważny! Upewnij się, że wygenerowany plik ma rozszerzenie dropdown.css. Aby utworzyć menu poziome, wskaż tworzonemu elementowi, że będzie ono dokładnie poziome. Następnie określ szerokość każdej pozycji menu i usuń wszystkie niepotrzebne punkty umieszczone przed wszystkimi pozycjami na liście.
Krok 2
Przejdź do opcji Układ, ustaw atrybut Wyświetl na Wbudowany, aby wykonać wyrównanie w poziomie. Następnie ustaw wartość Left na atrybut Float i kliknij przycisk Zastosuj. Ustaw wszystkie elementy listy w jednym wierszu. Aby były ułożone ładnie i nie pełzały jeden na drugim, w atrybucie Width ustaw wartość Position na 150 px. Sprawdź, czy wszystkie elementy listy mają ten sam rozmiar. Następnie usuń kropki przed wszystkimi elementami - w tym celu przejdź do atrybutu List i ustaw parametr Brak w elemencie typu List Style. Kliknij OK, aby wszystkie zmiany zostały zaakceptowane i zastosowane.
Krok 3
Dostosuj rozmiar i styl czcionki ul li. Aby to zrobić, przejdź do Zarządzaj stylami i kliknij prawym przyciskiem myszy ul li, a następnie wybierz Modyfikuj styl. Pojawi się znajome okno dialogowe. Przejdź do Font, wybierz atrybut Font-family i ustaw go na Sans-serif, Arial, Helvetica. Następnie dostosuj rozmiar czcionki, ustawiając ją na 0, 9. Następnie ustaw atrybut Text-transform na Uppercase. Dostosuj wysokość pozycji menu w atrybucie Wysokość - Pozycja, ustawiając wartość na 30 px.
Krok 4
Po wykonaniu wszystkich działań naprawczych zapisz plik jako menu.html. Następnie przetestuj utworzone menu w różnych przeglądarkach, aby upewnić się, że działa poprawnie. Jak widać, projekt menu poziomego jest dość prosty.
