≡×ՄԵՆՈՒ

• Windows 10
• Ինտերնետ, WiFi
• Օգտակար
• Windows 7
• Սխալներ

Հացի փշրանքների ոճավորում. Հացաթափեր վեբ դիզայնի մեջ. հավելված և օրինակներ. Breadcrumbs նշում

Նախորդ հոդվածում «Նավարկելով հացի փշրանքները եռանկյուններով CSS-ում» նկարագրված էր, թե ինչպես ստեղծել մենյու մաքուր CSS-ով՝ առանց գրաֆիկայի օգտագործման:

Մեթոդը լավ է բոլորի համար, բացառությամբ մի բանի՝ հին բրաուզերներում նման մենյուի աջակցությունը կասկածելի է: Բայց այս հոդվածը թարգմանելիս հղում է նշվել գրաֆիկայի միջոցով նավիգացիա ստեղծելու եղանակի մասին։

Հոդվածը գրվել է շատ վաղուց, բայց մեթոդը բացարձակապես գործում է։ Հոդվածի հեղինակը Veerle Pieters-ն է, իսկ գրառումն ինքնին կոչվում է «Simple scaleable CSS based breadcrumbs»: Ստորև տալիս եմ ոչ թե դրա անվճար թարգմանությունը, այլ անվճար վերապատմումը։

Մի քանի օր առաջ ես խնդիր ունեի ստեղծել հացի փշրանքների ոճով նավիգացիոն մենյու մի կայքի համար, որի վրա ես աշխատում էի: Չեմ կարծում, որ նման մենյու անհրաժեշտ է յուրաքանչյուր կայքի համար, բայց որոշ դեպքերում այն ​​շատ օգտակար է և գործնական։

Այնուամենայնիվ, այս օրինակը, կարծես, հիմք է, որը կարելի է ընդլայնել և կիրառել գործնականում: Մենյուը կստեղծվի սովորական պարբերակներով ցուցակի միջոցով

1

ul

.

Բայց նախ, եկեք նայենք այն նմուշին, որի հետ մենք կաշխատենք.

Ճաշացանկը բավականին պարզ է, ինչպես նաև կոդը, որով մենք կստեղծենք այն:

HTML կոդ - կետավոր ցուցակ ul

• տուն
• Հիմնական բաժին
• ենթաբաժին
• Ենթաբաժին
• Էջ, որում գտնվում եք հենց հիմա

Ցանկի բոլոր տարրերն ունեն հղումներ, բացառությամբ վերջինի՝ «Էջը, որում գտնվում եք հենց հիմա» (Էջը, որում գտնվում եք հենց հիմա): Ճաշացանկի վրա աշխատելիս մտածում էի՝ ցանկը ամենահարմար կառուցվածքն է մենյու ստեղծելու համար: Կարծում եմ, որ այս դեպքում ցուցակ օգտագործելը խիստ կանոն չէ, բայց ինձ թվում է, որ սա ամենաիմաստային և ճիշտ տարբերակն է։

CSS կոդ - մենյուի ոճերի ստեղծում

Մենք մենյուի համար սահմանում ենք ընդհանուր ոճեր՝ հեռացրեք մարկերները և վերակայեք ներդիրները Firefox, IE բրաուզերներում.

կատարել լողացող գույքի միջով հավասար է ամբողջ ցանկի բարձրությանը - . Եվ սահմանեք տեքստի գույնը: Հաջորդը, մենք տեղադրում ենք ֆոնային պատկեր, որը կտրված է դասավորությունից հղման համար: Դա անելու համար դուք պետք է կտրեք միայն «սլաքը».

… որը մենք «մղում ենք» դեպի աջ (100%) և տեղադրում ուղիղ ուղղահայաց (50%): Մենք նաև կտրում ենք հղումը դեպի աջ

1	լիցք-ձախ՝ 15px

, որը կպարունակի ֆոնային պատկերը (կտրված սլաքը).

Գրեթե ամեն ինչ արդեն արված է։ Մնում է ոճեր սահմանել հղման տեքստի համար: Հեռացրեք ստանդարտ ընդգծումը և փոխեք դրա գույնը.

