Optimizare partea clientului în PHP. Accelerarea programelor PHP. Utilizați un minim de variabile

În acest articol aș dori să vă ofer un exemplu de creare a unui meniu pop-up. Acest exemplu meniu extras creat cu folosind CSSși jQuery.

Meniul apare în partea de sus când faceți clic pe „butonul” situat în centru, în partea de sus.

După ce meniul a părăsit, întreaga zonă rămasă a paginii devine inaccesibilă pentru selectare cu mouse-ul.

Modificarea vitezei cu care meniul se mișcă în jos sau se ascunde în sus este foarte simplă; pentru a face acest lucru, trebuie să modificați valorile mai multor linii ale scriptului:

Pentru a modifica viteza de ieșire din meniu, modificați valoarea numerică din linie:

SlideMenu.slideDown(300);

Pentru a modifica viteza cu care meniul se deplasează în sus, modificați valoarea numerică din linie:

SlideMenu.slideUp(300);

Cu cât valoarea numerică este mai mare, cu atât efectul deplasării sau deplasării în meniu va fi mai lent.

Important! Pentru a lucra cu acest exemplu de transformare a textului, nu uitați să includeți biblioteca jQuery.

Puteți vizualiza și descărca un exemplu demonstrativ făcând clic pe linkurile de mai jos.

HTML

Meniul 1
Meniul 2
Meniul 3
Meniul 4
Meniul 5

Meniu derulant Faceți clic

Revolverele trăgătorului i-au trecut lui Roland de la tatăl său, dar, din moment ce Roland s-a dovedit a fi mai mare și mai puternic decât el, au fost special cântărite cu plăci metalice.

Revolverele sunt descrise ca fiind uriașe și grele, cu mânere galbene din cel mai bun lemn de santal. Când Roland caută cartușe pentru arma sa în New York ("Extraction of Three"), se dovedește că este potrivit pentru cartușe de la un Winchester calibrul .45 (inițial dintr-un Long Colt de același calibru).

Pentru referință, primele cartușe „universale” .44-40 Winchester au fost folosite atât în pușca cu pârghie Winchester Model 1873, cât și în revolverul Colt Peacemaker 1878; Camerele pentru cartușul .45 Long Colt, Navy Arms, Rossi, Marlin și Winchester produc puști Liver Action cu o bretele Henry și o magazie sub țeava pentru împușcăturile moderne „cowboy”; același cartuș a fost folosit în Peacemaker și Colt Single Action Conversii ale armatei.

