Tvorba ponúk je pravdepodobne jedným z hlavných bodov vývoja webových stránok a programov. Dobré vypracovanie a logický dizajn takéhoto menu je navyše tvárou stránky alebo iného programu. Vezmime si napríklad Microsoft a operačný systém Windows 7. Po vydaní systému Windows 7 si spoločnosť Microsoft vypočula množstvo kritiky, ktorá pre seba nebola lichotivá. Kritikov bolo veľa, ale najčastejšie nevhodne umiestnených položiek ponuky. Pozorne si prečítajte tento návod, ako vytvoriť vodorovnú rozbaľovaciu ponuku pomocou CSS a Expression Web. Štýl značiek sa zmení, aby sa vytvorila ponuka
Inštrukcie
Krok 1
Prejdite na Spravovať štýly a potom kliknite na tlačidlo Nový štýl. Priraďte názov Selector ul li novému štýlu, ktorý ste práve vytvorili. Nezabudnite tiež, aby ste sa uistili, že nový štýl musí byť definovaný v súbore drop-down.css.
Krok 2
Ak chcete roztiahnuť vodorovnú ponuku, musíte položkám ponuky povedať, že bude vodorovná. Ďalej musíte určiť šírku každej položky ponuky a odstrániť všetky nepotrebné bodky pred všetkými položkami zoznamu.
Krok 3
Pre vodorovné vyrovnanie choďte na Layout a nastavte atribút displeja na inline. Atribút float nastavte doľava. Kliknite na tlačidlo Použiť. Všetky položky zoznamu musia byť nastavené v jednom riadku. Aby sa navzájom neprekrývali, musíte urobiť nasledovné: nastavte hodnotu Pozícia atribútu width na 150px. Teraz to skontrolujte. Všetky prvky zoznamu by mali mať rovnakú veľkosť.
Krok 4
Teraz sa musíme pokúsiť odstrániť bodky pred položkami zoznamu. Ak to chcete urobiť, choďte do Zoznamu a nastavte atribút štýl zoznamu –typ na žiadny.
Krok 5
Kliknutím na tlačidlo OK prijmete všetky zmeny.
Krok 6
Ak chcete upraviť veľkosť písma pre štýl ul li, musíte urobiť nasledovné. V časti Správa štýlov kliknite pravým tlačidlom myši na štýl ul li, ktorý chcete zvoliť Upraviť štýl. Otvorí sa známe dialógové okno na pridanie alebo zmenu atribútov. Prejdite do kategórie Písmo a nastavte atribút font-family na Arial, Helvetica, sans-serif. Ďalej prejdite na atribút veľkosť písma a nastavte ho na 0,9em. Potom nastavte atribút transformácie textu a nastavte jeho hodnotu na veľké písmená.
Krok 7
Výšku položiek vo vytvorenom menu je možné upraviť v kategórii Pozícia. Nastavte atribút výšky na 30 pixelov.
Krok 8
Ďalej musíte uložiť súbor menu.html. Za týmto účelom Expression Web otvorí požadované okno Uložiť vložené súbory na uloženie súboru. Uložiť do súboru drop-down.css. Kliknutím na tlačidlo OK uložte.
Krok 9
Teraz skontrolujte svoj výsledok. Kvôli spoľahlivosti je lepšie ho otestovať v rôznych prehľadávačoch. Ak chcete skontrolovať výsledok získaný v predvolenom prehliadači, musíte stlačiť kláves F12 na klávesnici.
