Հացի փշրանքների ոճավորում. Ցուցակների օգտագործումը. Ավելացրեք թափանցիկություն եզրագծով

Մեծ քանակությամբ նյութեր, ինչպիսիք են կայքի հոդվածները, հաճախ բաժանվում են առանձին էջերի՝ յուրաքանչյուր էջում 10-15 հոդվածով, ինչը հանգեցնում է կայքի ծանրաբեռնվածության նվազմանը։ Առանձին էջերի միջև անցումը կատարվում է դրանց համարակալման միջոցով, որտեղ յուրաքանչյուր թիվ ծառայում է որպես համապատասխան էջի հղում։ Հնարավոր է ցուցադրել բոլոր էջերը, դրանց որոշակի քանակություն կամ միայն հղումներ դեպի հաջորդ և նախորդ էջի: Որ տարբերակն ընտրել կախված է կայքի դիզայնից և ձեր նախասիրություններից: Մեկը հնարավոր ուղիներըհամարակալումը ներկայացված է Նկ. 2.

Բրինձ. 2. Էջավորում

Այս համարակալումն անելու համար մենք կրկին օգտագործում ենք պարզ ցուցակ, այժմ փեյջերի դասի հետ այս ցուցակի յուրաքանչյուր կետ կլինի հղում դեպի էջի: Ընթացիկ էջը ընդգծելու համար ավելացնենք ակտիվ դասը (օրինակ 2):

Օրինակ 2. Էջավորում

• 1
• 2
• 3
• 4
• 5
• 6

Տարրերի միջև գիծը կատարվում է տարրի եզրագծային հատկության միջոցով

. Քանի որ
բլոկի տարր է և զբաղեցնում է իրեն հասանելի ողջ լայնությունը, այն պետք է սահմանափակվի կամ սահմանելով լայնությունը, կամ, ինչպես ցույց է տրված օրինակում, տեղադրելով ցուցադրումը inline-block արժեքով: Գիծը գտնվում է թվերի տակ, ուստի ընտրացանկի տարրերը ցած են տեղափոխվել իրենց բարձրության կեսով:

Բոլոր շրջանակների չափերը ճշգրտորեն սահմանված են լայնության և բարձրության միջով, և, հետևաբար, երկու խնդիր կա: Առաջինն այն է, որ հղումը շատ ավելի փոքր է, քան ինքնին շրջանակը, և օգտվողը բաց կթողնի; երկրորդը - հղումը գտնվում է շրջանագծի վերևում, բայց ոչ դրա մեջտեղում: Առաջին խնդիրը լուծված է պարզապես՝ դուք պետք է բլոկավորեք հղումները, այնուհետև դրանք կզբաղեցնեն շրջանագծի ողջ լայնությունն ու բարձրությունը։ Միևնույն ժամանակ, հղումները մնում են քառակուսի և մի փոքր դուրս են գալիս գունավոր ֆոնից: Բայց սա տեսանելի չէ և նկատելի է դառնում միայն այն ժամանակ, երբ սավառնում եք հղման անկյուններից մեկի վրա։ Տեքստի հավասարեցումը կատարվում է օգտագործելով line-height հատկությունը, որի արժեքը նույնն է, ինչ տարրի բարձրությունը: Այս մեթոդը թույլ է տալիս հարթեցնել տեքստը տարրի բարձրության կեսին, և դա մեզ ապագայում օգտակար կլինի:

Մենյուի ստեղծում

Կայքի ընտրացանկը դրա միջով նավարկելու եղանակներից մեկն է: Ամենապարզ տարբերակը հորիզոնական կապերի մի շարք է, որոնք նման են հացի փշրանքների: Տարբերությունն այն է, որ հղումների միջև ցուցիչներ չկան (նկ. 3):



Բրինձ. 3. Հորիզոնական մենյու

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

• Եվ (օրինակ 3): Նրանք սերտորեն տեղավորվում են միմյանց հետ և ստեղծում են մեկ շերտի էֆեկտ:

  Օրինակ 3. Հորիզոնական մենյու

  • Առաջին կերակուր
  • Հիմնական դասընթացներ
  • Կոմպոտ

  Այս օրինակի գրադիենտն ավելացվում է գծային-գրադիենտ ֆունկցիայի միջոցով, իսկ ստվերն ավելացվում է՝ օգտագործելով box-shadow հատկությունը:

  Բացվող ընտրացանկ

  Մենյուի ավելի բարդ տեսակը կոչվում է բացվող մենյու: Երբ սլաքը սավառնում եք տարրերի վրա, հայտնվում է ենթացանկ, որը նախկինում անտեսանելի էր (նկ. 4); հենց որ ցուցիչը հեռանում է տեքստից, մենյուն նորից թաքնվում է:

  

  Բրինձ. 4. Բացվող մենյուի տեսք

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

