Jedným z najdôležitejších aspektov vývoja softvéru a webových stránok je tvorba menu. Ako ukážkový príklad by sa mal brať Microsoft a jeho najznámejší duchovný potomok, operačný systém Windows. Napriek skutočnosti, že tento produkt používa drvivá väčšina používateľov počítačov na svete, kritika nielenže neklesá, ale neustále rastie. V zásade ide o nepríjemnosti s umiestnením položiek ponuky. Nasleduje popis toho, ako vytvoriť ponuky v CSS a Expression Web.
Inštrukcie
Krok 1
Ak chcete začať vytvárať vodorovné menu, prejdite na Spravovať štýl a potom kliknite na tlačidlo Nový štýl. Pomenujte nový štýl Selector ul li. Dôležité! Skontrolujte, či má vygenerovaný súbor príponu drop-down.css. Ak chcete vytvoriť vodorovnú ponuku, označte vytvorený prvok, že bude presne vodorovný. Ďalej určite šírku každej položky ponuky a odstráňte všetky nepotrebné body umiestnené pred všetkými položkami v zozname.
Krok 2
Prejdite na možnosť Rozloženie, nastavte atribút Zobraziť na Inline, aby ste vykonali horizontálne zarovnanie. Ďalej nastavte hodnotu vľavo na atribút Float a kliknite na tlačidlo Použiť. Nastaviť všetky položky zoznamu na jeden riadok. Aby boli umiestnené prehľadne a neliezli po sebe, v atribúte Width nastavte hodnotu Position na 150 px. Skontrolujte, či sú všetky prvky zoznamu rovnako veľké. Ďalej odstráňte bodky pred všetkými prvkami - v tomto prípade prejdite na atribút Zoznam a v položke Typ štýlu zoznamu nastavte parameter Žiadne. Kliknutím na tlačidlo OK prijmete a použijete všetky zmeny.
Krok 3
Upravte veľkosť a štýl písma pre ul li. Ak to chcete urobiť, choďte na Spravovať štýly a kliknite pravým tlačidlom myši na ul li, potom vyberte Upraviť štýl. Zobrazí sa známe dialógové okno. Prejdite na Font, vyberte atribút Font-family a nastavte ho na Sans-serif, Arial, Helvetica. Ďalej upravte veľkosť písma nastavením na 0, 9. Potom nastavte atribút Text-transform na Veľké písmená. Upravte výšku položiek ponuky v atribúte Výška - Pozícia nastavením hodnoty na 30 px.
Krok 4
Po dokončení všetkých nápravných opatrení uložte súbor ako menu.html. Ďalej otestujte vytvorenú ponuku v rôznych prehliadačoch a uistite sa, že funguje správne. Ako vidíte, dizajn horizontálneho menu je dosť jednoduchý.
