A large amount of material, such as site articles, is often divided into separate pages of 10-15 articles per page, which leads to a reduction in site loading. The transition between individual pages is done through their numbering, where each number serves as a link to the corresponding page. It is possible to display all pages, a certain number of them, or only links to the next and previous pages. Which option to choose depends on the site design and your preferences. One of possible ways numbering is shown in Fig. 2.

Rice. 2. Page numbering

To do this numbering, we again use a simple list, now with the pager class, each item in this list will be a link to the page. To highlight the current page, add the active class (example 2).

Example 2: Page numbering

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

The line between points is made through the border-bottom property for the element

. Because the
- this is a block element and takes up the entire width available to it, it must be limited either by setting width , or, as shown in the example, by setting display to inline-block . The line appears under the numbers, so the menu items are shifted down by half their height.

The sizes of all circles are set precisely, through width and height, which raises two problems. The first is that the link is much smaller than the circle itself and the user will miss; the second - the link is located at the top of the circle, but not in its middle. The first problem can be solved simply - you need to make the links block-level, then they will occupy the entire width and height of the circle. At the same time, the links remain square and extend slightly beyond the colored background. But this is not visible and only becomes noticeable when you hover the cursor over one of the corners of the link. Text alignment is done using the line-height property, the value of which matches the height of the element. This method allows you to align the text to the middle of the element’s height and will be useful to us later.

Creating a Menu

The menu on the site is one of the ways to navigate it. The simplest option is a set of horizontal links that resemble bread crumbs in appearance. The difference is that there are no pointers between the links (Fig. 3).



Rice. 3. Horizontal menu

To create such a menu, we apply the principles we used in previous examples, but for variety we will make decorative changes. The menu has a slight gradient, a faint shadow underneath, and menu items are separated by a vertical line. The line itself is non-standard and consists of gray and white stripes, so we will separately add our own line to the elements

• And (example 3). They fit tightly to each other and create the effect of a single strip.

  Example 3. Horizontal menu

  • First meal
  • Second courses
  • Compote

  The gradient in this example is added using the linear-gradient function, and the shadow is added using the box-shadow property.

  Dropdown menu

  A more complex type of menu is called a drop-down menu. When you hover the pointer over the items, a submenu appears, previously invisible (Fig. 4); As soon as the pointer leaves the text, the menu hides again.

  

  Rice. 4. Dropdown menu view

  This type of menu is quite complicated to layout, so let’s look at it in more detail. First, we make a nested list - the items of the first list serve as the text of the main menu, the second list is inside the element

• will serve as a submenu. If a submenu is not required, then leave only one element
• , A
  We don’t add it to it. The structure of each item is as follows.
  • Russian kitchen
    • Beef Stroganoff
    • Goose with apples
    • Krupenik Novgorod
    • Crayfish in Russian

  Now we need to differentiate the style for different elements

  • to set the style for the first and second level menu items. If you simply specify the li selector, the style will be applied to all items in general. So we use the .menu > li selector, it only applies the style to the elements
  • first level. As a result, the style for our horizontal menu changes a little.

    /* Zero indents and remove markers from lists */ .menu, .menu ul ( list-style: none; margin: 0; padding: 0; ) .menu ( background: linear-gradient(to bottom, #fff, #f1f2f2 ); /* Gradient */ border: 1px solid #999; /* Frame parameters */ padding: 0 5px; /* Margins */ font: 14px Arial, sans-serif; /* Font parameters */ box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Shadow under the menu */ .menu > li ( display: inline-block; /* Align horizontally */ border-right: 1px solid #fff; /* White line on the right */ position: relative; /* Relative positioning */ ) .menu a ( text-decoration: none; /* Remove underlining */ color: #4c4c4c; /* Link color */ display: block; /* Block links */ ) .menu > li > a ( padding: 10px 15px; /* Margins */ border-right: 1px solid #d8d8d8; /* Gray line on the right */ position: relative; /* Relative positioning */ z-index : 3; /* Display on top of other elements */ ) .menu ul ( display: none; /* Hiding the submenu */ )

    We hide the submenu through the display property; as a result, the menu should look like shown in Fig. 3. Resetting of values ​​for lists has also been added, this will be useful to us when adding sub-items, plus relative positioning is involved, without it z-index will not work. And we need it to correctly layer some elements on top of others.

    You can temporarily enable the display of submenus and customize their appearance.

    Menu ul ( position: absolute; /* Absolute positioning */ display: none; /* Hiding the submenu */ width: 200px; /* Submenu width */ background: #fff; /* Background color */ box-shadow: 0 0 10px #666; /* Shadow options */ ) .menu ul a ( padding: 5px 10px; /* Margins */ ) .menu ul a:hover ( background: #008df2; /* Background color */ color: #fff; /* Text color */ )

    All that remains is to display the submenu when you hover the mouse over the menu items. To do this, we use the :hover pseudo-class, adding it to li.

    Menu li:hover ul ( display: block; )

    This selector says that the style should be applied to the element

    , in this case, display it only when the mouse pointer is over the element
    • inside a container with a menu class.

      After this, our menu will work and display submenus where it exists. The final decorative touches remain related to the shadows and their correct application. To correctly display the shadow under the first-level menu items, create an empty pseudo-element using ::before , set a shadow for it, and place it under the link (here is the z-index for and came in handy).

      Menu > li:hover::before ( content: ""; /* Create an empty pseudo-element */ top: 0; left: 0; right: 0; bottom: 0; /* Size matches the menu item */ box-shadow: 0 5px 10px #666; /* Shadow parameters */ position: absolute; /* Absolute positioning */ )

      The final code is demonstrated in Example 4.

      Example 4: Dropdown Menu

      • Russian kitchen
        • Beef Stroganoff
        • Goose with apples
        • Krupenik Novgorod
        • Crayfish in Russian
      • Ukrainian food
        • Vareniki
        • Roast in Kharkov style
        • Chernigov cabbage
        • Potaptsi with tomatoes
      • Caucasian kitchen

      Breadcrumb navigation helps site visitors find their way around hierarchical structure documents and find the way to the top level. Therefore, if the site contains a large number of documents, then it must be provided with “breadcrumbs”. This lesson will present CSS code for creating various design options for such a necessary navigation tool.

      HTML markup

      The markup is simple and minimal. It is based on an unordered list.

      • Lorem ipsum
      • Vivamus nisi eros
      • Nulla sed lorem risus
      • Nam iaculis commodo
      • Are you here

      CSS

      First, let's do a little CSS reset for our unordered list:

      Ul( margin: 0; padding: 0; list-style: none; )

      We will use pseudo-elements to design our breadcrumbs.

      First example

      This example uses a very simple technique. A triangle is created on the frame on the right using pseudo-elements placed one above the other. The dark triangle is offset to create a frame effect.

      

      #breadcrumbs-one( background: #eee; border-width: 1px; border-style: solid; border-color: #f5f5f5 #e5e5e5 #ccc; border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0,0,.2); overflow: hidden; width: 100%; ) #breadcrumbs-one li( float: left; ) #breadcrumbs-one a( padding: .7em 1em .7em 2em; float: left; text- decoration: none; position: relative; text-shadow: 0 1px 0 rgba(255,255,255,.5); background-color: linear-gradient(to right, #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( content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em; ) #breadcrumbs-one a::after( z-index: 2; border-left-color: #ddd; ) #breadcrumbs-one a::before( border-left-color: #ccc; right: -1.1em;

      z-index: 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::before( content: normal; )

      

      CSS shapes are built using pseudo-elements placed before and after an element.

      The border-radius property rounds the corners of rectangles and squares. The square is turned to make a diamond.

      

      #breadcrumbs-three( overflow: hidden; width: 100%; ) #breadcrumbs-three li( float: left; margin: 0 2em 0 0; ) #breadcrumbs-three a( padding: .7em 1em .7em 2em; float: left; text-decoration: #444; position: relative; text-shadow: 0 1px 0 rgba(255,255,255,.5); 0 .4em; ) #breadcrumbs-three a:hover( background: #abe0ef; ) #breadcrumbs-three a::after( background: #ddd; content: ""; height: 2.5em; margin-top: -1.25em ; position: absolute; top: 50%; z-index: -1; border-radius: .4em; :after( background: #abe0ef; ) #breadcrumbs-three .current, #breadcrumbs-three .current:hover( font-weight: bold; background: none; ) #breadcrumbs-three .current::after( content: normal; )

      Using pseudo-elements, two rectangles are added. Then they round the corners.

      

      #breadcrumbs-four( overflow: hidden; width: 100%; ) #breadcrumbs-four li( float: left; margin: 0 .5em 0 1em; ) #breadcrumbs-four a( background: #ddd; padding: .7em 1em ; float: left; text-decoration: #444; text-shadow: 0 1px 0 rgba(255,255,255,.5); #breadcrumbs-four a:hover( background: #efc9ab; ) #breadcrumbs-four a::before, #breadcrumbs-four a::after( content:""; position:absolute; top: 0; bottom: 0; width: 1em; background: #ddd; transform: skew(-10deg ); ) #breadcrumbs-four a::before( left: -.5em; border-radius: 5px 0 0 5px; ) #breadcrumbs-four a:hover::before( background: #efc9ab; ) #breadcrumbs-four a ::after( right: -.5em; border-radius: 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::before( content: normal; )

      Benefits of CSS3 Breadcrumb Design

      • No images, so easy to update and maintain.
      • Easily scalable.
      • Backwards compatible with older browsers.
      A beautiful and original selection of bread crumbs made in flat design, using CSS3, to a different palette of shades. Of course, the visibility of navigation, in the form of buttons, greatly helps both the site user and guests, this is to navigate the Internet resource where you can navigate key phrases, what will be shown to us. But it also fits perfectly with the style; more and more you can see that some people install it on the forum module, not to mention the modern design.

      If you think you have a lot of material, then it is recommended to enable this functionality. The list style will not be to avoid the list black dot or other style that is the default. Since it distributes it into categories and certainly modules, starting with home page, and it's all presented in style. In this material you see a selection that is made in a similar style, it is in a flat style.

      They are completely different in shape, which someone won’t even need to edit to fit their design, since it will fit perfectly into it. Now we will use css code to make the first list anchor and set the last child anchor to make it default so that the tringle does not appear in the first child anchor for the left side anchor and the last child anchor for the right side.

      Making bread crumbs

      1. In a light yellow shade:

      2. Light palette with green tones:

      3. In raspberry color

      4. Made in a blue palette:

      This will be a simple straight list with background and padding and some other styles. After that, I'll create a triangular structure on the right side of each list anchor using CSS, playing with the broder properties.

      As you can see in the demo version, when we point any list anchor at the breading chests, it gives the effect that will mean visited or are in this section.

      Or we can think of its effect as making it active as an active breadcrumb. You can say these breadcrumbs css are only breadcrumbs because I will only use css and css3 to make these breadcrumbs.

      Let's start installation:

      
      

      
      
      • № 1
      
      
      • № 1
      
      
      • № 3
      
      
      • № 4
      
      
      • № 5
      
      

      
      
      
      
      
      

      
      
      • Section 1
      
      
      • Section 2
      
      
      • Section 3
      
      
      • Section 4
      
      
      • Section 5
      
      

      
      
      
      
      
      

      
      
      • ZOR 1
      
      
      • ZOR 2
      
      
      • ZOR 3
      
      
      • ZOR 4
      
      
      • ZOR 5
      
      

      
      
      
      
      
      

      
      
      • Click 1
      
      
      • Click 2
      
      
      • Click 3
      
      
      • Click 4
      
      
      • Click 5
      
      

      
      
      
      CSS

      The list style will not be to avoid the list black dot or other style that is the default. Each list inline div will be list-inline, to make it a horizontal list using css display: list-inline.
      

      #breadcrumb-isanchogives1 (
      text-align: center;
      margin-top:30px;
      }

      #breadcrumb-isanchogives1 ul (
      list-style: none;
      display: inline-table;
      }
      #breadcrumb-isanchogives1 ul li (
      display: inline;
      }

      #breadcrumb-isanchogives1 ul li a (
      display: block;
      float: left;
      height: 50px;
      background: #ffd928;
      text-align: center;
      padding: 30px 40px 0 80px;
      position: relative;
      margin: 0 10px 0 0;

      Font-size: 20px;
      text-decoration: none;
      color: #fff;

      }
      #breadcrumb-isanchogives1 ul li a:after (
      content: "";
      
      border-left: 40px solid #ffd928;
      z-index: 1;

      #breadcrumb-isanchogives1 ul li a:before (
      content: "";
      border-top: 40px solid transparent;
      border-bottom: 40px solid transparent;
      
      }

      #breadcrumb-isanchogives1 ul li:first-child a (
      }
      #breadcrumb-isanchogives1 ul li:first-child a:before (
      display: none;
      }

      #breadcrumb-isanchogives1 ul li:last-child a (
      padding-right: 80px;
      }
      #breadcrumb-isanchogives1 ul li:last-child a:after (
      display: none;
      }

      #breadcrumb-isanchogives1 ul li a:hover (
      background: #ff9a2d;
      }
      #breadcrumb-isanchogives1 ul li a.wesove-readcrum(
      background: #ff9a2d;
      }
      #breadcrumb-isanchogives1 ul li a:hover:after (
      border-left-color: #ff9a2d;
      }
      #breadcrumb-isanchogives1 ul li a.wesove-readcrum:after (
      border-left-color: #ff9a2d;
      }

      #breadcrumb-isanchogives2 (
      text-align: center;
      margin-top:30px;
      }

      #breadcrumb-isanchogives2 ul (
      list-style: none;
      display: inline-table;
      }
      #breadcrumb-isanchogives2 ul li (
      display: inline;
      }

      #breadcrumb-isanchogives2 ul li a (
      display: block;
      float: left;
      height: 50px;
      background: #56e9ae;
      text-align: center;
      padding: 30px 40px 0 80px;
      position: relative;
      margin: 0 10px 0 0;

      Font-size: 20px;
      text-decoration: none;
      color: #fff;

      }
      #breadcrumb-isanchogives2 ul li a:after (
      content: "";
      border-top: 40px solid transparent;
      border-bottom: 40px solid transparent;
      border-left: 40px solid #56e9ae;
      position: absolute; right: -40px; top: 0;
      z-index: 1;

      #breadcrumb-isanchogives2 ul li a:before (
      content: "";
      border-top: 40px solid transparent;
      border-bottom: 40px solid transparent;
      border-left: 40px solid #f2f2f2;
      position: absolute; left: 0; top: 0;
      }

      #breadcrumb-isanchogives2 ul li:first-child a (
      }

      #breadcrumb-isanchogives2 ul li:last-child a (
      padding-right: 80px;
      }

      #breadcrumb-isanchogives2 ul li a:hover (
      background: #49c593;
      }
      #breadcrumb-isanchogives2 ul li a.wesove-readcrum (
      background: #49c593;
      }
      #breadcrumb-isanchogives2 ul li a:hover:after (
      border-left-color: #49c593;
      }
      #breadcrumb-isanchogives2 ul li a.wesove-readcrum:after (
      border-left-color: #49c593;
      }

      #breadcrumb-isanchogives3 (
      text-align: center;
      margin-top:30px;
      }

      #breadcrumb-isanchogives3 ul (
      list-style: none;
      display: inline-table;
      }
      #breadcrumb-isanchogives3 ul li (
      display: inline;
      }

      #breadcrumb-isanchogives3 ul li a (
      display: block;
      float: left;
      height: 50px;
      background: #ff818b;
      text-align: center;
      padding: 30px 40px 0 80px;
      position: relative;
      margin: 0 10px 0 0;

      Font-size: 20px;
      text-decoration: none;
      color: #fff;

      }
      #breadcrumb-isanchogives3 ul li a:after (
      content: "";
      height:80px;
      width:40px;
      background: #ff818b;
      position: absolute; right: -40px; top: 0;
      z-index: 1;

      #breadcrumb-isanchogives3 ul li a:before (
      content: "";
      height:80px;
      width:40px;
      border-radius:0px 40px 40px 0px;
      background:#f2f2f2;
      position: absolute; left: 0; top: 0;
      }

      #breadcrumb-isanchogives3 ul li:first-child a (
      border-top-left-radius: 10px; border-bottom-left-radius: 10px;
      }
      #breadcrumb-isanchogives3 ul li:first-child a:before (
      display: none;
      }

      #breadcrumb-isanchogives3 ul li:last-child a (
      padding-right: 80px;
      border-top-right-radius: 10px; border-bottom-right-radius: 10px;
      }
      #breadcrumb-isanchogives3 ul li:last-child a:after (
      display: none;
      }

      #breadcrumb-isanchogives3 ul li a:hover (
      background: #ea606b;
      }
      #breadcrumb-isanchogives3 ul li a.wesove-readcrum (
      background: #ea606b;
      }
      #breadcrumb-isanchogives3 ul li a:hover:after (
      background: #ea606b;
      }
      #breadcrumb-isanchogives3 ul li a.wesove-readcrum:after (
      background: #ea606b;
      }

      #breadcrumb-isanchogives4 (
      text-align: center;
      margin-top:30px;
      }

      #breadcrumb-isanchogives4 ul (
      list-style: none;
      display: inline-table;
      }
      #breadcrumb-isanchogives4 ul li (
      display: inline;
      }

      #breadcrumb-isanchogives4 ul li a (
      display: block;
      float: left;
      height: 50px;
      background: #2b97cc;
      text-align: center;
      padding: 30px 40px 0 80px;
      position: relative;
      margin: 0 10px 0 0;

      Font-size: 20px;
      text-decoration: none;
      color: #fff;

      }
      #breadcrumb-isanchogives4 ul li a:after (
      content: "";
      height:80px;
      width:40px;
      border-radius:0px 40px 40px 0px;
      background:#2b97cc;
      position: absolute; right: -40px; top: 0;
      z-index: 1;

      #breadcrumb-isanchogives4 ul li a:before (
      content: "";
      height:80px;
      width:40px;
      background:#f2f2f2;
      border-radius:0px 40px 40px 0px;
      position: absolute; left: 0; top: 0;
      }

      #breadcrumb-isanchogives4 ul li:first-child a (
      border-top-left-radius: 0px; border-bottom-left-radius: 0px;
      }

      #breadcrumb-isanchogives4 ul li:last-child a (
      padding-right: 80px;
      border-top-right-radius: 0px; border-bottom-right-radius: 0px;
      }

      #breadcrumb-isanchogives4 ul li a:hover (
      background: #207ca8;
      }
      #breadcrumb-isanchogives4 ul li a.wesove-readcrum (
      background: #207ca8;
      }
      #breadcrumb-isanchogives4 ul li a:hover:after (
      background: #207ca8;
      }
      #breadcrumb-isanchogives4 ul li a.wesove-readcrum:after (
      background: #207ca8;
      }

      
      First of all create html structure based on div and ul li tags. The div contains an id, each id will contain a different style in the stylesheet to represent a separate design. Where we use numbering like one, two, three, four.

      These identifiers have the same internal structure, separated different styles according to their ID.

      CSS and CSS3 have come a long way in recent times, and the old styles that used images in the background to get the shape are no longer needed.

      In this article I will tell you how to make breadcrumbs on a website with HTML help and CSS in flat style. You can also look at interesting sites, there may be something useful. I recently made a selection.

      At the end we get this result:

      Previously, in order to make a transparent arrow between two blocks, a transparent picture in the background was used. Now this problem can be solved using CSS only.

      1. Crumb frame

      • Breadcrumb

      First, let's create bulleted list —

      , in which there will be
      • elements. Breadcrumb will be added by adding new
      • .

        2. Add CSS

        Now let's write some CSS to make it look like this:

        

        #crumbs ul li a ( display: block; float: left; height: 50px; background: #3498db; text-align: center; padding: 30px 40px 0 40px; position: relative; margin: 0 10px 0 0; font-size : 20px; text-decoration: none; color: #fff;

        These styles add:

        1. view for link in block form and blue color
        2. center the text and make it white
        3. smooth padding so that the block is displayed correctly vertically
        4. resets other styles for links from text-decoration: none

        Attention: position: relative added to contain everything later indoor units With position: absolute.

        3. Create an arrow effect

        

        #crumbs ul li a:after ( content: ""; border-top: 40px solid red; border-bottom: 40px solid red; border-left: 40px solid blue; position: absolute; right: -40px; top: 0; )

        To create arrows we will use the property :after, which allows you to create an additional element after the parent. We add to him position: absolute- that's why we did it positive: relative for links to hold absolute property inside the link and manipulate it as we want.

        The appearance of the arrow will be made using borders. In the example, the color red is specifically used, but to give the appearance of a triangle it will be used transparent. Further border will be pushed in place using position: absolute.

        4. Add transparency with border

        

        We change red V border on transparent to create a transparent effect.

        Border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #3498db;

        5. Add an arrow to the back

        

        #crumbs ul li a:before ( content: ""; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #d4f2ff; position: absolute; left: 0; top: 0; )

        Using the same principle as in the third step, you can create a transparent triangle behind the block. Color border should be set like the background color of the site to create a transparent effect.

        

        Padding: 30px 40px 0 80px;

        5. Adding new elements

        Adding new ones

      • increase the bread crumb depth.
        • One
        • Two
        • Three
        • Four
        • Five

        6. First and last

        

        To create a rounded effect for the first and last element in the breadcrumb we will use :first-child And :last-child.

        #crumbs ul li:first-child a ( border-top-left-radius: 10px; border-bottom-left-radius: 10px; ) #crumbs ul li:first-child a:before ( display: none; ) #crumbs ul li:last-child a ( padding-right: 80px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; ) #crumbs ul li:last-child a:after ( display: none ; )

        7. Add a hover effect

        #crumbs ul li a:hover ( background: #fa5ba5; ) #crumbs ul li a:hover:after ( border-left-color: #fa5ba5; )

        Also don't forget to add border-radius when hovering over the first and last element in the breadcrumb.

        That's all. If you have any questions, write comments and share the article if you liked it!

        How to make breadcrumbs on a website using CSS from bologer