• կծառայի որպես ենթամենյու: Եթե ​​ենթացանկը պարտադիր չէ, ապա թողեք միայն մեկ տարր
• , Ա
  մի ավելացրեք դրան: Յուրաքանչյուր կետի կառուցվածքը հետևյալն է.
  • Ռուսական խոհանոց
    • տավարի միս ստրոգանով
    • Սագ խնձորով
    • Կրուպենիկ Նովգորոդ
    • Խեցգետին ռուսերեն

  Այժմ մենք պետք է տարբերենք ոճը տարբեր տարրերի համար

  • մենյուի առաջին և երկրորդ մակարդակի տարրերի ոճը սահմանելու համար: Եթե ​​դուք պարզապես նշեք li ընտրիչը, ապա ոճը կկիրառվի ընդհանուր առմամբ բոլոր տարրերի վրա: Այսպիսով, մենք օգտագործում ենք .menu > li ընտրիչը, այն կիրառում է ոճը միայն տարրերի վրա
  • առաջին մակարդակ. Արդյունքում, մեր հորիզոնական մենյուի ոճը մի փոքր փոխվում է:

    /* Զրո լիցքավորում և հեռացրեք նշիչները ցուցակներից */ .menu, .menu ul ( list-style: none; margin: 0; padding: 0; ) .menu (background: linear-gradient(to bottom, #fff, #f1f2f2 ); /* Գրադիենտ */ եզրագիծ՝ 1px կոշտ #999; /* Եզրագծի ընտրանքներ */ լիցք՝ 0 5px; /* Լուսանցքներ */ տառատեսակ՝ 14px Arial, sans-serif; /* Տառատեսակի ընտրանքներ */ տուփ-ստվեր՝ 0 2px 5px rgba(0,0,0,0.2); /* Մենյու ստվեր */ ) .menu > li (ցուցադրում՝ inline-block; /* Հորիզոնական շարել */ եզրագծի աջ՝ 1px կոշտ #fff; /* Սպիտակ տող աջ կողմում */ դիրքը՝ հարաբերական; /* Հարաբերական դիրքավորում */ ) մենյու a ( տեքստի ձևավորում՝ ոչ մեկը; /* Հեռացնել ընդգծումը */ գույնը՝ #4c4c4c; /* Հղման գույնը */ ցուցադրում՝ արգելափակում; /* Արգելափակել հղումները */ ) .menu > li > a ( լիցք՝ 10px 15px; /* Լուսանցքներ */ եզրագիծ՝ աջ՝ 1px կոշտ #d8d8d8; /* Աջ մոխրագույն գիծ */ դիրքը՝ հարաբերական; /* Հարաբերական դիրքավորում */ z- ինդեքս՝ 3; /* Նկարել այլ տարրերի վրա */) .menu ul (ցուցադրել՝ ոչ մեկը; /* Թաքցնել ենթացանկը */)

    Մենք թաքցնում ենք ենթամենյուն ցուցադրման հատկության միջոցով, արդյունքում մենյուը պետք է նման լինի Նկ. 3. Նաև ավելացված է զրոյական արժեքներ ցուցակների համար, սա օգտակար կլինի մեզ համար ենթակետեր ավելացնելիս, գումարած հարաբերական դիրքավորումը ներառված է, z-index-ը առանց դրա չի աշխատի: Եվ դա մեզ անհրաժեշտ է որոշ տարրերի մյուսների վրա ճիշտ պարտադրելու համար։

    Դուք կարող եք ժամանակավորապես միացնել ենթամենյուների ցուցադրումը և հարմարեցնել դրանց տեսքը:

    Մենյու ul ( դիրքը՝ բացարձակ; /* Բացարձակ դիրքավորում */ ցուցադրում՝ ոչ մեկը; /* Թաքցնել ենթացանկը */ լայնությունը՝ 200 px; /* ենթացանկի լայնությունը */ ֆոնը՝ #fff; /* Ֆոնի գույնը */ տուփ-ստվերը՝ 0 0 10px #666; /* Ստվերային ընտրանքներ */ ) .menu ul a ( padding՝ 5px 10px; /* Margins */ ) .menu ul a:hover (ֆոն՝ #008df2; /* Ֆոնի գույնը */ գույնը՝ #fff ; /* Տեքստի գույնը */)

    Մնում է ցուցադրել ենթացանկը, երբ մկնիկը սավառնում եք ցանկի տարրերի վրա: Դա անելու համար մենք օգտագործում ենք :hover կեղծ դասը՝ այն ավելացնելով li-ին։

    Մենյու li:hover ul (ցուցադրում՝ արգելափակում; )

    Այս ընտրիչն ասում է, որ ոճը պետք է կիրառվի տարրի վրա։

    , այս դեպքում ցուցադրել միայն այն ժամանակ, երբ մկնիկի ցուցիչը գտնվում է տարրի վրայով
    • դասի մենյուով կոնտեյների ներսում:

      Դրանից հետո մեր ընտրացանկը կաշխատի և կցուցադրի ենթամենյուն, որտեղ այն հասանելի է: Կան վերջին դեկորատիվ շոշափումները՝ կապված ստվերների և դրանց ճիշտ ծածկույթի հետ։ Առաջին մակարդակի մենյուի տարրերի տակ ստվերը ճիշտ ցուցադրելու համար ::before-ի միջոցով ստեղծեք դատարկ կեղծ տարր, դրա համար ստվեր դրեք և դրեք այն հղման տակ (այստեղ z-ի ինդեքսն է. և օգտակար):

      Մենյու > li:hover::before ( բովանդակություն՝ ""; /* Ստեղծեք դատարկ կեղծ տարր */ վերևում՝ 0; ձախ՝ 0; աջ՝ 0; ներքևում՝ 0; /* Նույն չափը, ինչ ընտրացանկի տարրը */ տուփ- ստվեր՝ 0 5px 10px #666; /* Ստվերային ընտրանքներ */ դիրքը՝ բացարձակ; /* Բացարձակ դիրքավորում */ )

      Վերջնական կոդը ներկայացված է օրինակ 4-ում:

      Օրինակ 4 - Բացվող ընտրացանկ

      • Ռուսական խոհանոց
        • տավարի միս ստրոգանով
        • Սագ խնձորով
        • Կրուպենիկ Նովգորոդ
        • Խեցգետին ռուսերեն
      • ուկրաինական սնունդ
        • Վարենիկի
        • Խորոված Խարկովում
        • Կապուստնյակ Չեռնիգով
        • Պոտապցի լոլիկով
      • Կովկասյան խոհանոց

      Ողջույններ. Breadcrumbs-ը բավականին օգտակար բլոկ է ցանկացած վեբկայքում, քանի որ այն թույլ է տալիս տեսնել դեպի այն էջը, որտեղ այժմ գտնվում եք ամբողջ ճանապարհը: Իսկ այսօր ես ձեզ կասեմ, թե ինչպես պատրաստել հացի փշրանքները css-ով: Ոչ թե ստեղծել, այն էլ դասավորել։ Ընդհանրապես տարբերակները շատ են, երկուսին կանդրադառնամ.

      Պարզ դիզայնի տարբերակ՝ առանց նկարի

      html կոդը նմանակում է հացի փշրանքները: Թող լինի այսպես.

      Սկզբունքորեն, դուք կարող եք պարզապես դնել անկյունային բրա, բայց այդ դեպքում գծի հաստությունը վերահսկելու միջոց չի լինի: Ես առաջարկում եմ դա անել այլ կերպ՝ փոխակերպումների օգնությամբ։ Ահա այն կոդը, որը դա կանի.

      Cumbs1 a:not(:last-child):after(
      բովանդակությունը՝ «»;
      ցուցադրում: inline-block
      լայնությունը՝ 5px
      բարձրությունը՝ 5px;
      եզրագծեր՝ 2px պինդ սև;
      եզրագիծ-աջ՝ 2px պինդ սև;
      փոխակերպում: պտտել (45 աստիճան);
      լուսանցք-ձախ՝ 5px
      }
      .cumbs1 a:hover(
      գույնը `նարնջագույն;
      }

      Միգուցե ձեզ համար դա կլինի բարդ ընտրիչներ, ապա ստուգեք այս հոդվածը: Ներքևի տողը հետևյալն է. կեղծ տարրը օգտագործելով (այն մասին, թե ինչ է և ինչպես օգտագործել - ) յուրաքանչյուր հղման վերջում ավելացնում է մեր բաժանարարը: Այն ձևավորվում է երկու շրջանակի միջոցով և պտտվում է 45 աստիճանով: Մենք նաև նարնջագույն գույն ենք ավելացնում սավառնող հղումներին: Այստեղ, սկզբունքորեն, և ամբողջ դիզայնը:

      Մեկ այլ դիզայնի տարբերակ `նկարով

      Այս դեպքում հացի փշրանքները ավելի հետաքրքիր տեսք կունենան, այսպես.
      
      Դա անելու համար մեզ անհրաժեշտ է պատկեր և մի քանի css ոճ.

      Քամբս 2 (
      ֆոն `նարնջագույն;
      առավելագույն լայնությունը՝ 250px
      }
      .cumbs2 ա(
      ցուցադրում: inline-block
      լիցք՝ 7px 0
      գույնը՝ #000;
      }
      .cumbs2 a:not(:last-child)(
      ֆոն՝ url(arrow.png) առանց կրկնության 100% 50%;
      padding-աջ՝ 33px;
      }

      html կոդըՉեմ մեջբերում, քանի որ դա նույնն է, ինչ առաջին դեպքում։ Որտեղի՞ց սկսել այստեղ: Նախ, մենք սահմանում ենք ամբողջ բլոկի ֆոնի գույնը և չափը հացի փշրանքներով: Այնուհետև մենք սահմանում ենք հղումների ընդհանուր ոճերը՝ բլոկ-ինլայն տեսակը, վերևում և ներքևում ներքևը և գույնը:

      Հաջորդ քայլը ամենահետաքրքիրն է. օգտագործելով ոչ կեղծ դասը, ընտրեք բլոկի բոլոր հղումները, բացառությամբ վերջինի, և դրանց համար սահմանեք ֆոնային պատկեր arrow.png , առանց կրկնության, ֆոնի դիրքը մեջտեղում: բարձրությունը և ամենավերջում մեկ կապի լայնությամբ: Առաջին երկու հղումներին անհրաժեշտ է աջ կողմում գտնվող ներքին նահանջը՝ պարզապես նկարն այնտեղ տեղադրելու համար: Եթե ​​այն չլիներ, նկարը կհայտնվեր տեքստի մեջ:

      Ինչպես է աշխատում ոչ կեղծ դասը, կարծում եմ արդեն կռահեցիք. այն ընտրում է բոլոր տարրերը, բացառությամբ այն, ինչ նշված է փակագծերում: Եթե ​​ինչ-որ բան, ապա ապագայում ես կգրեմ ևս մեկ կարճ գրառում կեղծ դասակարգի հետ աշխատելու մասին:not , որտեղ ամեն ինչ ավելի պարզ կլինի։ Դե, ահա 2 պարզ պանրի ձևավորում, որոնք կարող եք օգտագործել ձեր սեփականը պատրաստելու համար:

      Այս ձեռնարկում դուք կսովորեք, թե ինչպես ստեղծել հացի փշրանքներ Bootstrap 3-ում և 4-ում:

      Հացի փշրանքների նշում

      Նավիգացիոն շղթաները («breadcrumbs», breadcrumbs) նավիգացիոն սխեմա է, որը ցույց է տալիս օգտատիրոջ ներկայիս դիրքը կայքում։ Դրանք օգտագործվում են հիերարխիկորեն կազմակերպված տեղեկատվության ցուցադրման համար: Օրինակ, առցանց խանութում հացի փշրանքները սովորաբար շղթայված հատվածներ են: Նրանց օգնությամբ օգտատերը կարող է որոշել, թե որ բաժնում է նա այժմ գտնվում, և նրանք նաև թույլ են տալիս գնալ ավելի բարձր մակարդակների բաժիններ, այսինքն. տրամադրել կայքի կառուցվածքում նավարկելու մեկ այլ միջոց:

      Bootstrap-ում հացի փշրանքները պարզապես պատվիրված ցուցակներ են դասի հացի փշրանքներով: Ցուցակի բաժանիչն ավտոմատ կերպով ավելացվում է CSS-ով (bootstrap.min.css) հետևյալ դասի միջոցով.

      Հացի փշրանքներ > li + li: առաջ (գույնը՝ #cccccc; բովանդակությունը՝ «/»; լիցք՝ 0 5px; )

      Breadcrumb օրինակ Bootstrap-ով:

      1. տուն
      1. տուն
      2. Պրոցեսորներ
      1. տուն
      2. Պրոցեսորներ
      3. Intel
      Styling Breadcrumbs-ում Bootstrap-ում

      Եվս մեկ օրինակ.

      1. տուն
      2. 2013
      3. նոյեմբեր
      Հաց փշրանքներ՝ արխիվացված տեղեկատվությունը նավարկելու համար

      Պաքսիների ոչ ստանդարտ դիզայն

      Դիտարկենք հացաթխման ձևավորման հետևյալ տարբերակը ստեղծելու օրինակ.

      Կայքում հացի փշրանքների ձևավորման օրինակ

      Բաց փշրանքների ստեղծման գործընթացը բաղկացած է HTML կառուցվածքի և ոճերի (CSS) մշակումից:

      Breadcrumb CSS:

      /* breadcrumbs */ #breadcrumb ( list-style: none; display: inline-block; padding-left: 0px; ) #breadcrumb .icon ( font-size: 14px; ) #breadcrumb li (float: ձախ; ) # breadcrumb li a (գույն՝ #fff; էկրան՝ բլոկ; ֆոն՝ #cc2eaa; տեքստի ձևավորում՝ ոչ մեկը; դիրքը՝ հարաբերական; բարձրություն՝ 34px; տողերի բարձրություն՝ 34px; լիցք՝ 0 10px 0 5px; տեքստի հավասարեցում՝ կենտրոնում; լուսանցք-աջ՝ 23px; -webkit-user-select՝ ոչ մեկը; -moz-user-select՝ ոչ մեկը; -ms-user-select՝ ոչ մեկը; user-select՝ ոչ մեկը; -ձախ՝ 15px; -moz-border-radius՝ 4px 0 0 4px; -webkit-border-radius՝ 4px; border-radius՝ 4px 0 0 4px; ) #breadcrumb li:first-child a:before ( եզրագիծը՝ ոչ մեկը ;) #breadcrumb li:last-child a ( padding-right: 15px; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0; border-radius: 0 4px 4px 0; ) # breadcrumb li:last-child a:after ( եզրագիծը՝ ոչ մեկը; ) #breadcrumb li a:fore, #breadcrumb li a:after ( բովանդակությունը՝ ""; դիրքը՝ բացարձակ; վերև՝ 0; եզրագիծը՝ 0 կոշտ #cc2eaa; եզրագծի լայնությունը՝ 17px 10px; լայնությունը՝ 0; բարձրությունը՝ 0; ) #breadcrumb li a:before ( ձախ՝ -20px; եզրագծի ձախ գույնը՝ թափանցիկ; ) #breadcrumb li a:after ( ձախ՝ 100%; եզրագծի գույնը՝ թափանցիկ; եզրագծի ձախ գույնը՝ #cc2eaa; ) #breadcrumb li a:hover ( background-color՝ #a22587; ) #breadcrumb li a:hover:fore ( border-color՝ #a22587; border-left-color: transparent; ) #breadcrumb li a:hover:after ( եզրագիծ -left-color՝ #a22587; ) #breadcrumb li a:active ( background-color՝ #a22587; ) #breadcrumb li a:active:fore (սահմանի գույնը՝ #a22587; եզրագծի ձախ գույնը՝ թափանցիկ; ) # breadcrumb li a:active:after ( border-left-color: #a22587; ) #breadcrumb li. ընթացիկ a (ցուցիչ-իրադարձություններ՝ ոչ մեկը; կուրսորը՝ անթույլատրելի; զտիչ՝ ալֆա (անթափանցիկություն=65); -webkit-box -ստվեր՝ չկա; տուփ-ստվեր՝ չկա; անթափանցություն՝ .65;)

      Գույնի փոփոխությունները կատարվում են համապատասխան CSS հատկությունների արժեքների խմբագրմամբ:

      HTML նշում.

      1. տուն
      2. Աքսեսուարներ
      3. Գործընթացներ
      4. Intel

      Ընթացիկ տարրի պահպանումը (եթե այն կօգտագործվի շղթայում) կատարվում է ընթացիկ դասը li տարրին ավելացնելով։

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

      HTML նշում

      Նշումը պարզ է և նվազագույն: Այն հիմնված է չպատվիրված ցանկի վրա:

      • Lorem ipsum
      • Vivamus nisi eros
      • Nulla sed lorem risus
      • Nam iaculis commodo
      • Դու այստեղ ես

      css

      Նախ, եկեք մի փոքր վերականգնենք 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( բովանդակությունը՝ նորմալ; )

      CSS3 Breadcrumb Design-ի առավելությունները

      • Պատկերներ չկան, այնպես որ պարզապես թարմացրեք և պահպանեք:
      • Հեշտ է մասշտաբավոր:
      • Հետընթաց համատեղելի հին բրաուզերների հետ:

      Նախորդ հոդվածում «Նավարկելով հացի փշրանքները եռանկյուններով 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-ում գծային գրադիենտ ստեղծելը: Առաջադրանքն ինքնին կատարված է: