Napravite CSS izbornik koji ispada iz glavnog izbornika
Većina ljudi koji imaju računala, uvijek se pokušavaju povezati s internetom. Nakon toga svatko može posjetiti različite web-lokacije kao korisnik. To može biti traženje informacija, zabava, trening, igre, razgovor na forumima i još mnogo toga.
Pristupom stranici web-lokacije korisnik vidi njegov sadržaj. To je kao sadržaj knjige koju ćete pročitati. Sadržaj se sastoji od različitih skupova veza koje prenose korisnika na druge stranice resursa ili čak na druge web-lokacije. Takvi linkovi korisnicima pomažu pri navigaciji putem Interneta. Veze su grupirane u zasebne blokove koji predstavljaju izbornik stranice.
Funkcionalnost bilo kojeg resursa uvelike ovisi o tome koji se izbornik koristi na njemu. Izbornik web-mjesta može imati drugačiji dizajn, imati horizontalnu ili vertikalnu orijentaciju, smještenu na dnu, gore ili sa strane, biti skriven, otvoren, spušten, otkopčan.
Horizontalni CSS padajući izbornik
Horizontalni padajući izbornik koristi se za organiziranje navigacije. strukturu mjesta. Ne biste trebali zloupotrebljavati broj razina za ulaganje, ne bi trebalo biti više od dva. S više razina korisnika bit će mnogo teže pronaći potrebne informacije. Zatim ćemo detaljnije razmotriti način izrade izbornika.
Zamislite CSS izbornik koji ispada iz glavnog horizontalnog bloka. Zamijenimo zadatak i napravimo CSS padajući izbornik kada lebdimo. Mora postojati neka vrsta horizontalnog bloka s linkovima koji predstavljaju stavke izbornika. Nakon što mišem pređete preko tih točaka, trebale bi se otvoriti dodatne navigacijske točke.
Da biste stvorili CSS padajući izbornik, trebat će vam:
- HTML datoteka;
- CSS datoteka;
- slika za pozadinu.
Slika za pozadinu je pomoćni element za poboljšanje dizajna i izbornika.
Napravite html datoteku
Stranice bilo koje web lokacije mogu biti statične ili dinamične. Statična stranica web-mjesta prilikom pregledavanja u pregledniku prikazuje se u obliku u kojem je izvorno kreirana. Dinamična stranica se stvara kada se otvori u pregledniku s odvojenih stranica plug-ina i dodatnog izlaza informacija iz baze podataka. No, u svakom slučaju, ako otvorite stranicu s izvornim kodom putem preglednika, prikazat će se HTML stranica hipertekstualne oznake. Da biste stvorili izbornik, morate razviti HTML stranicu i spremiti je u HTML datoteku. Napravite c-izbornik koji ispada iz glavnog na ovaj način. HTML stranice mogu se stvoriti u bilo kojem uređivaču teksta, ali bolje je koristiti specijalizirane: Notepad ++ ili Adobe Dremweaver CSS. Otvorite praznu stranicu u uređivaču, unesite potrebnu šifru i spremite je pod imenom myindex.html. Komentari se mogu dodati izravno u kod, između posebnih oznaka. koji se u tu svrhu koriste u HTML-u.
Izgled stranice pri kreiranju padajućeg horizontalnog CSS izbornika razlikovat će se od uobičajenog standardnog izbornika, budući da su potrebne stavke popisa
- ili
- ,
HTML kôd
Treba napomenuti da se u HTML-u sve konstrukcije između zagrada <> nazivaju oznakama. Oznake mogu biti jednostruke i parne. Oznaka para mora sadržavati dva para zagrada <>, au drugom paru struktura počinje crtom /. U uparenoj oznaci prva oznaka je prva, a druga oznaka je završna.
Izradi kôd:
Tako možete stvoriti beskonačan broj stavki i podizbornika. Na samom kraju zatvorite sve uparene oznake.
Izrada CSS datoteke
Datoteka je povezana s HTML datotekom. styles style.css potrebno je ne samo za ispravno pozicioniranje izbornika na web stranici, već i za lijep izgled izbornika, kreiranje jedinstvenog dizajna web stranice. CSS datoteka se stvara u istom uređivaču kao i HTML datoteka, ali za razliku od HTML stranice, korisnik će vidjeti samo rezultat datoteke stila na stranici koja se pregledava. Osim toga, prilikom dodavanja komentara na CSS, koristi se / * Comment ... * / construct.
CSS kod
Izradi kôd:
/ * CSS padajući izbornik * /
tijelo {/ * Stil za tijelo stranice * /
pozadina: # 0814da; / * Boja pozadine * /
margina: 0; / * Vanjska obloga * /
padding: 0; / * Unutarnja obloga * /
obitelj fontova: "Trebuchet MS", Arial, Helvetica, sans-serif; / * Obitelj fontova * /
}
.prizor {/ * cijelog bloka izbornika * /
pozicija: relativna; / * Pozicioniranje u odnosu na podrijetlo * /
pozadina: # ebecf7 url (../ images / vanbackground.jpg); / * Pozadina sa slikom za cijeli izbornik * /
širina: 525px; / * Širina cijelog bloka izbornika * /
visina: 384px; / * Visina cijelog bloka izbornika * /
granica: 1px # 000 solid; / * Debljina i stil obruba cijelog bloka izbornika * /
margina: 21px auto;
padding: 16px;
}
/ * stilovi za izbornik * /
.navigator, .navigator ul {/ * Blokiraj stil s nenumeriranom listom * /
list-style: nema; / * Poništavanje oznaka za popis * /
margina: 0;
padding: 0;
}
.navigator {/ * Stil bloka za navigaciju * /
pozicija: relativna;
}
.navigator ul {/ * nenumerirani stil popisa * /
visina: 0; / * Visina * /
lijevo: 0; / * Lijevo * /
preljev: skriven; / * Dio bloka je skriven ako se ne uklapa u predviđeni prostor * /
položaj: apsolutni; / * Radimo apsolutno pozicioniranje * /
vrh: 47px; / * Iznad * /
}
.navigator li {/ * Stil unnumbered items * /
plutajući: lijevo; / * Omotavanje s lijeve strane * /
pozicija: relativna;
}
.navigator li a {/ * stil popisa stavki na popisu * /
boja pozadine: # 7c75b7; / * Boja pozadine * /
granica: 1px solid # 7c75b7;
boja: #fbfbff;
prikaz: blok; / * Prikaz po bloku. * /
veličina fonta: 15px; / * Postavite veličinu fonta * /
visina linije: 34px; / * Razmak između redaka * /
obloga: 6px 21px;
text-decoration: none; / * Tekst bez dizajna * /
prijelaz: 0,6s;
}
.navigator li: hover> a {/ * Stil stavki na nenumeriranom popisu kada lebdi * /
pozadina: # 8fcb38;
border-color: # 7c75b7;
boja: #fbfbff;
}
.navigator li: hover ul.vipadnoe {/ * Padajući izbornik u stilu Hover * /
visina: auto;
širina: 181px;
}
.navigator ul li {/ * Popis i stavke stila * /
-moz-tranzicija: 0,7s;
}
.navigator li ul li {/ * Stil-lista-stavka-stavke * /
-moz-prijelazna kašnjenja: 1s;
}
.navigator li: hover ul li {/ * Mouse hover style * /
}
.navigator ul li {/ * Popis stilova-stavka-veze * /
pozadina: # 7c75b7;
border-color: # 7c75b7;
boja: #fbfbff;
visina linije: 2px;
-moz-tranzicija: 1.7s;
-o-prijelaz: 1.7s;
-webkit-prijelaz: 1.7s;
prijelaz: 1.7s;
}
.navigator li: hover ul li a {/ * Stavka-lista-stavka-stavke lebdećeg stila * /
visina linije: 36px;
}
.navigator ul li a: hover {/ * Stavka popisa stilova plus veza lebdenja * /
pozadina: # 8fcb39;
pozadina-slika: rgba (41,137,216,0.5);}
Nakon stvaranja datoteka myindex.html i style.css potrebno ih je smjestiti u zasebnu mapu. Radi lakšeg rada, u mapi "Moji dokumenti" kreiramo zasebnu demo mapu, au njoj CSS mapu, gdje smjestimo style.css datoteku i mapu slika, gdje stavljamo pozadinsku sliku navedenu u datoteci stila. Za datoteku myindex.html ne stvaramo drugu zasebnu mapu i stavljamo je u izvorno kreiranu demo mapu. Sada, otvaranjem datoteke myindex.html u pregledniku, možete vidjeti vodoravni CSS izbornik koji se pojavljuje kada prelazite. To je sve.
Na isti način, na CSS-u se stvara vertikalni padajući izbornik, ali samo za njega trebat ćete razviti nešto drugačiju stilsku datoteku.