Dobar dan, dragi čitatelji. Danas ćemo analizirati temu “ jak robiti horizontalni izbornik uvrnuti HTML i CSS". Izbornik se u pravilu nalazi u zaglavlju stranice, a također je postavljen na najvažnijoj strani, također se naziva glavni izbornik. S obzirom na snagu korištuvaca, oni će stalno gurati. Na to, kako se razvijate i kakav dizajn stavljate na jelovnik, utjecat će ponašanje konverzije, konverzije i njihov snažan utjecaj na vašu stranicu i, naravno, na .

HTML kod za horizontalni izbornik

Ako je jelovnik za stranicu dugo bio opljačkan na slikama, tablicama, flashu i možda na nekim drugim stvarima, ali u naše vrijeme to je najpopularnija, pa čak i ispravna metoda izrade jelovnika s vikorističkim oznakama "list".

Za izradu izbornika koristite oznake

,
• і .

Primjer korištenja html oznaka za stvaranje izbornika u kodu u nastavku:

• Golovna
• Usluge
• Cijene
• Kontakti

Standardni CSS stilovi za horizontalni izbornik

ul ( stil popisa: nema; /*ukloni oznake popisa*/ margina: 0; /*ukloni padding*/ padding-left: 0; /*ukloni padding*/ ) a (tekst-dekoracija: nema; /*ukloni padding Pošalji tekst */ ) li ( float:left; /*Rasporedi popis vodoravno za implementaciju izbornika*/ margin-right:5px; /*Dodaj pristup stavkama izbornika*/)

Moramo pripremiti glavni jelovnik u zaglavlju, bez posebnih stilova, da se na sva zvona može nazvati okvirom vašeg budućeg lijepog jelovnika. Ako kopirate i zalijepite u svoj html i css izgledat će ovako.

Kundak u okvir (predložak) vašeg budućeg jelovnika

Lako je sve završiti, vi, očito, želite ljepši brand meni, ali bez razumijevanja osnova jednostavno ne možete napraviti dobar jelovnik bez pardona u html-u i css-u.

Koristim samo nekoliko drugih CSS metoda koje se koriste za stvaranje izbornika s horizontalnim grimiznim float:left; na primjer, display:inline-block; ili display:flex; , ali preporuča se koristiti metodu vikorista, ima više opisa.

Prisjetimo se našeg predloška jelovnika s različitim stilovima i prilagođenim yogoom harnim.

Primijenite horizontalni izbornik bočne trake za web stranicu

Odjednom ću donijeti prskanje gotovih aplikacija iz dizajna horizontalnog menija.

Možete sami kreirati "lijepo" za svoju stranicu, a ne surfati internetom. Najjednostavnije je uzeti jednu od dolje navedenih aplikacija kao osnovu

Jednostavan izbornik plave boje s različitim stavkama

CSS stilovi za gornji izbornik

Donji prošiveni stilovi ovaj izbornik. HTML se prepisuje istom stvari kao i "wireframe" izbornik.