Corp CSS ( chenar-sus: 10px solid #ff725d; ) h1 (marja: 90px 0 50px; culoare: #666; text-align: center; font-size: 50px; ) .content (marja: 0 auto 20px; max- lățime: 680px; umplutură: 0 3%; ) .content img ( lățime: 260px; înălțime: automat; chenar: solid 10px #fff; box-shadow: 0 1px 2px #999; float: stânga; marjă: 0 3% 3 %; ) p ( dimensiunea fontului: 110%; alinierea textului: centru; înălțimea liniei: 1,5; marginea: 0 0 15px; ) .slide_container ( lățime: 100%; poziție: absolut; sus: 0; z-index : 999; ) #meniu ( umplutură: 50px 0; chenar-jos: solid 10px #ff725d; fundal: #fff; afișare: niciunul; ) #menu ul ( overflow: ascuns; margine: 0 automat; padding: 0; max- lățime: 800px; lățime: 100%; ) #meniu li (float: stânga; umplutură: 0; lățime: 20%; stil listă: niciunul; ) #meniu li a ( afișare: bloc; marjă: 0 5%; umplutură : 20px 0; chenar: solid 1px #333; fundal: #fff; culoare: #666; text-align: center; text-decoration: none; font-size: 18px; ) #menu li a:hover ( chenar: solid 1px #12a1c6;culoare: #12a1c6; ) #menu li a:activ ( chenar: solid 1px #0e7b97; culoare: #0e7b97; ) #btn ( marjă: 0 auto; lățime: 200px; înălțime: 30px; chenar-radius: 0 0 5px 5px; fundal: #ff725d ; cursor: indicator; ) #btn span (poziție: relativ; sus: 12px; stânga: 50%; afișare: bloc; margine-stânga: -25px; lățime: 50px; înălțime: 5px; chenar-rază: 5px; fundal: #fff; box-shadow: inserție 1px 1px 2px #ddd; ) .layer (poziție: fix; sus: 0; lățime: 100%; înălțime: 100%; culoare de fundal: #ff725d; -ms-filter: "progid :DXImageTransform.Microsoft.Alpha(opacity=50)"; opacitate: 0,5; ) @media ecran și (max-width: 480px) ( #meniu ( padding: 5%; ) #menu li ( width: 100%; ) # meniu li a (border-top: niciunul; ) #meniu li a:hover ( margin-top: -1px; ) #meniu li:first-child a (border-top: solid 1px #333; ) #meniu li:first -child a:hover ( margin-top: 0; border-top: solid 1px #12a1c6; ) ) JS $(function() ( var openBtn = $("#btn")), slideMenu = $("#meniu") , layer = $("").addClass("layer"); openBtn.on("click", function() ( if (slideMenu.is(":hidden")) ( layer.appendTo("body"); slideMenu.slideDown(300); ) else ( slideMenu.slideUp(300); layer.remove(); ) )); ));

În acest articol aș dori să vă ofer un exemplu de creare a unui meniu pop-up. Acest exemplu de meniu glisant a fost creat folosind CSS și jQuery. Meniul apare în partea de sus când faceți clic pe „butonul” situat în centru, în partea de sus. După ce meniul a părăsit, întreaga zonă rămasă a paginii devine inaccesibilă pentru selectare cu mouse-ul. Schimbarea vitezei la care meniul se mișcă în jos sau se ascunde în sus este foarte simplă; pentru a face acest lucru, trebuie să modificați valorile mai multor linii ale scriptului: Pentru a modifica viteza cu care meniul se mișcă, modificați valoarea numerică în linie: Pentru a modifica viteza cu care meniul se deplasează în sus, modificați valoarea numerică în linie: Cu cât valoarea numerică este mai mare, cu atât efectul părăsirii sau deplasării în meniu va fi mai lent. Important! Pentru a lucra cu date...

Pe acest moment Cu folosind jQuery Puteți face orice pe site, trebuie doar să decideți dacă site-ul dvs. are nevoie. Cu toții ne străduim să facem site-ul cât mai ușor de utilizat, astfel încât să îi fie plăcut să navigheze pe site și să fie cât mai ușor. Meniul joacă un rol important atunci când un vizitator „se plimbă” prin site-ul tău. Și în acest tutorial vom crea un meniu glisant care se poate ascunde și poate apărea atunci când utilizatorul are nevoie de el.

De asemenea, meniuri glisante interesante:

Un exemplu poate fi văzut aici:

Descarca

În acest tutorial vom folosi Pluginul jQuery- „jQuery.mmenu.js”. Poate fi descărcat din linkul - descărcare.

Cum se utilizează? Partea HTML

Mai întâi, să conectăm bibliotecile și stilurile necesare:

1 2 3 4 5

Apoi ne vom decide asupra structurii meniului. Ca exemplu, pentru a arăta cum funcționează, voi face un meniu cu elemente imbricate. Dar al tău ar putea fi mai simplu:

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

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

Puțin deasupra meniului vom introduce un comutator astfel încât utilizatorul să îl poată deschide/închide:

Am terminat cu structura HTML, acum să trecem la stiluri.

Bună dimineața tuturor celor care citesc acest material și de data aceasta am decis să scriu un alt meniu în JQuery, foarte simplu ca structură de cod și nu încarcă site-ul la derularea paginii. În general, astăzi vom dezvolta un meniu lateral glisant pentru site. Inainte de aceasta, am vrut sa spun ca ne asteapta mari schimbari in fata, in primul rand aceasta se refera la o schimbare completa a site-ului, atat functionalitatea cat si designul acestuia.

Prin urmare, nu uitați să vă abonați la noi pentru a fi la curent cu toate evenimentele, iar noi, la rândul nostru, nu vom uita să vă încântăm cu materiale noi și utile!) Ei bine, bine, m-am lăsat dus de cap și am ieșit în afara subiectului) Să ne concentrăm din meniul nostru și voi încerca să ne spun mai multe despre asta.

HTML. H atunci trebuie să ne conectăm și care va fi cadrul paginii...

