Yksi tärkeimmistä verkkosivustojen ja ohjelmistokehityksen näkökohdista on valikkojen luominen. Kaunis liukuva valikko on edelleen vertailukohtana monille verkkosivustojen omistajille ja ohjelmoijille. Tämä voidaan tehdä CSS- ja Expression Web -työkaluilla.
Ohjeet
Vaihe 1
Avaa Expression Web ja siirry kohtaan Hallitse tyyliä aloittaaksesi liukuvalikon luomisen ja paina Uusi tyyli -näppäintä. Nimeä uusi tyyli Selector ul li. Varmista, että luotulla tiedostolla on pudotusvalikko.css. Luo liukuva valikko määrittämällä sopiva sijainti näytöllä. Määritä kunkin valikkokohteen leveys ja poista tarpeettomat pisteet, jotka saattavat olla niiden edessä.
Vaihe 2
Suorita Asettelu-vaihtoehto ja aseta Näyttö-määrite. Anna sille sopiva Inline-arvo kohdistettavaksi näytölle. Aseta Float-määritteeksi Left ja paina Apply-näppäintä. Aseta kaikki luettelon elementit yhdelle riville. Jos haluat pitää ne siistissä järjestyksessä ja olla päällekkäisiä, aseta Leveys-määritteeksi Asento 150 pikselin muodossa. Varmista, että kaikki luettelon kohteet ovat samankokoisia. Poista pisteet kunkin elementin edestä siirtymällä List-määritteeseen ja asettamalla List Style-type -asetukseksi None. Napsauta "OK" hyväksyäksesi muutokset ja voidaksesi tulla voimaan.
Vaihe 3
Säädä ul li-tyylin tyyli ja kirjasinkoko. Siirry kohtaan Tyylien hallinta ja napsauta hiiren kakkospainikkeella Ul liä, valitsemalla Muokkaa tyyli. Näet jo tutun valintaikkunan. Siirry kohtaan Fontti, valitse Font-family ja määritä tämän määritteen arvoksi Helvetica, Arial, Sans-serif. Säädä kirjasinkoko ja aseta se arvoksi 0, 9. Määritä Tekstimuunnos-määritteeksi isot kirjaimet. Määritä Height - Position-määritteessä valikkokohtien tarkka korkeus asettamalla arvoksi 30 px.
Vaihe 4
Tallenna tiedosto menu.html-tiedostona, kun kaikki korjaavat toimet on suoritettu. Testaa juuri luomasi valikko eri sovelluksissa ja selaimissa nähdäksesi, toimiiko se. Kuten näette, tällaisen valikon luominen ei ole vaikeaa.