Ul ( stil liste: nema; /*ukloni oznake popisa*/ margina: 0; /*ukloni padding*/ padding-left: 0; /*ukloni padding*/ margin-top:25px; /*ukloni gornju marginu*/ ) a ( text-decoration: none; /*ukloni pozadinu u tekstu */ background:#30A8E6; /*dodaj pozadinu u stavku izbornika*/ color:#fff; /*ukloni boju boje*/ padding:10px; /*dodaj ulaz*/ font-family: arial;/*minimiziraj font*/ border-radius:4px;/*dodaj zaobljenost*/ glatki prijelaz*/ -o-prijelaz: sve 0,3s 0,01s lakoća; -webkit-prijelaz: sve 0,3s 0,01s jednostavnost; ) a:hover ( background:#1C85BB;/*Dodaj efekt lebdenja*/ ) li ( float:left; /*Rasporedi popis vodoravno za implementaciju izbornika*/ margin-right:5px; /*Dodaj pristup stavkama izbornika*/ )

Golovne meni, roztashovane na liniji boja s crvenim pepelom

Izbornik CSS stila na liniji boja

ul ( stil liste: nema; /*ukloni oznake popisa*/ margina: 0; /*ukloni padding*/ padding-left: 0; /*ukloni padding*/ margin-top:25px; /*ukloni gornju marginu*/ background:#FF4444;/*dodavanje pozadine u stavku izbornika (zamjenom ovog parametra, sjećate se boje cijelog izbornika)*/ visina: 50px; / background:#FF4444;/*dodavanje pozadine u stavku izbornika ( zamjenom ovog parametra, sjećate se boje cijelog izbornika) stavke izbornika)*/ color:#fff; font-family: arial;/*promijeni font*/ line-height:50px;/* vertikalno poravnanje izbornika*/ display: blok; : lakoća svih 0,3 s 0,01 s; /* glatki prijelaz koji se može raditi*/ -o-prijelaz: lakoća svih 0,3 s 0,01 s; *dodavanje efekta pri lebdenju*/ ) li ( float: lijevo; /* Popis mjesta vodoravno za stvarno prijelaz izbornika*/ )

Izbornik widgeta u HTML+CSS

Za provedbu dodatak izbornik koji se pojavljuje (otvara) na web-mjestu Za bilo koju stavku izbornika, moramo dodati dodatno preusmjeravanje HTML koda stavke kako bismo ga poslali iz horizontalnog izbornika i promijenili CSS stilove. U stilove ćemo dodati jednostavan trik - promjenu prikaza izbornika koji se otvara, za dodatne upute o stavci koja nam je potrebna u gornji izbornik. Na primjer, uzmimo stavku "sluge".

Primjer izrade jednostavnog izbornika koji možete vidjeti

HTML kod za padajući izbornik

• Golovna
• Usluge
  • Usluga 1
  • Dovga servis 2
  • Usluga 3
• Cijene
• Kontakti

CSS stil padajućeg izbornika

ul ( stil liste: nema; /*ukloni oznake popisa*/ margina: 0; /*ukloni padding*/ padding-left: 0; /*ukloni padding*/ margin-top:25px; /*ukloni gornju marginu*/ background:#819A32;/*dodavanje pozadine ovom izborniku*/ visina: 50px;/*postavljanje visine*/ ) a (tekst-dekoracija: nema; stavka izbornika*/ boja:#fff;/*minimiziranje postavke boje* / padding: 0px 15px;/*dodavanje obruba*/ font-family: arial; vertical*/ display: block; border-right: 1px solid #677B27;/*dodavanje desne granice*/ 0,01 s jednostavnost; -webkit- prijelaz: sve 0,3s 0,01s jednostavnost; / pozicija:relativna; /*Postavite položaj za pozicioniranje*/ ) /*Stilovi za usidreni izbornik* / li > ul (položaj:apsolutna; vrh:25px; zaslon: nijedan; ) /*Robijalno pričvršćen dio vidljivog* / li:hover > ul ( display:block; width:250px; /*Postavi širinu izbornika*/ ) li:hover > ul > li (float:none; /*Postavi horizontalni položaj * / )

A da biste razumjeli, ako ste sami krivi za sluge te kategorije, preporučujem vam da se upoznate s materijalom:.

Pokušao sam vam što kraće reći o tome kako napraviti potpuno novi horizontalni izbornik, kako napraviti mnoštvo predložaka, kako dodati nove jednostavne stilove i kako napraviti slatki jelovnik, kako napraviti izbornik za koji vidite svoju stranicu. Radi jasnoće, odabrao sam sve gore prikazane izbornike u jednoj html datoteci, koju možete odabrati u nastavku. Možete ga vidjeti na snimci zaslona:

Za poštovanje.

Uz ažuriranja, sve može biti prilagodljivo na stranici, ne uključujući horizontalni izbornik, koji također može biti prijateljski na svim ekranima. Očajnički pogledajte klasičnu navigaciju, vikonan na čistom stilu, bez nabijanja JS-a. U svom stilu, možete ići na mnogo stranica, jer je to učinjeno u jednostavnom, standardnom izgledu, ali uz prisutnost efekata. Također, ako pogledate mobitele, tada će se gumb automatski pojaviti desna strana, kada se pritisnu, gumbi fonta neće se pojaviti u punoj širini, ali sve je uredno, s iste strane, tipke fonta će se vizualno gledati.

Kao što vidite, tada su ovdje osvojeni najjednostavniji HTML popisi, a sve kako bi se prikazali svi popisi za koje se zna da su nužni za prijelaz tih chi ínshih kategorija. Koncept leži u činjenici da je lijepo rasporediti navigacijsku listu u vodoravnom prikazu, ali kada je mobilan, automatski će postati okomit, kao što je prikazano na slikama koje su pričvršćene uz materijal.

Čim se pričvrsti na kožu, sam trgovac može promijeniti tu temu, odnosno one figure koje su tematski prikladnije. Sam jelovnik kreiran je u tamnozelenoj shemi boja, samo odabirom svake, što je rijetko moguće. Ali možete radikalno promijeniti sve, ulaskom u CSS stil, i tamo možete staviti stil dizajna koji vam je potreban, a prije svega, otpisati ga kao osnovu internetskog resursa.

1 . Dakle, za zamovchuvannyam ići ili píd sat idem na portal.

2 . Već se čudimo mobilni uređaj, a ipak nisu kliknuli na izbornik.

3 . Ovdje su napravili klik, da su se pojavili svi upiti, da će se raspitati.

Idemo na instalaciju:

ZORNET.RU

css

odjeljak(
širina:100%;
max-width:1198px;
margin:0pxauto;
display:table;
položaj:relativan;
}

Zaglavlje(
širina:100%;
display:table;
boja pozadine: #175812;
margin-bottom:50px;
}

#kamtukagnpos(
plutati: lijevo;
veličina fonta: 25px;
transformacija teksta: velika slova;
boja: #ffab2;
težina fonta: 600
padding: 19,8px 0px;
}

#kamtukagnpos:lebdjeti (
sjena teksta: 0px 0px 6px rgba(255, 250, 250, 0,67);
}

Nav(
širina:auto;
float:desno;
}

pupak(
display:table;
float:desno;
}

Nav ul li(
float:lijevo;
}

Nav ul li:last-child(
padding-right:0px;
}

Nav ul li a (
boja: #e4f2ff;
veličina fonta: 19px;
padding: 24px 19px;
zaslon: inline-blok
sjena teksta: 0 1px 0 #2e2f2e;
}

Nav ul li a: lebdjeti (
boja pozadine: #143a06;
boja: #fff9c8;
prijelaz: sve 0,7s lakoća 0s;
sjena teksta: 0 1px 0 #282b28;
}

Nav ul li a: lebdjeti i (
boja: #fdf7c9;
prijelaz: sve 0,7s lakoća 0s;
sjena teksta: 0 1px 0 #1c1d1c;
}

Nav ul li a i (
padding-desno: 9px;
boja: #f4faff;
prijelaz: sve 0,7s lakoća 0s;
sjena teksta: 0 1px 0 #202120;
}

Navigation-menusaita ul(
display:table;
širina:24px;
}

Navigation-menusaita ul li(
širina:100%;
visina:3px;
boja pozadine: #e9f0f7;
margin-bottom:4px;
}

Navigation-menusaita ul li:last-child(
margin-bottom:0px;
}

Unos, oznaka(
prikaz: nema;
}

Zaslon samo @medija i (maks. širina: 1440px)(
odjeljak(
maks. širina: 95%;
}
}

Zaslon samo @medija i (maks. širina: 980px)(
Zaglavlje(
padding:20px 0px;
}

#kamtukagnpos(
padding:0px;
}

Ulazni(
pozicija: apsolutna;
vrh: -9999px;
lijevo: -9999px;
pozadina:nema;
}

Unos:fous(
pozadina:nema;
}

Označiti(
float:desno;
padding:8px 0px;
display:inline-block;
kursor:pokazivač;
}

Unos: označeno ~ nav(
zaslon: blok;
}

Nav(
prikaz: nema;
pozicija:apsolutna;
desno:0px;
vrh:53px;
boja pozadine: #174810;
padding:0px;
z-indeks:99;
}

pupak(
širina:auto;
}

Nav ul li(
float:nema;
padding:0px;
širina:100%;
display:table;
}

Nav ul li a (
boja:#f7f2f2;
veličina fonta:15px;
padding:10px 20px;
zaslon: blok;
obrub-dno: 1px čvrsta rgba (204, 197, 197, 0,1);
}

Nav ul li a i(
boja:#f9f5d5;
padding-right:13px;
}
}

Zaslon samo @medija i (maksimalna širina: 480px) (
odjeljak (maksimalna širina: 90%;)
}

Zaslon samo @medija i (maksimalna širina: 360px) (
label(padding:5px 0px;)
#kamtukagnpos(veličina fonta: 20px;)
nav(top:47px;)
}

Ispred njega, kako to reći, onda s poštovanjem pogledajte Demo stranu i stvarno procijenite kako sve funkcionira, ali zapravo nema ništa slično, čak i ako navedete resurs za davanje efekta, kada lebdite preko svih znakova idite do tunela koji je bogatiji i ljepši.

Dobra navigacija stranicama također je važna za blogere. Za í̈ pomoć vodvíduvach shvidko znati Trebat će mi strana blog. Cijenite inteligenciju web-mjesta i sustava pretraživanja. U ovom članku znate kako izraditi horizontalni izbornik za Blogger sa ikonama za spajanje.
Izbornik s spojenim gumbima-ikonama kreiranim na CSS-u. Za pregled izbornika kliknite na donji gumb:

Kako umetnuti horizontalni css izbornik s ikonama na Blogger

1. Idite na karticu "Predložak", stavite kursor na uređivač (bilo to mjesto),
2. Pritisnite Ctrl + F za traženje koda i pronalaženje traga za kodom ]]>
3. Umetnite sljedeći kod ispred cim koda:
   ..
   

   /* CSS kod za izbornik počinje ovdje bloggertrix.com */ #btrix-nav (margina: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;)
   #btrix-nav li (float: lijevo;)
   #btrix-nav li (zaslon: blok;boja: bijela; širina: 120px;visina: 61px;margin-top: 24px;text-decoration: nema;text-align: center;border-top: 1px solid #bbb; obrub -dolje: 1px solid #555;)
   #btrix-nav li a span.aname (font: bold 17px/61px "Arial";boja: #fff;transformacija teksta: velika slova;kursor: pokazivač;pozicija:relativna;vrh: 0;prijelaz: vrh .5s lakoća; sjena teksta: 1px 1px 1px rgba(0, 0, 0, 0.5);)
   #btrix-nav li a img (položaj: relativan; vrh: 0; prijelaz: vrh .5s lakoća;)
   #btrix-nav li a:hover (kursor: pokazivač;)
   #btrix-nav li:hover img (gore: -85px;)
   #btrix-nav li a:hover .aname (gore: 85px;)
   #btrix-nav li:nth-child(1) a (pozadina: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;)
   #btrix-nav li:nth-child(2) a (pozadina: #9bc704;)
   #btrix-nav li:nth-child(3) a (pozadina: #0dc3ff;)
   #btrix-nav li:nth-child(4) a (pozadina: #51a2ec;)
   #btrix-nav li:nth-child(5) a (pozadina: #6e3cab;border-radius: 0 5px 5px 0;border-desno: 1px solid #555;)

