Optimizacija na strani klijenta u PHP-u. Ubrzanje PHP programa. Koristite minimum varijabli

U ovom članku želim vam ponuditi primjer stvaranja skočnog izbornika. Ovaj primjer izvlačni izbornik kreiran sa koristeći CSS i jQuery.

Izbornik se pojavljuje na vrhu kada kliknete na "gumb" koji se nalazi u sredini na samom vrhu.

Nakon što izbornik izađe, cijelo preostalo područje stranice postaje nedostupno za odabir mišem.

Promjena brzine kojom se izbornik pomiče prema dolje ili skriva prema gore vrlo je jednostavna; da biste to učinili, trebate promijeniti vrijednosti nekoliko redaka skripte:

Za promjenu brzine izlaza iz izbornika promijenite brojčanu vrijednost u retku:

SlideMenu.slideDown(300);

Da biste promijenili brzinu kojom se izbornik pomiče prema gore, promijenite brojčanu vrijednost u retku:

SlideMenu.slideUp(300);

Što je viša brojčana vrijednost, to će biti sporiji učinak pomicanja ili pomicanja u izborniku.

Važno! Za rad s ovim primjerom transformacije teksta ne zaboravite uključiti biblioteku jQuery.

Demo primjer možete pogledati i preuzeti klikom na donje veze.

HTML

Izbornik 1
Izbornik 2
Izbornik 3
Izbornik 4
Izbornik 5

Izbornik koji se izvlači Kliknite

Revolveri strijelaca prešli su Rolandu od njegova oca, ali budući da se pokazalo da je Roland veći i moćniji od njega, posebno su ih opteretili metalnim pločama.

Revolveri su opisani kao golemi i teški, sa žutim drškama od najfinije sandalovine. Kada Roland traži patrone za svoje oružje u New Yorku ("Extraction of Three"), ispostavlja se da mu odgovaraju patrone iz Winchestera kalibra .45 (izvorno iz Long Colta istog kalibra).

Za referencu, prve "univerzalne" patrone .44-40 Winchester korištene su iu pušci s polugom Winchester Model 1873 iu revolveru Colt Peacemaker 1878; Napravljene za patronu .45 Long Colt, Navy Arms, Rossi, Marlin i Winchester proizvode puške Liver Action s Henry bracom i spremnikom ispod cijevi za moderno "kaubojsko" gađanje; ista je patrona korištena u Peacemaker i Colt Single Action Obraćenja vojske.

CSS body ( border-top: 10px solid #ff725d; ) h1 ( margin: 90px 0 50px; color: #666; text-align: center; font-size: 50px; ) .content ( margin: 0 auto 20px; max- width: 680px; padding: 0 3%; ) .content img ( width: 260px; height: auto; border: solid 10px #fff; box-shadow: 0 1px 2px #999; float: lijevo; margina: 0 3% 3 %; ) p (veličina fonta: 110%; poravnanje teksta: središte; visina linije: 1,5; margina: 0 0 15px; ) .slide_container ( širina: 100%; pozicija: apsolutna; vrh: 0; z-indeks : 999; ) #menu ( padding: 50px 0; border-bottom: solid 10px #ff725d; background: #fff; display: none; ) #menu ul ( overflow: hidden; margin: 0 auto; padding: 0; max- width: 800px; width: 100%; ) #menu li ( float: lijevo; padding: 0; width: 20%; list-style: none; ) #menu li a ( display: block; margin: 0 5%; padding : 20px 0; rub: solid 1px #333; background: #fff; color: #666; text-align: center; text-decoration: none; font-size: 18px; ) #menu li a:hover ( border: solid 1px #12a1c6;boja: #12a1c6; ) #menu li a:active ( border: solid 1px #0e7b97; color: #0e7b97; ) #btn ( margin: 0 auto; width: 200px; height: 30px; border-radius: 0 0 5px 5px; background: #ff725d ; pokazivač: pokazivač; ) #btn raspon ( položaj: relativan; vrh: 12px; lijevo: 50%; prikaz: blok; margin-lijevo: -25px; širina: 50px; visina: 5px; radijus granice: 5px; pozadina: #fff; box-shadow: umetnuti 1px 1px 2px #ddd; ) .layer ( položaj: fiksni; vrh: 0; širina: 100%; visina: 100%; boja pozadine: #ff725d; -ms-filter: "progid :DXImageTransform.Microsoft.Alpha(opacity=50)"; neprozirnost: 0,5; ) @medijski zaslon i (maksimalna širina: 480px) ( #menu ( padding: 5%; ) #menu li ( širina: 100%; ) # menu li a ( border-top: none; ) #menu li a:hover ( margin-top: -1px; ) #menu li:first-child a ( border-top: solid 1px #333; ) #menu li:first -dijete a:hover ( margin-top: 0; border-top: solid 1px #12a1c6; ) ) JS $(function() ( var openBtn = $("#btn"), slideMenu = $("#menu") , sloj = $("").addClass("sloj"); openBtn.on("klik", funkcija() ( if (slideMenu.is(":hidden")) ( sloj.appendTo("tijelo"); slideMenu.slideDown(300); ) else ( slideMenu.slideUp(300); layer.remove(); ) )); ));

U ovom članku želim vam ponuditi primjer stvaranja skočnog izbornika. Ovaj primjer kliznog izbornika stvoren je pomoću CSS-a i jQueryja. Izbornik se pojavljuje na vrhu kada kliknete na "gumb" koji se nalazi u sredini na samom vrhu. Nakon što izbornik izađe, cijelo preostalo područje stranice postaje nedostupno za odabir mišem. Promjena brzine kojom se izbornik pomiče prema dolje ili skriva prema gore vrlo je jednostavna; da biste to učinili, morate promijeniti vrijednosti nekoliko redaka skripte: Da biste promijenili brzinu kojom se izbornik pomiče, promijenite brojčanu vrijednost u retku: Za promjenu brzine kojom se izbornik pomiče prema gore, promijenite brojčanu vrijednost u retku: Što je veća brojčana vrijednost, to će biti sporiji učinak napuštanja ili pomicanja u izborniku. Važno! Za rad s podacima...

Na ovaj trenutak S koristeći jQuery Na stranici možete učiniti bilo što, samo trebate odlučiti treba li to vašoj stranici. Svi se trudimo da stranica bude što lakša za korisnika, kako bi mu bilo ugodno kretati se po stranici i bilo što lakše. Izbornik igra veliku ulogu kada posjetitelj "šeta" vašom stranicom. U ovom vodiču ćemo stvoriti klizni izbornik koji se može sakriti i pojaviti kada to korisnik treba.

Također zanimljivi klizni izbornici:

Primjer možete vidjeti ovdje:

preuzimanje datoteka

U ovom vodiču ćemo koristiti jQuery dodatak- "jQuery.mmenu.js". Može se preuzeti na poveznici - download.

Kako koristiti? HTML dio

Prvo povežimo potrebne biblioteke i stilove:

1 2 3 4 5

Zatim ćemo odlučiti o strukturi izbornika. Kao primjer, da pokažem kako radi, napravit ću izbornik s ugniježđenim elementima. Ali vaš bi mogao biti jednostavniji:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

Stranica 1 Stranica 2 Stranica 10 Stranica 11 Stranica 13 stranica 14 Stranica 15 Stranica 12 stranica 3 stranica 4 Stranica 5 Stranica 6 Stranica 7 Stranica 8 Stranica 9

Malo iznad izbornika umetnut ćemo prekidač kako bi ga korisnik mogao otvoriti/zatvoriti:

Završili smo s HTML strukturom, a sada prijeđimo na stilove.

Dobro jutro svima koji čitaju ovaj materijal, a ovaj put sam odlučio napisati još jedan izbornik u JQueryju, vrlo jednostavan u strukturi koda i ne učitava web mjesto prilikom pomicanja stranice. Općenito, danas ćemo razviti klizni bočni izbornik za web mjesto. Prije ovoga htio sam reći da nas očekuju velike promjene, prije svega to se tiče kompletne promjene stranice, kako funkcionalnosti tako i dizajna.

Stoga se ne zaboravite pretplatiti na nas kako biste bili u toku sa svim događajima, a mi vas zauzvrat nećemo zaboraviti oduševiti novim i korisnim materijalima!) Pa, dobro, zanio sam se i skrenuo s teme) Usredotočimo se na našem jelovniku i pokušat ću nam reći više o tome.

HTML. H onda se trebamo spojiti i kakav će biti okvir stranice...

