Vytváření nabídek je pravděpodobně jedním z hlavních bodů ve vývoji webů a programů. Dobré zpracování a logický design takové nabídky je navíc tváří webu nebo jakéhokoli programu. Vezměme si například Microsoft a operační systém Windows 7. Po vydání Windows 7 Microsoft slyšel spoustu kritiky, která pro sebe nebyla lichotivá. Existuje mnoho kritik, ale nejčastěji nevhodně umístěných položek nabídky. Pečlivě si přečtěte tento návod, jak vytvořit horizontální rozevírací nabídku pomocí CSS a Expression Web. Styly značek se změní, aby se vytvořila nabídka
Instrukce
Krok 1
Přejděte na Spravovat styly a poté klikněte na tlačítko Nový styl. Přiřaďte název Selector ul li novému stylu, který jste právě vytvořili. Nezapomeňte se také ujistit, že nový styl musí být definován v souboru drop-down.css.
Krok 2
Chcete-li natáhnout vodorovnou nabídku, musíte sdělit položkám nabídky, že bude vodorovná. Dále musíte určit šířku každé položky nabídky a odstranit všechny zbytečné tečky před všemi položkami seznamu.
Krok 3
Pro vodorovné zarovnání přejděte na Layout a nastavte atribut zobrazení na inline. Nastavte atribut float doleva. Klikněte na tlačítko Použít. Všechny položky seznamu musí být nastaveny na jednom řádku. Aby se navzájem nepřekrývaly, musíte provést následující: nastavit hodnotu pozice atributu šířka na 150 pixelů. Teď to zkontrolujte. Všechny prvky seznamu by měly mít stejnou velikost.
Krok 4
Nyní se musíme pokusit odstranit tečky před položkami seznamu. Chcete-li to provést, přejděte do seznamu a nastavte atribut list-style –type na none.
Krok 5
Kliknutím na OK přijmete všechny změny.
Krok 6
Chcete-li upravit velikost písma pro styl ul li, musíte provést následující. V Manage Styles, right click on the ul li style you need to select Modify Style. Otevře se známé dialogové okno pro přidání nebo změnu atributů. Přejděte do kategorie Písmo a nastavte atribut font-family na Arial, Helvetica, sans-serif. Dále přejděte na atribut velikosti písma a nastavte jej na 0,9em. Poté nastavte atribut transformace textu a nastavte jeho hodnotu na velká písmena.
Krok 7
Výšku položek ve vytvořené nabídce lze upravit v kategorii Poloha. Nastavte atribut výšky na 30 pixelů.
Krok 8
Dále musíte uložit soubor menu.html. Chcete-li to provést, Expression Web otevře požadované okno Uložit vložené soubory pro uložení souboru. Uložit do souboru drop-down.css. Uložte kliknutím na OK.
Krok 9
Nyní zkontrolujte svůj výsledek. Pro spolehlivost je lepší otestovat to v různých prohlížečích. Chcete-li zkontrolovat výsledek získaný ve výchozím prohlížeči, musíte stisknout klávesu F12 na klávesnici.