4. Sada idite na karticu "Dizajn",
5. Dodajte novi HTML / JavaScript element i dodajte kod:

   
   

   Golovna https://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" />

   
   

   iskoristiti https://2.bp.blogspot.com/-TcXder58ssQ/Ug5ASx8pT0I/AAAAAAAAAA0o/5UdA4_gLnV8/s1600/btrix-download.png" />

   
   

   mysql https://2.bp.blogspot.com/-umlQ7fKXobk/Ug5AT2bLnnI/AAAAAAAAAA08/yrQHl6qPMH8/s1600/btrix-mysql.png" />

   
   

   HTML https://2.bp.blogspot.com/-2-iy8RJ92V8/Ug5ASDCru-I/AAAAAAAA0c/GOBCPpZlA04/s1600/Btrix-html.png" />

   
   

   Kontakti https://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png" />

6. Unesite kod koji je dodan u HTML / JavaScript gadget, potrebne izmjene:

• Ikona # promijeni poruku na traženoj strani bloga (na primjer, bočna strana oznake, strana "kontakti", strana glave blog ta in)
• poslao na sliku, vidim je narančasto, zamijenite izravno slanjem ikone-slike za određenu stavku.
• Stavka, vizija plava, imenujući strane CSS izbornika.

Premjestiti HTML element? JavaScript je potreban u postu na blogu "Dizajn".

Za svoj izbornik možete okretati ikone, logotipe i druge slike u png pogledajmo kroz pozadinu. Da biste saznali potrebu za slikama, bolje je tražiti ikone. Na primjer, iconsearch.ru

Tse list posilan, scho dovesti do različite strane mjesto. Izgleda loše, ako je popis poslan za zamjenu jednostavnih markera, dopunjen ikonama i potrebno je promijeniti grafiku. Kako napraviti zahtjev pred bazom podataka?

HTML kod