Mai întâi, să conectăm fișierul de stiluri ca de obicei demo.css, fișier de stil font-awesome.min.css pentru pictogramele noastre, puteți descărca de pe site-ul oficial http://fontawesome.io/, apoi va trebui să conectăm biblioteca jQuery și să nu uitați de scriptul în sine meniu.js

Acum creăm cadrul nostru de markup HTML pentru meniu. Pentru a face acest lucru, creați o etichetă navși dați-i un identificator meniul care va adăuga și elimina o clasă meniu-deschis folosind metoda toggleClass.

Întregul design va funcționa exclusiv când faceți clic pe butonul cu identificatorul comutare meniu.

Acasă Servicii Portofoliu Recenzii Contacte

Acum haideți să ne proiectăm puțin pagina în stilul propriu din echipa de proiect

site-ul web

blog de programare web amator

JQUERY. Puțin cod și nimic în plus...

Creăm o funcție de clic și îi atribuim un identificator comutare meniu. Apoi ne întoarcem la identificator meniulși adăugați, eliminați clasa meniu-deschis.

$(function())( $("#menuToggle").on("click", function())( $("#meniu").toggleClass("meniu-deschidere"); )); ))(jQuery );

CSS. Proprietăți de bază și opțiuni pentru modificarea aspectului meniului...

Mai întâi avem nevoie de un identificator meniul setați o serie de proprietăți necesare, cum ar fi poziționarea, locația, lățimea și înălțimea. După aceea, pentru ca meniul să fie inițial extins și ascuns, înregistrăm clasa meniu-deschis.

#meniu ( poziție: fix; dreapta: -190px; lățime: 250px; înălțime: 100%; sus: 0; ) #menu.meniu-deschis ( dreapta: 0; )

Acum lucrăm cu cadrul blocului de meniu, sau mai degrabă cu identificatorul meniuConținutși atribuiți-i proprietățile necesare, cum ar fi: poziționare, locație, lățime, culoare, înălțime.

#menuConținut (poziția: absolut; stânga: 60px; fundal: #2b271a; lățime: 200px; înălțime: 100%; padding-top: 114px; ) #meniu a ( margine-stânga: 40px; culoare: #00ffff; afișare: bloc ; dimensiunea fontului: 20px; înălțimea liniei: 40px; text-decoration:none; ) #meniu a:hover (culoare: #00ff40; ) #meniu( -webkit-transition: toate .3s ease; -moz-transition: toate .3s ușurință; -ms-transition: toate .3s ușurință; -o-tranziție: toate .3s ușurință; tranziție: toate .3s ușurință; )

Și în sfârșit, tot ce trebuie să facem este să proiectăm butonul și să-i oferim proprietățile necesare, dintre care cele mai importante sunt: poziționarea, locația, lățimea și înălțimea. Pentru frumusețe, aplicăm animație folosind tranziție.

#menuToggle (poziția: absolut; sus: 120px; text-align: center; font-size: 14px; culoare: #ffffff; lățime: 40px; înălțime: 40px; line-height: 40px; cursor: pointer; fundal: rgba( 0,0,0,0.45); -webkit-transition: toate .1s ease-in-out; -moz-transition: toate .1s ease-in-out; -ms-transition: toate .1s ease-in-out ; -o-tranziție: toate .1s ease-in-out; tranziție: toate .1s ease-in-out; ) #menuToggle:hover (culoare: #00ff40; fundal: rgba(0,0,0,0.2); -webkit-transition: toate .1s ease-in-out; -moz-transition: toate .1s ease-in-out; -ms-transition: toate .1s ease-in-out; -o-transition: toate .1s ease-in-out; tranziție: toate .1s ease-in-out; )

Acum tot ce trebuie să facem este să adăugăm designul pe pagina noastră, astfel încât să arate frumos)

Body( fundal:#757575; ) .rh img( margine: 0 auto; display:block; ) .rh span( culoare:#fff; display:block; text-align:center; font-size:41px; ) .rh span>p( color:#f1f3e9; font-size:15px; ) hr( chenar:0,4px solid #fff; fundal:#fff; culoare:#fff; lățime: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; chenar: 1px întrerupt #fff; )

P.S. Hai sa aranjam meniul din stanga...

Pentru a face acest lucru, trebuie doar să adăugăm și să modificăm proprietățile pentru #meniul, #meniu.meniu-deschisȘi #menuToggle.

#meniu ( stânga: -262px; ) #menu.meniu-deschis ( stânga: -60px; ) #menuToggle ( margine-stânga: 275px; )

Și asta este tot, vă mulțumim foarte mult pentru atenție și nu uitați să vă abonați la noi și, de asemenea, să împărtășiți conținut util și necesar cu alții!)