.crumbs li a :link , .crumbs li a :visited ( text-decoration : none ; color : #777 ; )

1

:սավառնել

Եվ

1	:կենտրոնացում

. Մկնիկը սավառնելիս կամ ստեղնաշարի ֆոկուս ստանալիս հղման տեքստի գույնը կփոխվի՝ .crumbs li a :hover , .crumbs li a :focus (գույնը՝ #dd2c0d ; )

Մեր աշխատանքի արդյունքը ներկայացված է այստեղ.

Թարգմանչի նշում.

Հոդվածի հեղինակը հնարավորինս պարզեցրել է օրինակը և բուն ծածկագիրը, համապատասխանաբար, որքան հասկացա։ Փաստն այն է, որ մենյուի տարրերից յուրաքանչյուրի գծային հորիզոնական գրադիենտը հստակ տեսանելի է օրինակում: Այնուամենայնիվ, դա չի ցուցադրվել ծածկագրում: Դե, դա նշանակություն չունի, իսկապե՞ս խնդիր է CSS3-ում գծային գրադիենտ ստեղծելը: Առաջադրանքն ինքնին կատարված է:

Բարև սիրելի ընթերցողներ: Այս օրը մենք կսովորենք ստեղծագործել գեղեցիկ հացի փշրանքներ (breadcrumbs) սովորական կայքերի, ինչպես նաև WordPress բլոգերի համար. Խորհուրդ եմ տալիս չբաց թողնել այս պահը, քանի որ փշրանքները ցույց են տալիս ձեր հոդվածի կամ կայքի տեղեկատվության ուղին, ինչը մեծապես կհեշտացնի կայքի նավիգացիան, ինչպես նաև լրացուցիչ ներքին հղումները։

css

ul (լուսանցք՝ 0, լիցք՝ 0, ցուցակի ոճ՝ ոչ մեկը; )

Ամեն ինչ, առաջին ոչ անկարեւոր քայլն արվեց. Հիմա հավելենք գեղեցիկ տեսարանմեր փոքրիկներին։

Առաջին օրինակ

Տարրի բուն տեսքը բաղկացած կլինի երեք մասից, որոնք միացված են մեկ ամբողջ մասի։ Ավելի պարզ դարձնելու համար տես ստորև ներկայացված նկարը.

#breadcrumbs-one (ֆոն՝ #eee; եզրագծի լայնությունը՝ 1px; եզրագծի ոճը՝ ամուր; եզրագծի գույնը՝ #f5f5f5 #e5e5e5 #ccc; եզրագծի շառավիղը՝ 5px; տուփ-ստվերը՝ 0 0 2px rgba(0, 0,0,.2); վարարում՝ թաքնված; լայնությունը՝ 100%; ) #breadcrumbs-one li(float: ձախ; ) #breadcrumbs-one a( padding՝ .7em 1em .7em 2em; float՝ ձախ; text- զարդարանք՝ ոչ մեկը; գույն՝ #444; դիրք՝ հարաբերական; տեքստ-ստվեր՝ 0 1px 0 rgba(255,255,255,.5); ֆոնի գույն՝ #ddd; ֆոն-պատկեր՝ գծային գրադիենտ (դեպի աջ, #f5f5f5, # ddd); ) #breadcrumbs-one li:first-child a( padding-left: 1em; border-radius՝ 5px 0 0 5px; ) #breadcrumbs-one a:hover( background: #fff; ) #breadcrumbs-one a ::after, #breadcrumbs-one a::before( բովանդակությունը՝ ""; դիրքը՝ բացարձակ; վերև՝ 50%, լուսանցք՝ վերև՝ -1.5մ; եզրագիծ՝ 1.5մ ամուր թափանցիկ; եզրագիծ՝ ներքև՝ 1.5մ պինդ թափանցիկ; եզրագիծ-ձախ՝ 1em ամուր; աջ՝ -1em; ) #breadcrumbs-one a::after( z-index: 2; border-left-color՝ #ddd; ) #breadcrumbs-one a::before( եզրագիծ-ձախ-գույն՝ #ccc; աջ՝ -1.1em; z-ինդեքս՝ 1; ) #breadcrumbs-one a:hover::after( border-left-color: #fff; ) #breadcrumbs-one .current, #breadcrumbs-one .current:hover( font-weight: bold; background: none; ) # breadcrumbs-one .current::after, #breadcrumbs-one .current::prefore( բովանդակությունը՝ նորմալ; )

Երկրորդ օրինակ

Այստեղ, ինչպես առաջին օրինակում, տարրը բաղկացած է երեք մասից, որոնք միավորվում են մեկ մասում՝ օգտագործելով CSS։

#breadcrumbs-two( overflow՝ թաքնված; լայնությունը՝ 100%; ) #breadcrumbs-two li( float: ձախ; լուսանցք՝ 0 .5em 0 1em; ) #breadcrumbs-two a(ֆոն՝ #ddd; padding՝ .7em 1em ; բոց՝ ձախ; տեքստ-զարդարում՝ ոչ մեկը; գույն՝ #444; տեքստ-ստվեր՝ 0 1px 0 rgba(255,255,255,.5); դիրքը՝ հարաբերական; ) #breadcrumbs-two a:hover (ֆոն՝ #99db76; ) #breadcrumbs-two a::before( բովանդակությունը՝ ""; դիրքը՝ բացարձակ; վերև՝ 50%; լուսանցք՝ վերև՝ -1.5em; եզրագծի լայնություն՝ 1.5em 0 1.5em 1em; եզրագծի ոճը՝ ամուր; եզրագիծ- գույնը՝ #ddd #ddd #ddd թափանցիկ; ձախը՝ -1em; ) #breadcrumbs-երկու ա:hover::prefore( սահման-գույն՝ #99db76 #99db76 #99db76 թափանցիկ; ) #breadcrumbs-երկու a::after( բովանդակություն «"; դիրքը՝ բացարձակ; վերև՝ 50%, լուսանցք՝ վերև՝ -1.5 մ; եզրագիծ՝ 1.5 մ ամուր թափանցիկ; եզրագիծ՝ ներքև՝ 1.5 մ ամուր թափանցիկ; եզրագիծ՝ ձախ՝ 1մ կոշտ #ddd; աջ: -1em; ) #breadcrumbs-two a:hover::after( border-left-color: #99db76; ) #breadcrumbs-two .current, #breadcrumbs-two .current:hover( font-weight: bold; ֆոն՝ ոչ մի; ) #breadcrumbs-two .current::after, #breadcrumbs-two .current::prefore( բովանդակությունը՝ նորմալ; )

Երրորդ օրինակ

Երրորդ առարկայում տարրերը բաղկացած են երկու մասից.

#breadcrumbs-three( overflow: թաքնված; լայնությունը՝ 100%; ) #breadcrumbs-three li( float: ձախ; լուսանցք՝ 0 2em 0 0; ) #breadcrumbs-three a( padding: .7em 1em .7em 2em; float: ձախ; տեքստ-դեկորացիա՝ ոչ մեկը; գույնը՝ #444; ֆոն՝ #ddd; դիրքը՝ հարաբերական; z-ինդեքս՝ 1; տեքստ-ստվեր՝ 0 1px 0 rgba(255,255,255,.5); եզրագծի շառավիղ՝ .4em 0 0 .4em; ) #breadcrumbs-three a:hover( background՝ #abe0ef; ) #breadcrumbs-three a::after( background՝ #ddd; բովանդակությունը՝ ""; բարձրությունը՝ 2.5em; margin-top: -1.25em դիրք՝ բացարձակ; աջ՝ -1em; վերև՝ 50%, լայնություն՝ 2.5em; z-ինդեքս՝ -1; փոխակերպում՝ պտտել (45 աստիճան); եզրագծի շառավիղ՝ .4մ; ) #breadcrumbs-երեք a:hover: :after( background՝ #abe0ef; ) #breadcrumbs-three .current, #breadcrumbs-three .current:hover( font-weight՝ bold; background՝ none; ) #breadcrumbs-three .current::after( բովանդակությունը՝ նորմալ; )

Չորրորդ օրինակ

#breadcrumbs-four( overflow՝ թաքնված; լայնությունը՝ 100%; ) #breadcrumbs-four li( float՝ ձախ; լուսանցք՝ 0 .5em 0 1em; ) #breadcrumbs-four a(ֆոն՝ #ddd; padding՝ .7em 1em ; բոց՝ ձախ; տեքստ-զարդարում՝ ոչ մեկը; գույն՝ #444; տեքստ-ստվեր՝ 0 1px 0 rgba(255,255,255,.5); դիրքը՝ հարաբերական; ) #breadcrumbs-four a:hover (ֆոն՝ #efc9ab; ) #breadcrumbs-four a::fore, #breadcrumbs-four a::after( բովանդակությունը:""; դիրք:բացարձակ; վերև: 0;ներքևից:0; լայնությունը:1em; ֆոն: #ddd; վերափոխում: թեք (-10deg ); ) #breadcrumbs-four a::before( ձախ՝ -.5em; եզրագծի շառավիղ՝ 5px 0 0 5px; ) #breadcrumbs-four a:hover::before( background՝ #efc9ab; ) #breadcrumbs-four a ::after(աջ՝ -.5em; սահման-շառավիղ՝ 0 5px 5px 0; ) #breadcrumbs-four a:hover::after( background՝ #efc9ab; ) #breadcrumbs-four .current, #breadcrumbs-four .current :hover( font-weight՝ bold; background՝ none; ) #breadcrumbs-four .current::after, #breadcrumbs-four .current::prefore( բովանդակությունը՝ նորմալ; )

Օրինակ

Այսքանը, կարծում եմ, որ դրանք շատ ոճային ու միաժամանակ պարզ փշրանքներ են։ Ավելին, պատկերներ չկան, համապատասխանաբար ավելի արագ են բեռնվում։

Ոճերի բոլոր օրինակներն օգտագործում են պիտակը սավառնել, որը փոխում է տարրի գույնը երբ , այնպես որ, եթե ներկայացված գույներից ոչ մեկը ձեզ դուր չի գալիս, կարող եք հեշտությամբ փոխարինել այն ձեր սեփականով։

Հիմա ժամանակն է անցնելու երկրորդ մասին, այն է՝ օրինակներից մեկը կկցենք մեր WordPress բլոգին, գնանք։

Մաս 2. Ինչպես կցել Breadcrumb-ի տվյալները WordPress բլոգին

Եվ այսպես, նախ մենք պետք է ներբեռնենք plugin-ը Breadcrumb NavXT,դուք կարող եք ներբեռնել այն: Հավելվածը ներբեռնելուց և ակտիվացնելուց հետո դուք պետք է որոշ կարգավորումներ կատարեք.

Պարամետրերը ընտրանքների մեջ են: Ներդիրում Գեներալպետք է գտնել գիծը Հացի փշրանքների բաժանարարև հեռացնել ստանդարտ արժեքը, որը կա, այլ կերպ ասած, պետք է դատարկ թողնել դաշտը:

Ամեն ինչ, երբ plugin-ն ավարտված է, այժմ դուք պետք է ընտրեք այն դիզայնը, որը ձեզ ամենաշատը դուր է գալիս: Այս դեպքում օրինակը կլինի այս ոճը.

Սա երկրորդ օրինակըվերը նշված հոդվածում:

Մենք վերցնում և պարզապես պատճենում ենք այս ոճերը, այնուհետև ավելացնում դրանք style.cssՁեր թեման, ցանկացած վայրում, որը ձեզ ամենաշատն է դուր գալիս, խորհուրդ եմ տալիս առանձնացնել փշրանքների ոճերի սկիզբն ու վերջը, քանի որ եթե ապագայում ցանկանաք որևէ բան փոխել այնտեղ, կշփոթվեք։

Այժմ մենք պետք է ավելացնենք հացի փշրանքները անմիջապես բլոգում:

Բլոգի ադմինիստրատորում մենք գտնում ենք տեսքը , ապա խմբագիր, և ընտրիր single.php. Հաջորդը, ավելացրեք հետևյալը.

Կարևոր

Խնդրում ենք նկատի ունենալ, որ փշրանքները կանչելու գործառույթն ինքնին գտնվում է պիտակների միջև

որի id պաքսիմատ-երկու, մի մոռացեք փոխել այս ID-ն այն օրինակով, որն ավելացրել եք ոճերին: Օրինակ, եթե սա առաջին օրինակն է (վերը նշվածը), ապա այն պետք է լինի այսպես.

 

 

Գովազդատուներ | Կոնտակտներ