Mízh oznake li propisano je a(# timchasova stub), u sredini se nalaze dva blok elementa raspona. Prvi raspon - oznaka i s klasom ikone, kodom koji je kopiran sa stranice Font Awesome. Drugom raspona- Imenujte poruku, a zatim tekst.

• 
  
  
  Bicikli
  
  


• 
  
  
  Motocikli
  
  


• 
  
  
  Autobusi
  
  


• 
  
  
  Automobili
  
  


• 
  
  
  Vertoglioti
  
  

Nakon povezivanja između oznaka glava font ikone Font Awesome- jelovnik može izgledati ovako.

CSS stilovi

Za klip na Google font odaberite prijateljski font za dodatnu ćirilicu, tako da će izbornik biti ruski okomito.

Kopirajte kod veze za odabrani font i zalijepite ga u css datoteka.

@import url("https://fonts.googleapis.com/css?family=Marck+Script");

Kod selektora tijelo Napišem naziv odabranog fonta i postavim ga na rozmír.

Tijelo(
margina: 0;
dopuna: 0;
obitelj fontova: "Marck Script", sans-serif;
veličina fonta: 20px;
}

Položaj našeg izbornika sličan je prozoru preglednika, 10% viši i 20% viši. Shvatio sam da su ove brojke preuzete iz "stela", imat ćete svoj smrad.

Ul (
pozicija: apsolutna;
vrh: 10%;
lijevo: 20%
}

Popravljamo širinu izbornika za 200 piksela.

Širina: 200px

Otišli smo na stavke izbornika na popisu. Uzimanje markera s točaka li.

Ul li (
stil liste: nema;
}

Označavamo okvir zvijeri i dno, koji stavke jelovnika čine jednom vrstom.

Bord-top: 1px solid #131313;
border-bottom: 1px solid #131313;
margina: -1px 0;

Nemojte objesiti okvire i distribucije između ikona i naziva poruka.

Mali desni okvir za oznaku a, koji je element reda, a pored elementa retka, okvir se ne može razbiti. Zato je oznaka prikazana a blok element.

Ul li a (
zaslon: blok;
}

Sada možete postaviti okvir, pospremiti dodatnu poruku i zapisati boju poruke.

Obrub desno: 1px čvrsta #131313;
tekst-dekoracija: nema;
boja: #131313;

Oženi lijevi okvir.

oznake raspona- blok elementi, u čijoj sredini će biti tekst, do raspona predstavljen elementom bloka reda.

Ul li a span (
položaj: relativan;
zaslon: inline-blok
}

Trebamo za prvo raspona, u čijoj sredini će se nalaziti ikona, postavite stilove koji će izgledati kao drugi raspona. Za koga prvi raspona smislena pseudo-klasa - span:nth-child(1) ta stilizuemo yogo okremo. Postavimo desni i lijevi okvir i širinu.

Ul li a span:nth-child(1) (
širina: 30px
obrub lijevo: 1px solid #131313;
border-right: 1px solid #131313;
}

Ikone postaju u sredini s poljima od 10 piksela sa svih strana.

poravnavanje teksta: središte;
padding: 10px

Ikone će biti tamne boje, veličine 20 piksela na crvenim lisnim ušima.

Boja: #131313;
veličina fonta: 20px;
pozadina: #f44336;

Druga pseudo-klasa zahtijeva samo navođenje polja.

Ul li a span:nth-child(2) (
padding: 10px
}

Sada vertikalni izbornik dobila svoj preostali izgled. Začudite se cijelom kodu i rezultatu.

Ísnuê masa gotovo rješenje za preklapanje takvih ploča pomoć jQuery, okremí dodaci i moduli za različite sustave keruvannya stranice.
Sve je bolje, ali moguće je, za implementaciju kliznih panela, sve je moguće CSS? Očito možete! S poštovanjem))) osvrćući se na one koje, međutim, nisu svi preglednici dobri u podržavanju trenutne snage CSS3.

Ne tako davno, rješenje "vidjeti planinu" i zadnjicu robota. Jedan od prvih komentara bio je sljedeći: “idemo na bicikl...”. Zašto b i n i? Hajdemo)).

Danas ćemo vam reći, a ja ću vam pokazati na aplikaciji, kako uz pomoć "CSS magije" možete početi raditi, potpuno funkcionalan, meni klikom.
Za klip, iza ustaljene tradicije, čudeći se živom kundaku robotske ploče, daleko, u isto vrijeme, nekome treba, možemo pogledati cijeli raspored, što, kako i sad. Priprema jela, priprema opcije menija, kao ljevoruk, dešnjak:

HTML oznaka

Pogledajmo preklopnu ploču, u svojstvu svojevrsne pobjedničke standardne zastave ():

Možda potvrdni okvir na vrhu dokumenta, odnosno odmah nakon oznake . Skriveni atribut je napisan, bez da posrednik specificira kamp "pričvršćivanja" za ovaj element, kao i jedinstveni identifikator, id="nav-toggle", na primjer, za povezivanje s for atributom oznake , koji možemo urediti i bit će uvijen poput gumba za prebacivanje ploče.

Podstava jaka na mjestu stražnje ploče