Creating flat "bread crumbs" using CSS. The design of "bread crumbs" based on CSS3 bread crumbs CSS

Thanks to the development of CSS and CSS3 in recent years, we have achieved the moment when many old software solutions, including background images, can now be created completely on CSS. In this lesson, we will consider creating a sequence of navigation links called "bread crumbs", in a flat style, without the need for a previously popular method of working with the background image, called the "sliding doors" method.

"Bread crumbs", which we will create, stylized in the form of chevrons to visualize the idea of \u200b\u200bstructured content. Previously, we would use the background image in PNG format to create this shape of the chevron, and now using the cunning gear of the boundaries, you can create the same effect using only CSS.

BreadCrumb.

We will start with the creation of links for navigating "bread crumbs" as a non-measured list. Each "bread crumb" will be an element

With an anchor element installed.

#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;)

The CSS initial code sets each anchor of the list of a neat blue rectangle style. The text is located in the center, and equal internal indents are added from all sides. In order to position absolutely the following elements, this elements added the Position: relative property;, so that those absolutely positioning items are displayed relative to this parent element.

#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; )

Now we will create Chevron effect in CSS, which used to be achieved only using the background image. Use the selector: After to create an additional element to which you can individually set styles. The triangular form is created using different CSS borders, so that as you can see in the previous image, the blue triangle can be created by applying the boundaries of the top and bottom to cross the coverage area. These boundaries are painted red for clarity, but if they are transparent, then it turns out the blue triangle. This effect of the boundary is then moving in its place using absolute positioning.

Border-Top: 40px Solid Transparent; Border Bottom: 40px Solid Transparent; Border-Left: 40px Solid # 3498DB;

The effect of the border with the correct color values \u200b\u200bwill create the desired triangle, which will give "bread crumbs" the popular shape of Chevron.

#crumbs UL Li A: Before: 40px Solid Transparent; Border-Bottom: 40px Solid Transparent; Border-Left: 40px Solid # D4F2FF; Position: Absolute; Left: 0; Top: 0; )

Using the same principles, another triangular form can be applied to the left part of the "bread crumb." This time the same color of the border as the color of the background is asked to hide pieces of the blue background link.

Padding: 30px 40px 0 80px;

One.

Two.

Three.

Four.

Five.

As referenced to HTML adds, the sequence of "bread crumbs" increases, they are divided by an interesting shape with chevron, thanks to the triangular effect of CSS boundaries and a small right external return.

#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 ;)

The full block of "bread crumbs" can be further stylized by removing the effect of the triangle from the first and last elements using selectors: First-Child and: Last-Child, after which you can give a small rounding of the corners using the Border-Radius property.

#crumbs UL Li A: Hover (Background: # FA5BA5;) #crumbs UL Li A: Hover: After (Border-Left-Color: # FA5BA5;)

All that remains is to apply the effect to the links that occurs when the mouse pointer is hovering. Do not forget to change the value of the Border-Left-Color property for the triangle effect in a state of hovering the mouse pointer so that the whole "bread crumb" will change color.

Translation - djurka

Hello, dear readers. On this day we will learn to create Beautiful bread crumbs (BreadCrumbs) for ordinary sites, as well as for WordPress blogs. I advise you not to skip this moment, because the crumbs show the way to your article or information on the site, which will greatly facilitate navigation on the site, as well as the additional internal links.

CSS.

UL (Margin: 0; Padding: 0; List-style: none;)

Everything, the first is not a small step done. And now let's add a beautiful view of our crumbs.

First example

The form of the element itself will consist of three parts, which are connected in one entire part. To make it clearer, see the drawing below:

# 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; Color: # 444; Position: relative; text-shadow: 0 1px 0 RGBA (255,255,255, .5); background-color: #ddd; Background-image: 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 :: Afterter, # 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 :: Afterx (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 :: Afterter (Border-Left-Color: #FFF;) # BreadCrumbs-One .current, # BreadCrumbs-One .current: Hover (Font-Weight: Bold; Background: none;) BreadCrumbs-One .current :: Afterter, # BreadCrumbs-One .Current :: Before (Content: Normal;)

The second example

Here, as in the first example, the element consists of three parts, which are constructed in one part using CSS.

# BreadCrumbs-Two (Overflow: Hidden; width: 100%;) # BreadCrumbs-Two Li (float: left; margin: 0 .5em 0 1em;) # BreadCrumbs-Two A (Background: #ddd; padding: .7em 1em ; Float: Left; Text-Decoration: None; Color: # 444; Text-Shadow: 0 1px 0 RGBA (255,255,255, .5); position: relative;) # BreadCrumbs-Two A: Hover (Background: # 99DB76;) # BreadCrumbs-Two A :: Before: Absolute; Top: 50%; margin-top: -1.5em; border-width: 1.5em 0 1.5em 1em; Border-Style: Solid; Border- color: #ddd #ddd #ddd transparent; left: -1em;) # BreadCrumbs-Two A: Hover :: Before (Border Color: # 99DB76 # 99DB76 # 99DB76 Transparent;) # BreadCrumbs-Two A :: After (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 #DDD; Right: -1EM;) # BreadCrumbs-Two A: Hover :: After (Border Left-Color: # 99DB76;) # Breadcrumbs-Two .current, # Breadcrumbs-Two .current: Hover (font-weig HT: Bold; Background: none; ) # BreadCrumbs-Two .current :: Afterter, # BreadCrumbs-Two .current :: Before (Content: Normal;)

Third example

In the third item, elements consist of two parts.

# 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: none; color: # 444; background: #ddd; position: relative; z-index: 1; Text-Shadow: 0 1px 0 RGBA (255,255,255, .5); Border-Radius: .4em 0 0 .4EM;) # BreadCrumbs-Three A: Hover (Background: # abe0ef;) # BreadCrumbs-Three A :: After (Background: #ddd; Content: ""; Height: 2.5em; Margin-top: -1.25em ; Position: absolute; right: -1em; top: 50%; width: 2.5em; z-index: -1; transform: rotate (45deg); Border-Radius: .4em;) # BreadCrumbs-Three A: Hover: : After (Background: # abe0ef;) # BreadCrumbs-Three .current, # BreadCrumbs-Three .current: Hover (Font-Weight: Bold; Background: none;) # BreadCrumbs-Three .current :: After (Content: Normal; )

Fourth example

# 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: None; Color: # 444; Text-Shadow: 0 1px 0 RGBA (255,255,255, .5); position: relative;) # 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 :: Afterter, # BreadCrumbs-Four .Current :: Before: Normal;)

Example

That's all, I believe that very stylish and at the same time simple crumbs. Especially there are no images, accordingly they are loaded faster.

In all examples in styles used tag hover.that changes the color of the element when, just if you do not like not one of the presented colors, you can easily replace it with your own.

Now it's time to go to the second part, namely, we will attach one of the examples to your Wordpress blog, went.

Part 2. How to attach data of bread crumbs on Wordpress blog

And so, first, we need to download plugin BreadCrumb Navxt, You can download it. After the plugin is downloaded and activated, you will need to make some settings:

Settings are in the parameters. In the tab GENERAL It is necessary to find a line BreadCrumb Separator. And delete the standard value that is standing there, in other words, you need to leave the field empty.

Everything, with the plugin finished, now you need to choose the design that you liked most. In this case, this style will be on the example:

it the second examplewhich is above in the article.

Take and simply copy these styles, and then add them to style.css. Your topic, in any place that you like most, I advise you to highlight the beginning and end of the styles of crumbs, because if in the future I want to change there, confuse.

Now you need to add bread crumbs directly to the blog.

In Admin Blog found appearance, then editor, and choose single.php.. Next, add the following:

Important

Please note that the crook challenge itself is worth between tags.

id which breadCrumbs-Two.Do not forget to change this ID for an example that was added to styles. For example, if this is the first example (which is higher) then should be like this:

etc. (I apologize for the rebus) :-)

If you have a template on a blog look like me, in the sense that the background is gray and the block itself is white, the crumbs are best put on the block, like me. Because they can be moved to a new string if the name is too long and, believe me, it is not very beautiful. :-)

That's all. Dear friends if any difficulties arose necessarily ask in the comments. See you soon.

In the previous article "BreadCrumbs navigation with triangles on CSS" described how to create a menu using pure CSS, without the use of graphics.

The method is good for everyone, with the exception of one - the support of such a menu in old browsers is doubtful. But with the transfer of this article, reference was referred to a way to create navigation using graphics.

The article is written for a long time, but the method is absolutely working. The author of the article Veerle Pieters, and the post itself is called "Simple Scalable CSS Based BreadCrumbs". Below I am even not free translation, but free retelling.

A few days ago I had the task of creating a navigation menu in the style of "bread crumbs" (BreadCrumbs) for the site for which I worked. I do not think that such a menu is necessary for each site, but in some cases it is very useful and practical.

However, this example is as if the basis that can be expanded and applied in practice. The menu will be created using a regular label list.

But first look at the sample with whom we will work:

The menu is simple enough, as is the code with which we will create it.

HTML Code - Basic UL List

HOME.
Main Section.
SUB Section.
SUB sub Section.
Page You Are on Right Now

All menu items have links except the last - "The Page You Are on Right Now" (the page you are currently in). When working on the menu, I wondered if the list of the most appropriate structure is to create a menu? I believe that the application of the list in this case is not strict rule, but it seems to me is the most semantic and correct option.

CSS code - create styles for menu

We specify common styles for the menu - remove the markers and reset the indents in Firefox browsers, IE:

We make floating through the property equal to the height of the entire menu. And set the color of the text. Next, we place for reference the background image cut from the layout. To do this, cut only the "Arrow" itself:

... which "simply" rushing "to the right (100%) and place exactly vertical (50%). We also do from the reference to the right to the right

1	Padding-Left: 15px

in which there will be a background image (cut-out arrow): .crumbs Li A (Display: Block; Padding: 0 15px 0 0; Background: URL (img / crumbs.gif) 100% 50% no-repeat;)

Already almost everything is done. It remains to set styles for link text. We remove the standard underscore and change its color:

.crumbs Li A: Link, .crumbs Li A: Visited (text-decoration: None; Color: # 777;)

: hover

and

: focus

. When you hover the mouse cursor or receiving the focus from the keyboard color text link will change: .crumbs Li A: Hover, .crumbs Li A: Focus (Color: # DD2C0D;)

The result of our work is presented here:

Translator Note:

The author of the article simplified the example and the code itself, accordingly, as far as I understand. The fact is that the example is clearly visible a linear horizontal gradient for each of the menu items. However, it was not displayed in the code. Well, not trouble - is it a problem to create a linear gradient on CSS3? The task itself is fulfilled!

Navigation in the form of "bread crumbs" helps site visitors to navigate in the hierarchical structure of documents and find the way to the top level. Therefore, if a large number of documents are located on the site, it must be provided with "bread crumbs". In this lesson, CSS code will be presented to create various design options for such a desired navigation tool.

HTML markup

Marking 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.

To begin with, we will make a small CSS reset for our disordered list:

UL (Margin: 0; Padding: 0; List-style: none;)

For the design of our "bread crumbs" pseudo-elements will be used.

First example

In this example, a very simple technique is used. A triangle is created on the frame to the right with the help of pseudo-elements placed one over the other. Dark triangle shifts 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; Color: # 444; Position: relative; text-shadow: 0 1px 0 RGBA (255,255,255, .5); background-color: #ddd; Background-image: 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 :: Afterter, # 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 :: Afterx (z-index: 2; Border-Left-Color: #ddd;) # BreadCrumbs-One A :: Before ( Border-Left-Color: #CCC; Ri GHT: -1.1EM; z-index: 1; ) # BreadCrumbs-One A: Hover :: Afterter (Border-Left-Color: #FFF;) # BreadCrumbs-One .current, # BreadCrumbs-One .current: Hover (Font-Weight: Bold; Background: none;) BreadCrumbs-One .current :: Afterter, # BreadCrumbs-One .Current :: Before (Content: Normal;)

CSS forms are built using pseudo-elements placed before and after the element.

# BreadCrumbs-Two (Overflow: Hidden; width: 100%;) # BreadCrumbs-Two Li (float: left; margin: 0 .5em 0 1em;) # BreadCrumbs-Two A (Background: #ddd; padding: .7em 1em ; Float: Left; Text-Decoration: None; Color: # 444; Text-Shadow: 0 1px 0 RGBA (255,255,255, .5); position: relative;) # BreadCrumbs-Two A: Hover (Background: # 99DB76;) # BreadCrumbs-Two A :: Before: Absolute; Top: 50%; margin-top: -1.5em; border-width: 1.5em 0 1.5em 1em; Border-Style: Solid; Border- color: #ddd #ddd #ddd transparent; left: -1em;) # BreadCrumbs-Two A: Hover :: Before (Border Color: # 99DB76 # 99DB76 # 99DB76 Transparent;) # BreadCrumbs-Two A :: After (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 #DDD; Right: -1EM;) # BreadCrumbs-Two A: Hover :: Afterter (Border Left-Color: # 99DB76;) # Breadcrumbs-Two .current, # BreadCrumbs-Two .Current: Hover (Font-Weight: Bold; Background: none; ) # BreadCrumbs-Two .current :: Afterter, # BreadCrumbs-Two .current :: Before (Content: Normal;)

Using the Border-Radius property, the angles of the rectangle and squares are curved. Square turns to make a diamond from it.

With the help of pseudo elements, two rectangles are added. Then they curl corners.

The advantages of the design of "bread crumbs" based on CSS3

No images, so just update and maintain.
Easy scaled.
Inverse compatibility with old browsers.

In this lesson, you will get acquainted with the process of creating in Bootstrap 3 and 4 navigation chains ("bread crumbs").

Marking of navigation chains

Navigation chains ("bread crumbs", BreadCrumbs) is a navigation scheme that shows the current position of the user on the site. They are used to display hierarchically organized information. For example, in the online store "Bread crumbs" usually represent chains of sections. With their help, the user can determine which section it is now, as well as they allow you to go to sections of higher levels, i.e. Provide another possibility of navigating the site structure.

"Bread crumbs" in Bootstrap is an ordinary ordered list with a class BreadCrumbs. The list element separator is automatically added using CSS (bootstrap.min.css) through the following class:

BreadCrumbs\u003e Li + Li: Before (Color: #CCCCCC; CONTENT: "/"; padding: 0 5px;)

An example of creating "bread crumbs" with Bootstrap.

Registration of navigation chains in bootstrap

One more example:

Bread crumbs for navigating archive information

Not standard variant of the design of bread crumbs

Consider an example of creating the following embodiment of bread crumbs:

An example of the design of bread crumbs on the site

The process of creating bread crumbs is made up of the development of HTML structure and styles (CSS).

CSS bread crumbs:

/ * bread crumbs * / #BreadCrumb (list-style: none; display: inline-block; padding-left: 0px;) #breadcrumb .icon (font-size: 14px;) #breadcrumb Li (float: left;) BreadCrumb Li A (Color: #FFF; Display: Block; Background: # CC2EAA; text-decoration: none; position: relative; Height: 34px; Line-Height: 34px; padding: 0 10px 0 5px; Text-Align: Center ; margin-right: 23px; -Webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; User-Select: None;) #BreadCrumb Li: First-Child A ( padding-left: 15px; -Moz-Border-Radius: 4px 0 0 4px; -Webkit-Border-Radius: 4px; Border-Radius: 4px 0 0 4px;) #BreadCrumb Li: First-Child A: Before (Border: None;) #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 (Border: None;) #BreadCrumb Li A: Before, #breadCrumb Li A: After (CONTENT: "; Position: absolute; top: 0; Border: 0 Solid # CC2EAA; Border-width: 17px 10px; width: 0; Height: 0; ) #BreadCrumb Li A: Before (Left: -20px; Border-Left-Color: Transparent;) #BreadCrumb Li A: After (Left: 100%; Border-Color: Transparent; Border-Left-Color: # CC2EAA;) #BreadCrumb Li A: Hover (Background-color: # A22587;) #BreadCrumb Li A: Hover: Before (Border Color: # A22587; Border-Left-Color: Transparent;) #BreadCrumb Li A: Hover: After (Border -Left-Color: # A22587;) #BreadCrumb Li A: ACTIVE (Background-color: # A22587;) #BreadCrumb Li A: Active: Before (Border Color: # A22587; Border-Left-Color: Transparent;) # BreadCrumb Li A: Active: After (Border-Left-color: # A22587;) #BreadCrumb Li.Current A (Pointer-Events: None; Cursor: Not-Allowed; Filter: Alpha (opacity \u003d 65); -Webkit-Box -Shadow: None; Box-Shadow: None; Opacity: .65;)

Color changes are made by editing the values \u200b\u200bof the corresponding CSS properties.

HTML marking:

The leading of the current element (if it is used in the chain) is carried out by adding the Current class to the LI element.