Tworzenie menu jest prawdopodobnie jednym z głównych punktów rozwoju witryn i programów. Ponadto dobre opracowanie i logiczny projekt takiego menu jest twarzą witryny lub dowolnego programu. Weźmy na przykład Microsoft i system operacyjny Windows 7. Po wydaniu Windows 7 Microsoft usłyszał wiele krytyki, która nie była dla niego pochlebna. Było wiele krytyki, ale najczęściej niewygodnie rozmieszczone elementy menu. Uważnie przeczytaj ten samouczek na temat tworzenia poziomego menu rozwijanego za pomocą CSS i Expression Web. Style tagów zmienią się, aby utworzyć menu
Instrukcje
Krok 1
Przejdź do Zarządzaj stylami, a następnie kliknij przycisk Nowy styl. Nadaj nazwę Selector ul li nowo utworzonemu stylowi. Pamiętaj również, aby upewnić się, że nowy styl musi być zdefiniowany w pliku dropdown.css.
Krok 2
Aby rozciągnąć menu poziome, musisz powiedzieć elementom menu, że będzie ono poziome. Następnie musisz określić szerokość każdego elementu menu i usunąć wszystkie niepotrzebne kropki przed wszystkimi elementami listy.
Krok 3
Aby uzyskać wyrównanie w poziomie, przejdź do Układu i ustaw atrybut wyświetlania na wbudowany. Ustaw atrybut zmiennoprzecinkowy na lewo. Kliknij przycisk Zastosuj. Wszystkie pozycje listy muszą być ustawione w jednym wierszu. Aby nie nakładały się na siebie, należy wykonać następujące czynności: ustawić wartość Position atrybutu szerokości na 150px. Teraz sprawdź to. Wszystkie elementy listy powinny mieć ten sam rozmiar.
Krok 4
Teraz musimy spróbować usunąć kropki przed pozycjami listy. Aby to zrobić, przejdź do listy i ustaw atrybut list-style –type na none.
Krok 5
Kliknij OK, aby zaakceptować wszystkie zmiany.
Krok 6
Aby dostosować rozmiar czcionki dla stylu ul li, musisz wykonać następujące czynności. W Zarządzaj stylami kliknij prawym przyciskiem myszy styl ul li, aby wybrać opcję Modyfikuj styl. Otworzy się znajome okno dialogowe dodawania lub zmiany atrybutów. Przejdź do kategorii Czcionka i ustaw atrybut rodziny czcionek na Arial, Helvetica, bezszeryfowy. Następnie przejdź do atrybutu rozmiaru czcionki i ustaw go na 0.9em. Następnie skonfiguruj atrybut text-transform, ustaw jego wartość na wielkie litery.
Krok 7
Wysokość elementów w utworzonym menu można dostosować w kategorii Pozycja. Ustaw atrybut wysokości na 30px.
Krok 8
Następnie musisz zapisać plik menu.html. W tym celu Expression Web otworzy wymagane okno Zapisz osadzone pliki, aby zapisać plik. Zapisz w pliku dropdown.css. Kliknij OK, aby zapisać.
Krok 9
Teraz sprawdź swój wynik. Aby uzyskać niezawodność, lepiej przetestować go w różnych przeglądarkach. Aby sprawdzić wynik uzyskany w domyślnej przeglądarce, musisz nacisnąć klawisz F12 na klawiaturze.
