Valikkoa käytetään helpottamaan käyttäjien siirtymistä sivuston osioihin. Vierailijan huomion herättämiseksi valikon tulee olla toimiva, helppokäyttöinen ja samalla yhdistettävä koko resurssin suunnitteluun.
Ohjeet
Vaihe 1
Ennen kuin luot valikon, valitse sen tyyppi. Voit luoda avattavan vaaka- tai pystyruudun, joka näytetään käyttäjälle, kun käyttäjä vie hiiren osoittimen sen päälle. Kun valitset tietyn valikon, voit opastaa, kuinka kätevää kävijöillä on käyttää sitä ja miten se yhdistetään suunnitteluun.
Vaihe 2
Kun olet valinnut valikkotyypin, avaa sivutiedostosi millä tahansa tekstieditorilla, jota käytät HTML: n muokkaamiseen. Siirry haluamaasi koodiosaan, johon haluat liittää käyttöliittymäelementin.
Vaihe 3
Tämän jälkeen tee luettelo vaihtoehdoista luomalla lohko ja tekemällä numeroitu luettelo, jolle on annettu tunnus. Esimerkiksi:
- Linkki 1
- Linkki 2
- Linkki 3
Tässä esimerkissä loin luettelomerkitetyn luettelon kolmesta elementistä ja sijoitin sen div-kerrokseen, jossa on ID-paneelin tunnus.
Vaihe 4
Siirry sivusi lohkolohkoon ja luo sopiva CSS-tyylitaulukko-valikko. Jos haluat luoda vaakasuuntaisen valikon, voit sisällyttää sisäisen määritteen tuloksena olevaan luetteloon:
#panel ul li {display: inline; }
Vaihe 5
Voit luoda vaakasuoran viivan sivun koko pituudelle käyttämällä seuraavaa koodia:
#panel ul {marginaali vasemmalle: 0; pehmuste: 2px 0; }
Vaihe 6
Sitten voit tehdä visuaalisen jaon suorakulmioihin:
#panel ul li a {marginaali vasemmalle: 3px; reunus: 1px; täyte: 2px 3px; tausta: sininen; }
Tämä koodi asettaa tekstin sisennykset reunaelementeistä vasemman reunan ja täytemääritteiden kautta ja myös taustavärin kullekin luettelokohdalle. Tässä esimerkissä väri on sininen, mutta voit muuttaa sitä oman harkintasi mukaan.
Vaihe 7
Jos haluat osoittaa välilehdessä valitulle nykyisen sivun kohteelle, aseta sopivat parametrit avoimeen luokkaan:
#valikko ul li a # avoin {tausta: punainen; reunapohja: 1px; }
Paneelista valittu nykyinen sivu näkyy nyt punaisena.
Vaihe 8
Tallenna muutokset tiedostoon ja tarkista kirjoitetun koodin toimivuus avaamalla sivusi selaimen kautta. Voit asettaa lisää näyttövaihtoehtoja lisäämällä aina CSS: n tai HTML: n parantamaan objektin ulkonäköä.