Deci, scurt și clar... Mai jos este o modalitate de a implementa un meniu glisant simplu. Codul este imediat cu comentarii, ca să fie clar. Aici este DEMO. Ideea este că facem clic pe pictograma ☰, iar în stânga apare un meniu. Pictograma burger se transformă într-o cruce, ca în Telegram :) Apoi faceți clic pe cruce și meniul se mută la stânga. Totul este foarte simplu... Daca se doreste, codul si stilurile sunt usor de modernizat, schimba culorile si marimile. De asemenea, dacă doriți să mutați meniul în partea dreaptă, atunci în stiluri înlocuiți pur și simplu tot stânga cu dreapta. Din nou, în sandbox-ul DEMO puteți experimenta. Avantajul unui astfel de meniu este că poate fi implementat în majoritatea șabloanelor.

Iată aspectul în sine:

MENIU LATERAL SIMPLU DETRAT

Mai departe Stiluri CSS:

/* stiluri de corp, totul este clar aici */
corp (
marja: 0;
umplutură: 0;
familie de fonturi: Arial;
dimensiunea fontului: 12pt;
fundal: #f0f0f0;
}
/*stilează meniul*/
.meniu-ascuns (
afisare: bloc;
poziție: fixă;
list-style:none;
umplutură: 10px;
marja: 0;
dimensionare cutie: chenar-cutie;
latime: 200px;
culoare de fundal: #2b343c;
inaltime: 100%;
sus: 0;
stânga: -200px;
tranziție: stânga.2s;
indicele z: 2;

}
.hidden-meniu li a (text-decor: none; color:#cacaca;)
.hidden-meniu li a:hover (culoare:#fff;)
/*ascunde caseta de selectare a introducerii*/
.hidden-meni-ticker (
afișaj: niciunul;
}
/*stiluri generale ale pictogramei hamburger, eticheta în sine*/
.btn-meniu (
culoare: #fff;
culoare de fundal: #fff;
umplutură: 2px;
poziție: fixă;
sus: 5px;
stânga: 5px;
cursor: pointer;
tranziție: stânga .23s;
indicele z: 3;
latime: 20px;
-webkit-transform: translateZ(0);
-webkit-backface-vizibility: ascuns;
}
/*stiluri generale de dungi*/
.btn-menu span (
afisare: bloc;
înălțime: 2px;
culoare de fundal: #2b343c;
marja: 5px 0 0;
tranziție: toate .1s liniară .23s;
poziție: relativă;
}
/*a pus prima dungă în cuie în partea de sus a etichetei*/
.btn-menu span.first (
margine-top: 0;
}
/*când dai clic pe burger, îl mutăm și dăm un alt fundal burgerului*/
.hidden-menu-ticker:bifat ~ .btn-menu (
stânga: 160px;
culoare de fundal: #2b343c;
}
/*și apoi stiluri care schimbă burgerul, mutând meniul în funcție de eveniment - făcând clic pe pictograma burger*/
.hidden-menu-ticker:bifat ~ .hidden-meniu (
stânga: 0;
}
.hidden-menu-ticker:bifat ~ .btn-menu span.first (
-webkit-transform: rotire(45deg);
sus: 7px;
culoare de fundal: #fff;
}
.hidden-menu-ticker:bifat ~ .btn-menu span.second (
opacitate: 0;
}
.hidden-menu-ticker:bifat ~ .btn-menu span.third (
-webkit-transform: rotire(-45deg);
sus: -7px;
culoare de fundal: #fff;
}
/*pai, iata stilul titlului, ar fi fost mai frumos :)*/
antet (
culoare de fundal: #fff;
culoare: #2487ca;
text-align: centru;
umplutură: 5px;
}
h1 (
marja: 0;
umplutură: 0;
dimensiunea fontului: 17px;
greutatea fontului: normal;
}

Dacă aveți întrebări, întrebați în comentarii. Distribuiți articolul pe rețelele sociale. retelelor. Mulțumesc 😉