Vertikaalinen CSS valikko: tee se itse

Jotkut ylläpitäjät eivät halua viettää aikaa kehittää tyhjästä yksinkertaisista elementeistä, jotka ovat jo olemassa. He uskovat, että ei ole mitään järkeä tuhlaa aikaa jotain, joka on jo pitkään ollut olemassa. Itse asiassa, niille, jotka ovat juuri masterointi HTML ja CSS, on tärkeää tehdä itse paljon asioita on hyvä käsitys työnsä. Tämä koskee valikkoon. Luo pystysuuntainen CSS valikot. Se perustuu ainoastaan HTML ja CSS, ilman Javascript ja jQuery. Kussakin valikossa on luettelo linkkejä, jotka johtavat sivuston sivuilla.

perusvaihetta

Luodaan yksinkertainen vertikaalinen valikko CSS, tarvitaan seuraavat vaiheet:

1. Selvitä ensin, linkkilista (koodilla HTML), josta valikko näkyy. Anna heille nimi, esimerkiksi, ovat seuraavat:

1. Kotiin.
2. Historiamme.
3. Opas.
4. Palveluja.
5. Yhteystiedot.

2. Sitten Styling linkkejä kuin haluat avulla CSS.

Kirjoitamme HTML-koodia, pitää my_Vmenu.html tiedoston ja nähdä miltä se näyttää selaimessa:

Tämä on perusta (luuranko) meidän valikosta. # 1, # 2, jne. olisi korvattava viittauksella. Nähdä miltä se näyttää selaimessa. Kuva et pidä. Nyt meidän täytyy aloittaa kuvaamaan osa tyyliä, jotta täydellinen vertikaalinen CSS valikot.

Kuvaus tyylit

Luo tiedosto my_Vmenu.css, joka asettaa kaiken haluat parantaa ulkonäköä niin tärkeä osa sivuston. Tässä on koodi, käyttöönotto, joka elvyttää pystysuoran CSS valikot. Se ja kirjoittaa uuden tiedoston, ja sitten otamme lähemmin merkitys päälinjaa, jotka annetaan.

YKSITYISKOHTAINEN KUVAUS käytetään tyylitaulukon

Nyt harkita yksityiskohtia meidän CSS Vertical Menu:

list-style-type voit poistaa listan markkereita. Asettamalla "0" marginaaleja poista lisäpehmuste luettelossa. Kuten voidaan nähdä olevan HTML, meidän menu on lista, ja tyylit määritellään CSS.

ul # my_Vmenu - yleinen tyyli koko luettelon.

ul # my_Vmenu Li - tyyliin yhteyksiä tunnisteen li.

ul # my_Vmenu li a: hover - kuvaus tarkasteltavana olevan tyyppinen valikkokohteista aikana, jolloin yksi leijuu ihmistä.

ul # my_Vmenu li jänneväli - tekstin kuvaus (nimikevalikkoon).

Muista, että tiedostot my_Vmenu.css my_Vmenu.html ja on säilytettävä samassa hakemistossa. Kuitenkin ne voivat sijaita eri kansioihin, mutta se on tärkeää rekisteröityä my_Vmenu.html tiedostopolkua my_Vmenu.css. Ole varovainen, koska tulokkaita tähän ongelmaan usein.

Tyyli on kytkettävä välillä pää tunnisteet html-tiedosto. menu_1.png ja menu_2.png - tämä on kuva kuvan valikon normaalitilassa ja hääriä.

On parempi tallentaa kuvat omaan kansioon kuville, name it my_images, mutta sitten Säädä CSS. Kirjoita joissa nämä kuvat näkyvät, ne kuuluvat tähän hakemistoon: url (my_images / menu_1.png) ja url (my_images / menu_2.png).

Muualla kuvattuja ominaisuuksia CSS, ymmärtää helposti. Niissä määritellään ulkonäkö meidän valikosta. On helppo huomata, että leveys ja korkeus kohteita määritelty saman tuotteen normaalissa tilassa, ja kun hiiri viedään niihin. Fonttikoko 18px, pehmuste määrittää painuman eri puolilta paikannimiä. näyttö, voit asettaa näytön yksikkö asettaa leveyden ja täyte.

Toimialaosaamistamme valikko

Kuten näette, pystysuoran CSS valikot luoda helposti. Käytössä olevien tietojen perusteella tietämyksen voit tehdä kauniita ja houkuttelevia kävijöitä Web-sivuston! Käytä mielikuvitustasi ja sitten tyylikkään valikko täydentää sivustoon.