Prvo povežimo datoteku stilova kao i obično demo.css, datoteka stila font-awesome.min.css za naše ikone, možete preuzeti sa službene web stranice http://fontawesome.io/, tada ćemo morati povezati jQuery biblioteku i ne zaboravite na samu skriptu izbornik.js

Sada stvaramo naš okvir za označavanje HTML-a za izbornik. Da biste to učinili, izradite oznaku nav i dajte mu identifikator Jelovnik koji će dodati i ukloniti klasu meni-otvoreno pomoću metode prebaci Razred.

Cijeli ovaj dizajn radit će isključivo kada kliknete na gumb s identifikatorom izbornikPrebaci.

Dom Usluge Portfelj Recenzije Kontakti

Sada dizajnirajmo našu stranicu malo u našem stilu projektnog tima

web stranica

amaterski blog o web programiranju

JQUERY. Malo koda i ništa dodatno...

Kreiramo funkciju klika i dodjeljujemo joj identifikator izbornikPrebaci. Zatim se okrećemo identifikatoru Jelovnik i dodati, ukloniti klasu meni-otvoreno.

$(function())( $("#menuToggle").on("click", function())( $("#menu").toggleClass("menu-open"); )); ))(jQuery );

CSS. Osnovna svojstva i opcije za promjenu izgleda izbornika...

Prvo trebamo identifikator Jelovnik postavite niz potrebnih svojstava, kao što su položaj, lokacija, širina i visina. Nakon toga, tako da je izbornik inicijalno proširen i skriven, prijavljujemo sat meni-otvoreno.

#menu (pozicija: fiksna; desno: -190px; širina: 250px; visina: 100%; vrh: 0; ) #menu.menu-open (desno: 0;)

Sada radimo s okvirom bloka izbornika, odnosno s identifikatorom menuContent i dodijelite mu potrebna svojstva, kao što su: položaj, lokacija, širina, boja, visina.

#menuContent ( pozicija: apsolutna; lijevo: 60px; pozadina: #2b271a; širina: 200px; visina: 100%; padding-top: 114px; ) #menu a ( margina-lijevo: 40px; boja: #00ffff; prikaz: blok ; font-size: 20px; line-height: 40px; text-decoration:none; ) #menu a:hover (color: #00ff40; ) #menu( -webkit-transition: all .3s ease; -moz-transition: sve .3s jednostavno; -ms-transition: sve .3s lako; -o-transition: sve .3s lako; prijelaz: sve .3s lako; )

I na kraju, sve što trebamo učiniti je dizajnirati gumb i dati mu potrebna svojstva, od kojih su najvažnija: položaj, lokacija, širina i visina. Za ljepotu primjenjujemo animaciju pomoću tranzicija.

#menuToggle ( položaj: apsolutni; vrh: 120px; poravnanje teksta: središte; veličina fonta: 14px; boja: #ffffff; širina: 40px; visina: 40px; visina linije: 40px; kursor: pokazivač; pozadina: rgba( 0,0,0,0.45); -webkit-transition: svi .1s laki in-out; -moz-transition: svi .1s laki in-out; -ms-transition: svi .1s laki in-out ; -o-prijelaz: sve .1s lagano ulaženje; prijelaz: sve .1s lagano ulaženje; ) #menuToggle:hover ( boja: #00ff40; pozadina: rgba(0,0,0,0.2); -webkit-transition: sve .1s ease-in-out; -moz-transition: sve .1s ease-in-out; -ms-transition: sve .1s ease-in-out; -o-transition: sve .1s ease-in-out; prijelaz: sve .1s ease-in-out; )

Sada sve što trebamo učiniti je dodati dizajn našoj stranici kako bi izgledala lijepo)

Body( background:#757575; ) .rh img( margin: 0 auto; display:block; ) .rh span( color:#fff; display:block; text-align:center; font-size:41px; ) .rh span>p( color:#f1f3e9; font-size:15px; ) hr( border:0.4px solid #fff; background:#fff; color:#fff; width:30%; margin:12px auto; ) .rh ul ( list-style:none; margin:5px auto; width:54%; ) .rh ul li( float:left; margin:20px; ) .rh ul li a( text-decoration:none; ) .rh ul li a span( padding:13px; ) .rh ul li a span:hover( background:#c7c9bd; padding:8px; border: 1px crtkano #fff; )

p.s. Posložimo jelovnik lijevo...

Da bismo to učinili, samo trebamo dodati i promijeniti svojstva za #Jelovnik, #menu.menu-open I #menuToggle.

#menu ( lijevo: -262px; ) #menu.menu-open ( lijevo: -60px; ) #menuToggle ( margin-lijevo: 275px; )

I to je sve, hvala vam puno na pažnji i ne zaboravite se pretplatiti na nas, a također dijeliti korisne i potrebne sadržaje s drugima!)

