Մարմին, html ( բարձրություն : 100 % ; լուսանցք: 0 վարարում:թաքնված ; տառատեսակ-ընտանիք՝ helvetica; տառատեսակի քաշը՝ 100; ).կոնտեյներ( դիրքը : հարաբերական ; բարձրությունը : 100 % ; լայնությունը: 100 % ; ձախ: 0 -webkit-անցում. ձախ 0 .4s ease-in-out; -moz-անցում. ձախ 0 .4s ease-in-out; -ms-անցում. ձախ 0 .4վ հեշտություն-ներ-դուրս; -o-անցում. ձախ 0 .4վ հեշտ-ներ-դուրս; անցում. ձախ 0 .4 վրկ հեշտ մուտք դուրս; ) .container .open-sidebar (ձախ՝ 240px; ) #կողային գոտի (դիրք՝ բացարձակ; ձախ՝ -240px; ֆոն՝ #DF314D; լայնություն՝ 240px; բարձրություն՝ 100 % ; տուփի չափսերը՝ սահմանային տուփ; ) #կողային ul ( լուսանցք : 0 ; լիցք : 0 , ցուցակի ոճ , ոչ մեկը ; ) #կողային ul li ( լուսանցք : 0 ; ) #կողագոտի ul li a ( լիցք : 15px 20px , տառատեսակի չափ : 16px ; font-we 100; գույն՝ սպիտակ; տեքստային ձևավորում՝ ոչ մեկը; էկրան՝ բլոկ; եզրագծով ներքև՝ 1px կոշտ #C9223D; -վեբկիտ-անցում. ֆոնային 0.3 վրկ հեշտ մուտք դեպի դուրս; -moz-անցում. ֆոն 0.3 վրկ ease-in-out; -ms-transition. ֆոնային 0 .3s ease-in-out; -o-transition: background 0.3s easy-in-out; անցում. կողագոտ ul li:hover a ( ֆոն : #C9223D ; ) .main-content ( width : 100 % ; բարձրություն: 100 % 100 % 100 % ; գծի բարձրություն: 160 % ; ) .main-content #sidebar-toggle (ֆոն՝ #DF314D; եզրագծային շառավիղ՝ 3px; ցուցադրում՝ բլոկ; դիրք՝ հարաբերական; padding՝ 10px 7px; float: ձախ;) .main-content #sidebar-toggle. էկրան՝ բլոկ, լայնություն՝ 18 պիքսել, լուսանցք՝ ներքև՝ 3 պքս, բարձրություն՝ 2 պքս, ֆոնի գույն՝ #fff; եզրագծի շառավիղ՝ 1 px;) .main-content #sidebar-toggle .bar :last-child (margin-bottom : 0 ;)

;

Այժմ մենք կթաքցնենք կողային ընտրացանկը դեպի ձախ՝ դիրքով:relative և ձախ՝ -240px, այս արժեքը հավասար է կողային մենյուի լայնությանը: Մենք ավելացրել ենք կոճակ և jQuery սկրիպտ, որը թույլ կտա մեզ կանչել կողագոտին սեղմելով՝ միացնելով կողագոտին և հիմնական բովանդակության բլոկը պարունակող կոնտեյների բաց կողագոտու դասը:

Դրանից հետո մենք ուղղակի տեղափոխում ենք ամբողջ բեռնարկղը դեպի ձախ 240px-ով, և դա կհայտնվի ձախ կողմի ընտրացանկը: Եթե ​​օգտագործողը նորից սեղմի կոճակը, jQuery սկրիպտը կհեռացնի դասը կոնտեյներից, իսկ կողագոտին կվերանա: Կողային գոտին այնպես անելու համար, կարծես այն գալիս է էկրանի ձախ եզրից, մենք ավելացրել ենք ոճի անցում, որպեսզի ստեղծենք նույն գործառույթը, ինչ սմարթֆոնների հավելվածները:

Այժմ մենք ունենք պարզ կողային մենյու, որը կոչվում է սեղմելով մկնիկի կոճակը:

3. Ճաշացանկը կազմելու համար

Մարմին, html ( բարձրություն : 100 % ; լուսանցք: 0 վարարում:թաքնված ; տառատեսակ-ընտանիք՝ helvetica; տառատեսակի քաշը՝ 100; ).կոնտեյներ( դիրքը : հարաբերական ; բարձրությունը : 100 % ; լայնությունը: 100 % ; ձախ: 0 -webkit-անցում. ձախ 0 .4s ease-in-out; -moz-անցում. ձախ 0 .4s ease-in-out; -ms-անցում. ձախ 0 .4վ հեշտություն-ներ-դուրս; -o-անցում. ձախ 0 .4վ հեշտ-ներ-դուրս; անցում. ձախ 0 .4 վրկ հեշտ մուտք դուրս; ) .container .open-sidebar (ձախ՝ 240px;) .swipe-area (դիրք՝ բացարձակ, լայնություն՝ 50px, ձախ՝ 0, վերև՝ 0, բարձրություն՝ 100 % ; ֆոն՝ #f3f3f3; z-ինդեքս՝ 0 ) #կողային տող (ֆոն՝ #DF314D; դիրք՝ բացարձակ; լայնություն՝ 240px; բարձրություն՝ 100 % ; ձախ: -240px տուփի չափսերը՝ սահմանային տուփ; -moz-box-sizing: border-box; ) #կողային ul ( լուսանցք : 0 ; լիցք : 0 , ցուցակի ոճ , ոչ մեկը ; ) #կողային ul li ( լուսանցք : 0 ; ) #կողագոտի ul li a ( լիցք : 15px 20px , տառատեսակի չափ : 16px ; font-we 100; գույն՝ սպիտակ; տեքստային ձևավորում՝ ոչ մեկը; էկրան՝ բլոկ; եզրագծով ներքև՝ 1px կոշտ #C9223D; -վեբկիտ-անցում. ֆոնային 0.3 վրկ հեշտ մուտք դեպի դուրս; -moz-անցում. ֆոն 0.3 վրկ ease-in-out; -ms-transition. ֆոնային 0 .3s ease-in-out; -o-transition: background 0.3s easy-in-out; անցում. կողագոտ ul li:hover a ( ֆոն : #C9223D ; ) .main-content ( width : 100 % ; բարձրություն: 100 % ; լիցք՝ 10px տուփի չափսերը՝ սահմանային տուփ; -moz-box-sizing: border-box; պաշտոնը` հարաբերական; ) .main-content .content ( box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 60px; width: 100 % ; ) .main-content .content h1( font-weight : 100 ; ) .main-content .content p( width : 100 % ; գծի բարձրություն: 160 % ; ) .main-content #sidebar-toggle (ֆոն՝ #DF314D; եզրագծային շառավիղ՝ 3px; ցուցադրում՝ բլոկ; դիրք՝ հարաբերական; padding՝ 10px 7px; float: ձախ;) .main-content #sidebar-toggle. էկրան՝ բլոկ, լայնություն՝ 18 պիքսել, լուսանցք՝ ներքև՝ 3 պքս, բարձրություն՝ 2 պքս, ֆոնի գույն՝ #fff; եզրագծի շառավիղ՝ 1 px;) .main-content #sidebar-toggle .bar :last-child (margin-bottom : 0 ;)

; $(".swipe-area") .swipe (( swipeStatus:function (իրադարձություն, փուլ, ուղղություն, հեռավորություն, տևողությունը, մատները) ( if (phase=="move" && direction =="աջ") ($(" .container" ) .addClass ("open-sidebar") ; return false ;) if (phase=="move" && direction =="left") ($(".container") .removeClass ("open-sidebar" վերադարձնել կեղծ;)))));

Այս ձեռնարկի ամենադժվար մասը կողագոտին գծագրելի դարձնելն է ինչպես սմարթֆոնների, այնպես էլ աշխատասեղանի վեբ բրաուզերների վրա: Այս պահին մենք պետք է միացնենք լավ plugin, որը կոչվում է TouchSwipe, որը ստեղծվել է Մեթ Բրայսոնի կողմից՝ մենյու քաշելու գործընթացը կառավարելու համար: Համոզվեք, որ այս փլագինը ներառված է ձեր HTML ֆայլում:

Այժմ, երբ մենք հնարավորություն ունենք հայտնաբերելու սմարթֆոնի ձգման և քաշելու ժեստերը, մենք կօգտագործենք դա՝ կողային ընտրացանկը բացելու համար: Նախկինում մենք բախվել էինք խնդրի, քանի որ մենք կիրառում էինք pull action detection-ը ամբողջ էջի վրա, սմարթֆոններում անհնար էր ոլորել էջը մեծացնելու ժամանակ, քանի որ բացվում էր կողային ընտրացանկը։

Քանի որ սա անընդունելի է, մենք ավելացրել ենք սահահարման տարածքի դատարկ դասի բլոկ՝ սահահարման ժեստի հայտնաբերման տարածքը սահմանելու համար: Քաշելու սահմանման տարածքը գտնվում է էջի ձախ եզրին, որպեսզի օգտագործողը կարողանա դուրս բերել կողային ընտրացանկը՝ էկրանի ձախ եզրում դեպի աջ քաշելով: Սա լուծում է էջը ոլորելիս ընտրացանկը պատահաբար բացելու խնդիրը:

Մեր JS սկրիպտում մենք սահմանում ենք ձգման գործողությունը՝ օգտագործելով swipe() ֆունկցիան, որն իրականացվում է TouchSwipe plugin-ի կողմից: Մենք հայտնաբերում ենք ձգման գործողության երկու մաս՝ շարժում և ուղղություն: Մենք պարզապես ավելացնում ենք բաց կողային տողերի դասը՝ ցանկը բացելու համար, երբ օգտագործողի մկնիկի կուրսորը կամ մատը շարժվում է դեպի աջ: Մենք հեռացնում ենք այս դասը, եթե մկնիկի կուրսորը կամ օգտագործողի մատը շարժվում է հակառակ ուղղությամբ:

Մեր փորձի ժամանակ այս հատկությունը լավ է աշխատում սմարթֆոնների վրա, բայց լավ չի աշխատում աշխատասեղանի բրաուզերների վրա: սեղանադիր համակարգիչներ, որովհետև երբ կոճակը սեղմած պահած մենք շարժում ենք մկնիկը, բրաուզերները գործարկում են տեքստի ընտրության գործիք, որը վերացնում է մեր ձգման հայտնաբերման գործողությունը: Մեզ սա պետք չէ, ուստի մենք վերադարձնում ենք false բաց կողագոտու դասը ավելացնելուց կամ հեռացնելուց հետո: Եվ դա կանխում է լռելյայն տեքստի ընտրության գործիքի գործարկումը:

Եզրակացություն

Եվ դա բոլորը! Այժմ մենք ունենք բացվող կողագոտի, որն աշխատում է ինչպես աշխատասեղանի, այնպես էլ սմարթֆոնների բրաուզերների վրա: Հուսով ենք, որ ձեզ դուր եկավ այս դասը:

Թարգմանություն – Գրասեղան

Վրա այս պահին jQuery-ի օգնությամբ դուք կարող եք ցանկացած բան անել կայքում, պարզապես պետք է որոշեք՝ արդյոք ձեր կայքին դա անհրաժեշտ է։ Մենք բոլորս ձգտում ենք, որպեսզի կայքը հնարավորինս հարմար լինի օգտատերերի համար, որպեսզի նրա համար հաճելի լինի նավարկելը և հնարավորինս հեշտ լինի: Ճաշացանկը մեծ դեր է խաղում, երբ այցելուն «քայլում է» ձեր կայքում։ Եվ այս ձեռնարկում մենք կստեղծենք սլայդ դուրս ընտրացանկ, որը կարող է թաքցնել և հայտնվել, երբ օգտագործողին դա անհրաժեշտ լինի:

Նաև հետաքրքիր մենյուներ.

Օրինակ կարելի է տեսնել այստեղ.

Բեռնել

Այս ձեռնարկում մենք կօգտագործենք jQuery plugin- «jQuery.mmenu.js»: Այն կարելի է ներբեռնել հղումից՝ ներբեռնել։

Ինչպես օգտագործել?

HTML մաս

Նախ, մենք միացնելու ենք անհրաժեշտ գրադարաններն ու ոճերը.

1 2 3 4 5

<կապի տեսակը = "text/css" rel="stylesheet" href="css/jquery.mmenu.css" /> <կապի տեսակը = "text/css" rel="stylesheet" href="css/demo.css" /> <script type = "text/javascript" src= «http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»> <script type="text/javascript" src="js/jquery.mmenu.js" >

Հաջորդը, եկեք սահմանենք մենյուի կառուցվածքը: Որպես օրինակ՝ ցույց տալու համար, թե ինչպես է այն աշխատում, ես կկազմեմ մենյու՝ տեղադրված տարրերով։ Բայց ձերը կարող է նույնիսկ ավելի պարզ լինել.

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

Մենյուից մի փոքր վերև տեղադրեք անջատիչ, որպեսզի օգտագործողը կարողանա բացել / փակել այն.

Երբ HTML կառուցվածքն ավարտված է, այժմ եկեք անցնենք ոճերին:

Շարունակելով կայքերի ինտերֆեյսի տարբեր տարրերի օրինակները, որոնք կարող են պատրաստվել առանց Javascript-ի, այսօր ես նկարագրելու եմ, թե ինչպես կարող եք ստեղծել բացվող ընտրացանկ՝ օգտագործելով մաքուր CSS:

Եվ նորից DEMO, սկզբի համար:

Սկսենք նրանից HTML- կառուցվածքներ.

• Հղում 1
• Հղում 2
• Հղում 3

մենյուի տեսանելիությունը որոշելու համար մեզ անհրաժեշտ է մուտքագրում, այսինքն՝ եթե այն ընտրված է, ապա մենյուն տեսանելի է և հակառակը:

պիտակը մեր բուրգերի կոճակն է, որը կապված է մուտքագրման հետ:

ul-ն ինքնին մենյուի բլոկն է:

Հիմա css(Ես գրել եմ միայն WebKit բրաուզերների համար՝ Opera 16+, Safari, Chrome):

Մեր ճաշացանկը.

Թաքնված ընտրացանկ (ցուցադրում՝ բլոկ; դիրքը՝ ֆիքսված; ցանկի ոճ՝ ոչ մեկը; լիցք՝ 10px; լուսանցք՝ 0; տուփի չափը՝ եզրագծային տուփ; լայնությունը՝ 200px; ֆոնի գույնը՝ #eee; բարձրությունը՝ 100%; վերև՝ 0; ձախ՝ -200px; անցումը՝ ձախ .2 վրկ; z-ինդեքս՝ 2; -webkit-փոխակերպում՝ translateZ(0); -webkit-backface-visibility՝ թաքնված;)

Այստեղ ստեղծագործ մարդկանց համար մեծ ազատություն կա, բայց հիմնական պարամետրերը լայնությունն ու ձախն են: Նրանք պետք է ունենան նույն արժեքը, բայց ձախը բացասական է: Այս կերպ մենք թաքցնում ենք մեր ընտրացանկը էկրանի ձախ կողմում: Ես նաև անցում եմ ավելացրել՝ ձախ .2s անիմացիան էկրանից դուրս ելքի գործընթացի գեղեցկության համար:

Մեր վանդակը.

Թաքնված ընտրացանկ (ցուցադրում՝ ոչ մեկը; )

Մենք պարզապես այն դարձնում ենք անտեսանելի:

Բուրգերի կոճակ.

Btn-մենյու (գույնը՝ #fff; ֆոնի գույնը՝ #666; լիցք՝ 5px; դիրքը՝ ֆիքսված; վերև՝ 5px; ձախ՝ 5px; կուրսորը՝ ցուցիչ; անցումը՝ ձախ .23s; z-ինդեքս՝ 3; լայնությունը: 25px; -webkit-transform՝ translateZ(0); -webkit-backface-visibility՝ թաքնված; ) .btn-մենյուի ընդարձակում (ցուցադրում՝ բլոկ; բարձրություն՝ 5px; ֆոնի գույնը՝ #fff; լուսանցք՝ 5px 0 0; անցում բոլորը .1s գծային .23s; դիրքը՝ հարաբերական;) .btn-menu span.first (margin-top: 0;)

Կարող եք նաև դասավորել այն, ինչպես ցանկանում եք: Վերևի ձախ անկյունում ես պատրաստեցի մի պարզ մոխրագույն կոճակ՝ սպիտակ գծերով: Այստեղ ես նաև ավելացրեցի անիմացիաներ հենց կոճակի և գծերի համար (պարզապես գեղեցկության համար):

Այժմ, այսպես կոչված, «կախարդանք».

Hidden-menu-ticker:checked ~ .btn-menu (ձախ՝ 160px; ) .hidden-menu-ticker:checked ~ .hidden-menu (ձախ՝ 0;) .hidden-menu-ticker:checked ~ .btn-menu span.first ( -webkit-transform: rotate(45deg); վերև՝ 10px;) .hidden-menu-ticker:checked ~ .btn-menu span.second (անթափանցիկություն՝ 0;) .btn-menu span.third ( -webkit-transform. rotate (-45deg); վերև՝ -10px; )

CSS3 ընտրիչները թույլ են տալիս մեզ որոշել վանդակի վիճակը և կիրառել որոշակի հատկություններ հարևան տարրերի վրա՝ կախված դրանից՝ ստուգված ~ ։ IN այս օրինակըմենք ընտրացանկի կոճակը տեղափոխում ենք «ստուգված» մուտքագրով.hidden-menu-ticker:checked ~ .btn-menu 160 պիքսելով դեպի ձախ, մենյուը ձախ եզրով.hidden-menu-ticker:checked ~ .hidden-menu: . Մնացած ոճերը գրված են մենյուի կոճակների համար, որպեսզի սեղմելիս դրանք վերածվեն խաչի և հակառակը։

Այժմ մենք արագ և հեշտությամբ կստեղծենք ուղղահայաց մենյու, որը կողքից կկենդանանա, երբ սեղմեք դրա զանգի կոճակը:

ՔԱՅԼ 1. HTML ֆայլին մենյու ավելացնելը

Տեղադրեք html ֆայլկոդը ստորև՝

ՄԵՆՈՒ

Դուք կարող եք տեսնել, որ ընտրացանկի բոլոր կոճակների համար, ներառյալ հենց ընտրացանկի կոճակը, ավելացվել է դաս բաց կոճակ. Դա արվում է այնպես, որ մեր սկրիպտը, որը մենք կապելու ենք, կարողանա այս կոճակները սեղմելով կապել մենյուի բացման և փակման գործողություններին:

ՔԱՅԼ 2. Ոճերի ավելացում

Այժմ մենք մի փոքր ձևավորում ենք մեր ճաշացանկը և բոլոր կոճակները: Տեղադրեք ձեր մեջ cssֆայլի կոդը ստորև՝

Կոճակ (ֆոն՝ թափանցիկ, եզրագիծ՝ թափանցիկ, ուրվագիծ՝ ոչ մեկը, կուրսորը՝ ցուցիչ, լուսանցք՝ 50px 90px, տառատեսակի քաշը՝ թավ; տառաչափը՝ 24px; գույնը՝ #6c7d96; անցումը՝ 0,2 վրկ; ) կոճակ՝ սավառնել ( անցում. 0,2 վրկ; անթափանցիկություն՝ 0,7; ) կոճակ՝ ակտիվ ( անցումը՝ 0,2 վրկ; անթափանցիկություն՝ 0,4; ) նավարկություն (ֆոնի գույնը՝ #6c7d96; լայնությունը՝ 250 px, դիրքը՝ հարաբերական, ձախը՝ -999 px, անցումը՝ 0,5 վրկ հեշտ; :active (ֆոնի գույնը՝ #23252b; անցումը՝ 0,2 վրկ; ) nav ul li a (գույնը՝ սպիտակ; տեքստի ձևավորում՝ ոչ մեկը; տառատեսակի քաշը՝ թավ; տառաչափը՝ 21px; )

Կոդի ամենակարևոր մասը գրված է ընտրիչում նավ. Հարաբերական դիրքավորմամբ մենք թաքցնում ենք մեր ընտրացանկը էջի տեսանելի մասից դուրս՝ տալով բացասական արժեք ձախ.

Նշում. Կարող եք նաև օգտագործել ֆիքսված դիրքավորումը, եթե ոլորելիս ցանկը կպցնել էկրանին: Այն կաշխատի նույն կերպ, ինչ մեր տարբերակը:

ՔԱՅԼ 3. Սցենարի միացում

Ձեր js ֆայլում դուք պետք է տեղադրեք այս կոդը.

$(փաստաթուղթ).ready(function() ( $(".openButton").click(function() (if(!$(".openButton").hasClass("openDone")) ($(".openButton" ).addClass ("openDone"); $("nav").css ("ձախ", "0px"); ) else ($(".openButton").removeClass("openDone"); $("nav" ).css ("ձախ", "-999px"); ) )); /* Միացեք, երբ սկզբում ցանկանում եք մենյուն արձագանքել էկրանի որոշակի չափից հետո, որը ներառում է հարմարվողական դիզայնձեր ընտրացանկը $(window).resize(function() ( if ($(window).width() > 1200) ($("nav ul li").removeAttr("style"); ) )); */));

Իրադարձության սկրիպտի ստուգում սեղմելդասի հետ կոճակների համար բաց կոճակ,որը մենք տվել ենք նրանց նախկինում: Անմիջապես ստուգում է դասի ներկայությունը բացել Կատարված է:Կախված կոճակների համար այս դասի առկայությունից, տրված սցենարորոշում է՝ փակե՞լ ընտրացանկը, թե՞ բացել այն:

Ի դեպ, մենք այս դասարանը ոչ մի տեղ չենք գրանցել։ Այն հանդես է գալիս որպես մի տեսակ անջատիչ: Սա աշխատում է այնպես, որ կոճակը սեղմելիս ՄԵՆՈՒ«, դասի հետ բոլոր կոճակներին բաց կոճակդասը ավելացված է բացել Կատարված է:Եվ երբ օգտատերը կրկին սեղմում է մենյուի կոճակներից մեկի վրա, սցենարը հեռացնում է դասը բացված էայս կոճակները:

Համապատասխանաբար, այս դասը անհրաժեշտ է միայն սցենարի համար, որպեսզի այն հասկանա, թե որ պահերին է անհրաժեշտ ցուցադրել մենյուն, և որ պահերին փակել այն։ Եթե ​​դասը չավելացնեինք բացել Կատարված է,սցենարը սխալ կաշխատի, և ընտրացանկը, երբ սեղմում եք այն բացելու կոճակը, պարզապես բացվում և անմիջապես փակվում է:

Նշում. Ստորև մեկնաբանված կոդը պետք է ներառվի, եթե դուք օգտագործում եք այս սցենարը անիմացիայի համար հարմարվողական տարբերակձեր հորիզոնական մենյու: Այն լուծում է անհետացող մենյուի խնդիրը, երբ էկրանը մեծանում է:

Ամփոփում

Մենք ստեղծել ենք ամենապարզ անիմացիոն ընտրացանկը, որը հայտնվում է կողքին, երբ սեղմում եք կոճակը: Ինչպես տեսնում եք, այստեղ բացարձակապես ոչ մի բարդ բան չկա։ Դուք կարող եք բարելավել այս կոդը և փոփոխել այն, ինչպես ցանկանում եք: