How to make navigation bar in html. CSS Navigation Bar

Horizontal menu is a list of sections of the site, so it is more logical to mark up inside the element

and then apply CSS styles to its elements. This arrangement of the menu is the most common due to the obvious advantages in its positioning on a web page.

How to make a horizontal menu: markup and design examples

HTML markup and basic styles for the horizontal menu

By default, all list items are located vertically, spanning the entire width of the container element, which in turn spans the entire width of its container block.

HTML markup for horizontal navigation

• Menu item
• Menu item
• Menu item
...

A horizontal menu located inside the tag can additionally be placed inside the element

and/or
...
. This gives the html markup some semantic meaning, and also gives you more options for formatting the menu block.

There are several ways to place them horizontally. First you need to reset the default browser styles for navigation elements:

Ul ( list-style: none; /*remove the list markers*/ margin: 0; /*remove the top and bottom margins of 1em*/ padding-left: 0; /*remove the left padding of 40px*/ ) a ( text-decoration: none; /*remove the underlining of link text*/)

Method 1. li (display: inline;)

Make list items inline. As a result, they are arranged horizontally, on the right side, a gap equal to 0.4em is added between them (calculated relative to the font size). To remove it, add a negative right margin to li li (margin-right: -4px;) . Next, style the links as you wish.

Method 2. li (float: left;)

We make the elements of the list floating. As a result, they are arranged horizontally. The height of the ul container block becomes zero. To solve this problem, we add (overflow: hidden;) to ul , expanding it and allowing it to contain floating elements in this way. For links, add a (display: block;) and style them as you wish.

Method 3. li (display: inline-block;)

Making list items inline-block. They are arranged horizontally, a gap is formed on the right side, as in the first case. For links, add a (display: block;) and style them as you wish.

Method 4. ul (display: flex;)

Making the ul list a flexible container using the . As a result, the elements of the list are laid out horizontally. Add a (display: block;) for links and style them as you wish.

1. Responsive menu with underline effect when hovering over a link

• work
• About
• Blog
• contact
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main ( list-style: none; margin: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white; ) .menu-main li (display: inline-block;) .menu- main li:after ( content: "|"; color: #606060; display: inline-block; vertical-align:top; ) .menu-main li:last-child:after (content: none;) .menu-main a ( text-decoration: none; font-family: "Ubuntu Condensed", sans-serif; letter-spacing: 2px; position: relative; padding-bottom: 20px; margin: 0 34px 0 30px; font-size: 17px; text-transform: uppercase; display: inline-block; transition: color .2s; ) .menu-main a, .menu-main a:visited (color: #9d999d;) .menu-main a.current, .menu- main a:hover(color: #feb386;) .menu-main a:before, .menu-main a:after ( content: ""; position: absolute; height: 4px; top: auto; right: 50%; bottom : -5px; left: 50%; background: #feb386; transition: .8s; ) .menu-main a:hover:before, .menu-main .current:before (left: 0;) .menu-main a: hover:after, .menu-main .current:after (right: 0; ) @media (max-width: 550px) ( .menu-main (padding-top: 0;) .menu-main li (display: block;) .menu-main li:after (content: none;) .menu- main a ( padding: 25px 0 20px; margin: 030px; ) )

2. Responsive menu for a wedding website

@import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( position: relative; background: #fff; box-shadow: inset 0 0 10px #ccc; ) .top-menu:before, .top-menu:after ( content: ""; display: block; height : 1px; border-top: 3px solid #575350; border-bottom: 1px solid #575350; margin-bottom: 2px; ).top-menu:after ( border-bottom: 3px solid #575350; border-top: 1px solid #575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px; ) .menu-main ( list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; ) .menu-main:before, .menu-main:after ( content: "\25C8"; line-height: 1; position: absolute; top: 50%; transform: translateY(-50% ); ) .menu-main:before (left: 15px;) .menu-main:after (right: 15px;) .menu-main li ( display: inline-block; padding: 5px 0; ) .menu-main a ( text-decoration: none; display: inline-block; margin: 2px 5px; padding: 6px 15px; font-family: "PT Sans", sans-serif; font-size: 16px; color: #777777; border-bottom : 1px solid transparent n: .3s linear; ) .menu-main .current, .menu-main a:hover ( border-radius: 3px; background: #f3ece1; color: #313131; text-shadow: 0 1px 0 #fff; border-color: #c6c6c6; ) @media (max-width: 500px) ( .menu-main li (display: block;) )

3. Responsive menu with scallops

• work
• About
• Blog
• contact
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; background: white; ) .menu-main:after ( content: ""; position: absolute; width: 100%; height: 20px; left: 0; bottom: -20px; background: radial-gradient(white 0%, white 70%, rgba(255,255,255,0) 70%, rgba( 255,255,255,0) 100%) 0 -10px; background-size: 20px 20px; background-repeat: repeat-x; ) .menu-main li (display: inline-block;) .menu-main a ( text-decoration: none; display: inline-block; margin: 0 15px; padding: 10px 30px; font-family: "PT Sans Caption", sans-serif; color: #777777; transition: .3s linear; position: relative; ) .menu -main a:before, .menu-main a:after ( content: ""; position: absolute; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #F58262; opacity: 0; transition: .5s ease-in-out; ) .menu-main a:before (left: 5px;) .menu-main a:after (right: 5px;) .menu-main a. current:before, .menu-main a.cur rent:after, .menu-main a:hover:before, .menu-main a:hover:after (opacity: 1;) .menu-main a.current, .menu-main a:hover (color: #F58262; ) @media(max-width:680px) ( .menu-main li (display: block;) )

4. Responsive Ribbon Menu

@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu ( margin: 0 60px; position: relative; background: #5A394E; box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1), inset 150px 0 150px -150px rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255,255,255,.12); ) ; z-index: 2; left: 0; width: 100%; height: 3px; ) .top-menu:before ( top: 0; border-bottom: 1px dashed rgba(255,255,255,.2); ) .top- menu:after ( bottom: 0; border-top: 1px dashed rgba(255,255,255,.2); ) .menu-main ( list-style: none; padding: 0; margin: 0; text-align: center; ) . menu-main:before, .menu-main:after ( content: ""; position: absolute; width: 50px; height: 0; top: 8px; border-top: 18px solid #5A394E; border-bottom: 18px solid # 5A394E; transform: rotate(360deg); z-index: -1; ) .menu-main:before ( left: -30px; border-left: 12px solid rgba(255, 255, 255, 0); ) .menu- main:after ( right: -30px; border-right: 12px solid rgba(2 55, 255, 255, 0); ) .menu-main li ( display: inline-block; margin-right: -4px; ) .menu-main a ( text-decoration: none; display: inline-block; padding: 15px 30px; font-family: "PT Sans Caption", sans-serif; color: white; transition: .3s linear; ) .menu-main a.current, .menu-main a:hover (background: rgba(0,0,0,.2);) @media (max-width: 680px) ( .top-menu (margin: 0;) .menu-main li ( display: block; margin-right: 0; ) .menu-main:before, .menu-main:after (content: none;) .menu-main a (display: block;) )

5. Responsive menu with a logo in the middle

@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( position: relative; background: rgba(34,34,34,.2); ) .menu-main ( list-style: none; margin: 0; padding: 0; ) .menu-main:after ( content: ""; display: table; clear: both; ) .left-item (float: left;) .right-item (float: right;) .navbar-logo ( position: absolute; left: 50%; top : 50%; transform: translate(-50%,-50%); ) .menu-main a ( text-decoration: none; display: block; line-height: 80px; padding: 0 20px; font-size: 18px ; letter-spacing: 2px; font-family: "Arimo", sans-serif; font-weight: bold; color: white; transition: .3s linear; ) .menu-main a:hover (background: rgba(0, 0,0,.3);) @media (max-width: 830px) ( .menu-main ( padding-top: 90px; text-align: center; ) .navbar-logo ( position: absolute; left: 50% ;top: 10px; transform: translateX(-50%); ) .menu-main li ( float: none; display: inline-block; ) .menu-main a ( line-height: normal; padding: 20px 15px; font -size: 16px; ) ) @media (max-width: 630px) ( .menu-main li (display: block;) )

6. Responsive menu with logo on the left

@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( background: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; ) .top-menu:after ( content: "" ;display: table; clear: both; ) .navbar-logo (display: inline-block;) .menu-main ( list-style: none; margin: 0; padding: 0; float: right; ) .menu-main li (display: inline-block;) .menu-main a ( text-decoration: none; display: block; position: relative; line-height: 61px; padding-left: 20px; font-size: 18px; letter-spacing : 2px; font-family: "Arimo", sans-serif; font-weight: bold; color: #F73E24; transition:.3s linear; ) .menu-main a:before ( content: ""; width: 9px; height: 9px; background: #F73E24; position: absolute; left: 50%; transform: rotate(45deg) translateX(6.5px); opacity: 0; transition: .3s linear; ) .menu-main a:hover:before (opacity: 1;) @media (max-width: 660px) ( .menu-main ( float: none; padding-top: 20px; ) .top-menu ( text-align: center; padding: 20px 0 0 0; ) .menu-main a (padding: 0 10px;) .menu-main a:be fore (transform: rotate(45deg) translateX(-6px);) ) @media (max-width: 600px) ( .menu-main li (display: block;) )

In order to make it convenient to navigate the site, you need navigation, which I made using HTML and CSS scripts. As a result of my work, you can see 2 types of menus (vertical and horizontal). And now, I will try to talk about the tasks that, in my opinion, the menu for the site should perform:

• Ease of use;
• Navigation should be created for all sections of the site;
• Each page of the site should have an exit to the main page;
• Go to any page of the site in a maximum of 3 clicks.

Here I will try to present the material on creating the menu as much as possible, get ready, many may have difficulties, at least I had them. So, let's begin!

First of all, I will tell you how to make. First we write the script in the stylesheet:

#navigation ( width: 560px; height: 50px; margin: 0; padding: 0; background-image: url(img/gor_menu.jpg); background-repeat: no-repeat; background-position:center; ) #navigation ul ( list-style: none; margin: 0; padding: 0; ) #navigation ul li ( display: inline; margin: 0px; ) #navigation ul li a ( height:28px; display: block; float: left; color: #333333; text-decoration: none; font-family: Arial; font-size: 12px; font-weight: bold; background-image: url(img/menu_separatorline.jpg); background-repeat: no-repeat; background- position: right center; padding-top: 17px; padding-right: 15px; padding-bottom: 0; padding-left: 15px; ) #navigation ul li a:hover ( color:#FFF; background-image: url(img /button_hover.jpg); background-repeat: repeat-x; background-position: left top; ) #navigation ul li#active a ( background-image: url(img/button_hover.jpg); background-repeat: repeat-x ; background-position: left top; )

Don't worry, there's nothing wrong with this code. To make it clearer to you, I’ll write the HTML code for this menu right away:

• home
• About the site
• Why do you need a website?
• From the author
• Contacts
• Forum

As you can see, we are dealing with a list, which, without a style sheet, is nothing worthwhile. The div statement calls the variables from the external CSS style sheet, then our list is transformed and turns into a nice horizontal menu in my opinion.

• Introduction
• Creating a site skeleton
• Website menu creation
• Site content
• Using PHP Blocks
• Database creation
• Hosting choice
• Export site to hosting

Now you need to explain a little what relates to what, then I think you yourself will figure it out:

...
- contains the entire menu structure. The top image, which I prepared in advance in Photoshop, will be inserted into it;



...
— menu body, contains an unordered list. An image will be inserted into it, which will repeat vertically and create a background. Maybe I chose too bright colors, but in my opinion, they do not hurt the eyes;

- contains the frame of the menu itself;

• Website menu creation
- this is one of the positions where you will need to insert the necessary link into a href="#";
- contains the lower part.

And this, in fact, will be the script in our CSS style sheet:

Div#menu ( width:144px; background:url(img/menu_1.jpg) top no-repeat; padding-top:40px; ) div#menubody ( background:url(img/menu_2.jpg) repeat-y; padding- left:15px; ) div#menubottom ( height:16px; background:url(img/menu_4.jpg) bottom no-repeat; ) ul#menulist ( width:100px; list-style-type:none; ) ul#menulist li ( height:32px; background:url(img/menu_3.gif) bottom repeat-x; ) ul#menulist a ( width:100px; height:25px; border-left:#75c5de 10px solid; font:bold 10px Verdana, Arial , sans-serif; color:#ffffff; text-decoration:none; padding:5px 0 0 5px; display:block !important; display:inline-block; ) ul#menulist a:hover ( background:url(img/menu_5 .jpg) left repeat-y ; color:#000 ) ul#menulist #active a ( background: url(img/menu_5.jpg) left repeat-y; )

I don't think you should explain the CSS code. If something is not clear, you can always ask.

Both menu types are ready. Note that we did not use JavaScript in them, but rather a “plus” when indexing our site by search engines, well, certainly not a “minus” because search engines do not index JavaScript. Although at the moment the Google search engine is already beginning to recognize it.

You have probably noticed for a long time that there are more than two menus on the site and they have a different structure. I did not edit the article, like the previous one.

It remains to fill the pages of our site with content and we can safely say that half the work is done, but I will talk about this in the next article.

In this tutorial we will talk about how to create a menu with transitions using pseudo-elements. :before and :after.

An example menu can be seen here:

Download

Unfortunately, only Mozilla supports pseudo-element transitions.

HTML part

The menu structure is normal - a bulleted list, and each element of the list has a class effects:

1 2 3 4 5 6 7

<ul > <liclass="effects"> HOME</a> <liclass="effects"> ABOUT THE AUTHOR</a> <liclass="effects"> PORTFOLIO</a> <liclass="effects"> BLOG</a> <liclass="effects"> CONTACTS</a> </ul>

CSS part

To begin with, we will make a horizontal menu from this list:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

ul ( list-style : none ; padding-top : 50px ; ) li ( position : relative ; float : left ; width : 150px ; text-align : center ; padding-top : 35px ; padding-bottom : 35px ; color : # fff ; margin-right : 20px ; border-radius : 5px ; background : #161616 ; border-bottom : 1px solid #333 ; border-left : 1px solid #000 ; border-right : 1px solid #333 ; border-top : 1px solid #000 ; cursor : pointer ; )

Now let's add the effects:

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 28 29

.effects :after , .effects :before ( -moz-transition : width 0.5s ease 0s; height : 0px ; width : 0px ; position : absolute ; content : " " ; display : block ; opacity : 0 ; box-shadow : 0px 0px 5px #00c6ff ; ) .effects :after ( background : -moz-linear-gradient(left , #0ad , #08b ) ; top : 84px ; left : 75px ; ) .effects :before ( background : -moz-linear -gradient(right , #0ad , #08b ) ; top : 84px ; right : 75px ; ) .effects :hover :after , .effects :hover :before ( width : 72px ; height : 1px ; opacity : 1 ; )

Conclusion

The lesson turned out to be small, but we created a very nice menu. The only downside is that the transitions will only work correctly in the Mozilla browser.

horizontal

Navigation Bars

Having an easy to use navigation is essential for any website.

With CSS, you can turn boring HTML menus into pretty navigation bars.

Navigation bar = List of links

The navigation bar needs standard HTML as a base.

In our examples, we will be building a navigation bar from a standard HTML list.

The navigation bar is basically a list of links, so using

and
• elements make sense:

  example

  
  
  • Home
  
  
  • News
  
  
  • contact
  
  
  • About
  
  
  Try it yourself "

  Now let's remove bullets and margins and padding from the list:

  Example explanation:

  • list-style-type: none; - Removes bullets. Navigation bar doesn't need a list of markers
  • Set margin: 0; and padding: 0; to remove default browser settings

  The code in the example above is the standard code used in both vertical and horizontal navigation bars.

  Vertical navigation bar

  To build a vertical navigation bar, you can style elements inside the list, in addition to the above code:

  Example explanation:

  • display:block; - Displaying links as a block of elements makes the entire area of ​​the link clickable (not just the text), and it allows us to specify the width (and padding, margin, height, etc if you want)
  • width: 60px - block elements take up the entire available width by default. We want to set the width to 60px

  You can also set the width

  and remove the width , as they will take up the entire available width when rendered as block-level elements. This will produce the same result as the previous example:

  Vertical Navigation Bar Examples

  Create a basic vertical navigation bar with a gray background color and change the background color of the links when the user moves the mouse cursor over them:

  example

  Ul (
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px
  background color: #f1f1f1;
  }

  li a (
  display:block;
  color: #000;
  padding: 8px 0 8px 16px;
  text-decoration: none;
  }

  /* Change the link color on hover */
  li a: hover (
  background-color: #555;
  color:white;
  }

  Try it yourself "

  Center Links & Add Borders

  Add text-align:center for

  • or to the center of the link.

    Add a border property

    add a border around the navbar. If you also want a border inside the navbar, add border-bottom to all
    • elements except for the last one:

      Full Size Lock Vertically Navbar

      Creating a full-height, "sticky" side navigation:

      example

      Ul (
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 25%
      background color: #f1f1f1;
      height: 100%; /* full height */
      position: fixed; /* Make it stick, even on scroll */
      overflow: auto; /* Enable scrolling if the sidenav has too much content */
      }

      Try it yourself "

      Note: This example may not work properly on mobile devices.

      Horizontal navigation bar

      There are two ways to create a horizontal navigation bar. Usage built-in or floating list items.

      Built-in List Items

      One way to create a horizontal navigation bar is to indicate

    • elements as inline, in addition to the "standard" code above:

      Example explanation:

      • display: inline; - Default
      • elements are block elements. Here we remove the line breaks before and after each list item to display them on the same line.

      Floating List Items

      Another way to create a horizontal navigation bar to float on

    • elements, and specify the layout for navigation links:

      Example explanation:

      • float: left; - use floating point to get block of elements to slide next to each other
      • display:block; - Displaying links as a block of elements makes the entire area of ​​the link clickable (not just the text), and it allows us to specify padding (and height, width, margins, etc if you want)
      • padding: 8px - Since block-level elements take up the entire available width, they cannot float next to each other. Therefore, specify some addition to make them look good
      • background-color: #dddddd; - add gray background color for each element

      Advice: add a background color for

      instead of each element if you want a fullwidth background color:

      Horizontal Navigation Bar Examples

      Create a basic horizontal navigation bar with a dark background color and change the background color of the links when the user moves the mouse cursor over them:

      example

      Ul (
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
      }

      li (
      float: left;
      }

      li a (
      display:block;
      color:white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      }

      /* Change the link color to #111 (black) on hover */
      li a: hover (
      background-color: #111;
      }

      Try it yourself "

      Active / Current Navigation Link

      Add an "active" class to the current link so the user can know which page he/she is on:

      Right Click Align Links

      In this tutorial, we will make a site navigation system using only CSS3. The idea is to organize multiple slides or layers of content that will be shown and hidden using the :target pseudo-class. With the help of CSS transitions, you can make great visual effects of the appearance of slides. Also our navigation will be adaptive.

      Note: the result of the lesson fully works in browsers that support CSS3.

      HTML markup

      For each individual slide that will contain either a set of links, or information, or a subslide, create a div element with the class cn-slide. For subslides that contain two links per line, we will use a different class cn-slide-sub. The info slide will just have a class cn-slide.

      In our example, there will be one main slide that contains three sub-slides. Each subslide contains four links that point to the information slide. The whole structure will be a construction of one main slide, three sub-slides and twelve slides with information:

      Description

      Philosophy

      Back

      Epistemology

      Back

      Text...

      Hold left key to see background

      Metaphysics

      . . .

      Aesthetics

      . . .

      Ethics

      . . .
      . . .

      Subslides and information slides contain links to the previous layer.

      css

      The main container has min-width and max-width properties, which allow us to use percentages to set the width, guaranteeing that the element won't get too big or small:

      Cn-container( width: 60%; min-width: 300px; max-width: 820px; margin: 10px auto 0 auto; text-align: left; position: relative; )

      The main title will be absolutely positioned and rendered using effects when the slide is "opened". Transitions are set with a delay so that the title appears after the output of the link blocks:

      Cn-container h2( font-family: "PT Sans Narrow", "Arial Narrow", Arial, sans-serif; font-variant: small-caps; font-weight: 700; color: #fff; position: absolute; z -index: 1000; text-shadow: 0 0 1px rgba(255,255,255,0.8), 1px 1px 1px rgba(0,0,0,0.2); font-size: 80px; line-height: 80px; top: 0px; right : 200px; white-space: nowrap; opacity: 0; -webkit-transition: all 0.3s linear 0.4s; -moz-transition: all 0.3s linear 0.4s; -o-transition: all 0.3s linear 0.4s; - ms-transition: all 0.3s linear 0.4s; transition: all 0.3s linear 0.4s; ) .cn-container .cn-slide:target h2( right: 0px; opacity: 1; )

      Slides are also positioned absolutely. The initial opacity of slides is set to 0. They are only rendered when they are the target:

      Cn-slide( text-align: center; position: absolute; left: -100%; padding-top: 80px; margin: 0 5%; width: 90%; opacity: 0; -webkit-transition: left 0.4s linear , opacity 0.4s linear; -moz-transition: left 0.4s linear, opacity 0.4s linear; -o-transition: left 0.4s linear, opacity 0.4s linear; -ms-transition: left 0.4s linear, opacity 0.4s linear ;transition: left 0.4s linear, opacity 0.4s linear; ) .cn-slide:target( left: 0px; opacity: 1; )

      Take a look at the other demo files. It uses other transition sequences to form visual effects.

      Now let's look at the link elements. They will have one background image, which will later be overridden on a per-element basis. The default file is 1.jpg . When you hover the mouse over the element, the color of the text shadow and the block itself will change:

      Cn-slide nav a( text-align: left; display: block; font-family: "PT Sans Narrow", "Arial Narrow", Arial, sans-serif; font-variant: small-caps; font-weight: 700 ; border: 8px solid #fff; padding: 2%; font-size: 66px; letter-spacing: 7px; text-shadow: 0px 0px 10px rgba(255,255,255,0.9); color: rgba(255,255,255,0.1); line- height: 66px; margin: 0 0 10px 0; outline: none; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); background: #fff url(../images/1.jpg) no- repeat center center; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; background-clip: padding-box; - webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease -in-out; transition: all 0.3s ease-in-out; ) .cn-slide nav a:hover( box-shadow: 1px 3px 7px rgba(0,0,0,0.25); text-shadow: 1px 1px 1px rgba(0,0,0,0.1); color: rgba(255,255,255,0.9); )

      Cn-slide-sub nav a( width: 42%; display: inline-block; font-size: 40px; )

      To create a small gap between elements, set the right margin for odd children:

      Cn-slide-sub nav a:nth-child(odd)( margin-right: 5px; )

      The information slide is the end point of the transitions:

      Cn-content( background: #80B8CE url(../images/1.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-align: left; padding: 20px 20px 5px; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 8px solid #fff; margin-top: 5px ; cursor: pointer; )

      Each content area corresponds to a link block. The background image will be set later:

      The paragraph will also have transitions. With the :active pseudo-class, we enable the user to look at the background by holding down the left mouse button.

      cn-content:active p( opacity: 0; ) .cn-content p( line-height: 24px; text-shadow: 1px 1px 1px ; padding: 15px 20px; margin-bottom: 10px; background: rgba(255,255,255,0.96); font-style: italic; border-top: 7px solid rgba(103,59,77,0.6); -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; )

      The return arrow slides out on the left. At first it has a position of -100px, and when the slide is activated, it extends to a position of 3px:

      Cn-back( outline: none; text-indent: -9000px; width: 49px; height: 42px; background: transparent url(../images/arrow.png) no-repeat center center; position: absolute; top: 22px ; left: -100px; cursor: pointer; opacity: 0; -webkit-transition: all 0.4s ease-in-out 0.5s; -moz-transition: all 0.4s ease-in-out 0.5s; -o-transition : all 0.4s ease-in-out 0.5s; -ms-transition: all 0.4s ease-in-out 0.5s; transition: all 0.4s ease-in-out 0.5s; ) .cn-slide:target .cn -back( left: 3px; opacity: 1; )

      Now let's define a background image for each link element. With a handy attribute selector, we can specify a specific element. We look at the value of the href attribute and define the image:

      /* Main points */ .cn-slide nav a( background-image: url(../images/1.jpg); ) .cn-slide nav a( background-image: url(../images/2. jpg); ) .cn-slide nav a( background-image: url(../images/3.jpg); ) /* Points and sub-points for slide 1*/ .cn-slide nav a, #slide-1- 1 .cn-content ( background-image: url(../images/4.jpg); ) .cn-slide nav a, #slide-1-2 .cn-content ( background-image: url(../ images/5.jpg); ) .cn-slide nav a, #slide-1-3 .cn-content ( background-image: url(../images/6.jpg); ) .cn-slide nav a, #slide-1-4 .cn-content ( background-image: url(../images/7.jpg); ) /* Points and sub-points for slide 2*/ .cn-slide nav a, #slide-2- 1 .cn-content ( background-image: url(../images/8.jpg); ) .cn-slide nav a, #slide-2-2 .cn-content ( background-image: url(../ images/9.jpg); ) .cn-slide nav a, #slide-2-3 .cn-content ( background-image: url(../images/10.jpg); ) .cn-slide nav a, #slide-2-4 .cn-content ( background-image: url(../images/11.jpg); ) /* Points and sub-points for slide 3*/ .cn-s slide nav a, #slide-3-1 .cn-content ( background-image: url(../images/12.jpg); ) .cn-slide nav a, #slide-3-2 .cn-content ( background-image: url(../images/13.jpg); ) .cn-slide nav a, #slide-3-3 . cn-content ( background-image: url(../images/14.jpg); ) .cn-slide nav a, #slide-3-4 .cn-content ( background-image: url(../images/ 15.jpg); )

      Finally, we define some media queries to form a template on small screen sizes. It's best to define breakpoints in the pattern and set change rules for them. In our case, there are two such points: 1060 px and 900 px. Let's change the font size, and in the subslides, we'll use only one element per line.

      @media screen and (max-width: 1060px)( .cn-slide-sub nav a( font-size: 28px; ) ) @media screen and (max-width: 900px)( .cn-container h2( font-size : 48px; line-height: 95px; ) .cn-slide nav a( font-size: 38px; ) .cn-slide-sub nav a( width: auto; font-size: 36px; display: block; ) .cn -slide-sub nav a:nth-child(odd)( margin-right: 0px; ) )