Dakle, kratko i jasno... Ispod je način implementacije jednostavnog kliznog izbornika. Kod je odmah s komentarima, tako da je jasno. Ovdje je DEMO. Poanta je da kliknemo na ikonu ☰, a lijevo nam se pojavi izbornik. Ikona hamburgera se pretvara u križ, kao u Telegramu :) Zatim kliknete na križ i meni se pomiče ulijevo. Sve je vrlo jednostavno... Po želji se kod i stilovi lako moderniziraju, mijenjaju boje i veličine. Također, ako želite pomaknuti izbornik na desnu stranu, tada u stilovima jednostavno zamijenite sve lijevo s desnim. Opet, u DEMO sandboxu možete eksperimentirati. Prednost takvog izbornika je u tome što se može implementirati u većinu predložaka.

Evo samog izgleda:

JEDNOSTAVAN BOČNI IZBORNIK NA IZVLAČENJE

Unaprijediti CSS stilovi:

/* stilovi karoserije, ovdje je sve jasno */
tijelo(
margina: 0;
ispuna: 0;
obitelj-fontova: Arial;
veličina fonta: 12pt;
pozadina: #f0f0f0;
}
/*stiliziraj izbornik*/
.hidden-menu (
prikaz: blok;
položaj: fiksni;
list-style:nema;
ispuna: 10px;
margina: 0;
veličina okvira: border-box;
širina: 200px;
boja pozadine: #2b343c;
visina: 100%;
vrh: 0;
lijevo: -200px;
prijelaz: lijevo.2s;
z-indeks: 2;

}
.hidden-menu li a (dekoracija teksta: nema; boja:#cacaca;)
.hidden-menu li a:hover (boja:#fff;)
/*sakrij potvrdni okvir za unos*/
.hidden-menu-ticker (
prikaz: nijedan;
}
/*opći stilovi ikone hamburgera, same etikete*/
.btn-izbornik (
boja: #fff;
boja pozadine: #fff;
ispuna: 2px;
položaj: fiksni;
gore: 5px;
lijevo: 5px;
kursor: pokazivač;
prijelaz: lijevo .23s;
z-indeks: 3;
širina: 20px;
-webkit-transformacija: translateZ(0);
-webkit-backface-visibility: skriveno;
}
/*opći stilovi pruga*/
.btn-raspon izbornika (
prikaz: blok;
visina: 2px;
boja pozadine: #2b343c;
margina: 5px 0 0;
prijelaz: sve .1s linearno .23s;
položaj: relativan;
}
/*prikovao prvu traku na vrh naljepnice*/
.btn-menu span.first (
margin-top: 0;
}
/*kada kliknete na burger, pomičemo ga i dajemo drugačiju pozadinu burgeru*/
.hidden-menu-ticker:checked ~ .btn-menu (
lijevo: 160px;
boja pozadine: #2b343c;
}
/*a zatim stilovi koji mijenjaju burger, pomicanje menija prema događaju - klik na ikonu burgera*/
.hidden-menu-ticker:checked ~ .hidden-menu (
lijevo: 0;
}
.hidden-menu-ticker:checked ~ .btn-menu span.first (
-webkit-transformacija: rotacija(45deg);
gore: 7px;
boja pozadine: #fff;
}
.hidden-menu-ticker:checked ~ .btn-menu span.second (
neprozirnost: 0;
}
.hidden-menu-ticker:checked ~ .btn-menu span.third (
-webkit-transform: rotiraj (-45deg);
gore: -7px;
boja pozadine: #fff;
}
/*pa evo u stilu naslova, bilo bi ljepše :)*/
Zaglavlje (
boja pozadine: #fff;
boja: #2487ca;
poravnanje teksta: središte;
ispuna: 5px;
}
h1 (
margina: 0;
ispuna: 0;
veličina fonta: 17px;
težina fonta: normalna;
}

Ako imate pitanja, pitajte u komentarima. Podijelite članak na društvenim mrežama. mreže. Hvala 😉