Home-Excel-Horizontal menu css. Shift the position of all menu elements

Horizontal menu css. Shift the position of all menu elements

Let's create a simple one horizontal menu navigation for the site. For this we will use simple techniques, which will result in correct display our menu in all browsers.

So let's begin. Let's create a list with the names of our menu. Let the item names be: “Home”, “News”, “Products”, “Services”, “Partners”, “Contacts”. We create new file called menu.html, for example using Dreamweaver or using regular notepad. In it between body tags We post our menu. This is normal bulleted list ul with li elements. Of course, we make each menu item a link, where instead of the URL we insert the hash #. Using Photoshop program create an image 3x30 px in size, with gradient fill as shown in the picture below. The file will be saved in GIF format. Let's call it bg.gif. This picture will act as the background image of our menu.

Here are the contents of the menu.html file:

Simple cross-browser horizontal menu

  • Home
  • News
  • Products
  • Services
  • Partners
  • Contacts

Now let's separately create a style file called main.css. Its listing is shown in full below.

Ul ( margin:0; /*zero padding*/ padding:0; /*zero padding*/ float:left; /*align the list to the left*/ width:auto;/*set the width of the auto based on the type and contents of the list */ background-image: url(bg.gif); /*set background image*/ background-repeat:repeat-x; /*repeat our image horizontally*/ list-style:none; /*remove list markers*/ background-color:#4778c3; /*set the background color for the image*/ font-size:13px; /*set the font size*/ font-family:Arial, Helvetica, sans-serif; /*set the font*/ ) ul li ( float:left; /*align the list elements to the left*/ ) ul a ( display:block; /*represent menu links as block elements*/ width:100px; /*set the size block*/ height:30px; /*and block height*/ text-align:center; /*centered text*/ line-height: 2.1em; line spacing*/ text-decoration:none; /*remove underlining from links*/ color:#fff; /*link text color - white*/ border-right:#fff solid 1px; /*border right side block (1px white line)*/ ) ul a:hover ( color:#ccc; /*link changes color when hovered over*/ )

I think that there should be no questions about the contents of the main.css file; I wrote the tips in the comments in sufficient detail and clearly, so I will not repeat myself. Don't forget to connect it to our menu.html page using

Let's summarize. As a result, we received a completely cross-browser horizontal menu that looks the same not only in all modern browsers, but also in such rarities as IE 5.5 and IE 6.0. All menu items are represented as block elements and have same sizes width 100 px and height 30px. The design of a block element using the right border is used as a separator for menu items. white 1px thick. This is practically the simplest way to implement a horizontal menu. Of course, if desired, you can modify it, make it more beautiful and functional using imagination, css properties and additional graphic elements. Well, our horizontal menu looks something like this:

Pros of this solution:
Easy to do
Simple code
No tables or javascript
Cross-browser compatibility: the menu looks the same in all browsers
Only one drawing is used
Minimum code on menu.html page
Minimum code for implementing styles in main.css

Files used in in this example, can be downloaded in the archive

Hello, dear readers of my blog! Today's article will be very useful for beginner layout designers. Because today we will be creating a simple horizontal menu. Before we proceed directly to the layout, I want to say a few words about why I decided to choose this particular topic for the article.

In fact, everything is quite simple, when I was thinking about the topic of the next lesson for the site, I began to remember and analyze my experience in studying layout, what I had to deal with at the initial stage of establishing myself as a layout designer, what was most incomprehensible to me when studying this area etc. I asked myself all these questions in order to better understand what might be interesting to a person who is starting his career as a layout designer. And personally, as soon as I started studying layout, the most questions arose about layout various menus, especially if we're talking about about multi-level menu. And so today we will talk about the menu, and more specifically about the horizontal menu. So let's begin!

Let's start laying out our horizontal menu!

As you probably guessed, the first thing we need to do is create an HTML page with standard markup and connect a style file to it. I won't go into detail about this step, because I still hope that you are not such a beginner that I need to tell you in detail what body and head are and how styles are connected. Let me just say that in addition to the styles for our menu in css file I will write the simplest reset to reset the styles and achieve the same display of indentation in all browsers. This is actually what my simplest reset looks like:

We won’t say anything in detail about resetting styles yet, since essentially this is a topic for another article, the only thing you need to know about the above code is that thanks to this code All page elements that we will write will have margin and padding reset to zero; this must be done in order for our page to look the same in all browsers.

So what do we have in us? at this stage? We have html page with standard markup:

Horizontal menu

And we have a style file connected to this page (for me it’s style.css), with the following content:

The next step will be to create html markup for our menu.

Creating markup for the menu

In our markup we will use new tag, which appeared in HTML5, I decided to immediately accustom you to new tags in order to follow the trend and standard, so to speak. Despite the fact that the new HTML 5 tags are not supported by older browsers, I still strongly recommend using them in your layout, since it’s early or later you will still need to switch to them, just as layout designers at one time switched from tabular layout to block layout, this is the reality, it’s better to follow the trend!

And since we are already talking about supporting new html 5 tags, so that we do not have problems with this in older browsers, we need to include a special library in our document - html5shiv. This is done by inserting into
the head section of your page with the following code:

All tags after this (and other tags related to HTML5) will be perceived normally by older browsers.

Let's return directly to our markup. Next, we need to insert a bulleted list into our tag, for me it looks like this:

  • Home
  • About Us
  • Portfolio
  • Blog
  • Contacts

So, we seem to have finished with the markup, it’s time to start writing styles, since now our menu doesn’t look very good, to put it mildly:

Writing styles for our horizontal menu

And so the first thing when laying out the menu we need to remove the list markers, we obviously don’t need them, we do it like this:

Ul( list-style:none; )

After this our menu will look like this:

I don't really like how our menu is stuck to the edges of the browser, let's fix that:

With this code, we set the width of our menu, gave it 50px top and bottom margins, and positioned it in the center. Who doesn’t know if a block element has a width in order to position this element strictly in the center, we just need to give it an external margin (margin) on the right and left with the value auto.

The next step is to finally make our menu horizontal; this is done by setting the elements

  • float: left

    Menu li( float:left; )

    Our entire menu has now become horizontal.

    If you don't understand what exactly happened and what it does float property I recommend googling information about this property and study it thoroughly, because
    Not a single page of layout can do without it, I can tell you that for sure. Well, okay, let's continue!

    Menu li а( display:block;/* Make the link a block element*/ padding:12px 20px;/* Set the padding */ text-decoration: none; /* remove the underline */ color:#fff;/* set the color links white */ background:#444;/* make the background color dark */ font:14px Verdana, sans-serif;/* set the font size and name */ )

    Here is one of the most important rules- display:block;. The fact is that by default links are inline elements, and inline elements are indented in different browsers are applied in different ways, so it is advisable to make the link a block element and only then apply to it the properties associated with the external or indentation. I don't want to burden you now unnecessary information over time real examples you will understand why such an emphasis is placed here.

    Let's see what we got, refresh the browser page and there you go!:

    As you can see, it doesn’t look bad, we can say that, in principle, our menu is ready. The only thing that still needs to be done is to set the light of the links when hovering, and it seems to me that the menu will look better with separators between the items.

    Let's start with the delimiters:

    Menu li( border-left:1px solid #666; ) .menu li:first-child( border-left:none; )

    What have we done here? Yes, everything is very simple, we set for our points (

  • ) left border of 1px size and color #666;. As for the .menu li:first-child selector, here we use a special pseudo-class that allows us to select the first child element of the list. I also recommend reading about pseudo-classes in more detail on the Internet, you will learn a lot of useful things.

    Let's see what we got again:

    In my opinion, it's much better with delimiters.

    Menu li a:hover( background:#888; )

    Again using a special pseudo-class, this time hover, we set the color of the link when hovering over it, look:

    I think it’s cool :) I hope you end up with the same menu as mine.

    I'll end here this lesson, I really hope that it was useful to you and now you know how to create a simple horizontal menu using pure html and css. Of course, we created a one-level menu; it will be a little more complicated with a two-level menu (with a nested list), but this is a topic for another lesson, that’s all for me. Come again, I will be glad!!!

    Task

    Make a horizontal menu, the items of which have an arbitrary slope (Fig. 1).

    Rice. 1. Menu view with slanted items

    Solution

    The style property transform is responsible for transforming the element; the skewX function is used as its value, which sets the desired slope. It is easier to set the tilt angle in degrees, for example, 30deg is 30º from the vertical. Transformation affects everything child elements, so the text inside the element will also be slanted, which is not in the best possible way reflected in its readability and beauty. Therefore, it is important to apply the tilt to the text again, but in the other direction; to do this, simply change the sign in front of the degrees value.

    Browsers support the transform property mainly with their own prefixes, so for universality in styles you should repeat it several times with the same value, adding -moz- for Firefox, -webkit- for Safari and Chrome, -o- for Opera and -ms - For Internet browser Explorer as shown in example 1.

    Example 1: Menu Item Tilt

    HTML5 CSS3 IE Cr Op Sa Fx

    Menu li ( display: inline-block; /* Inline block elements */ background: #CA181A; /* Background color */ margin-right: 3px; /* Distance between menu items */ -webkit-transform: skewX(- 30deg); /* For Safari and Chrome */ -moz-transform: skewX(-30deg); /* For Firefox */ -o-transform: skewX(-30deg); /* For Opera */ -ms-transform: skewX(-30deg); /* For IE */ transform: skewX(-30deg); /* CSS3 */ ) a ( color: #fff; /* Link color */ display: block; /* Block element*/ padding: 5px 15px; /* Margins around text */ text-decoration: none; /* Remove the underscore */ -webkit-transform: skewX(30deg); /* For Safari and Chrome */ -moz-transform: skewX(30deg); /* For Firefox */ -o-transform: skewX(30deg); /* For Opera */ -ms-transform: skewX(30deg); /* For IE */ transform: skewX(30deg); /* CSS3 */ ) li:hover ( background: #333; /* Background color when hovering */ )

    • Joker
    • Pazuzu
    • Palpatine
    • Doctor Doom

    In this example, a horizontal menu is created using a bulleted list. To ensure that the list is horizontal, a display property with the value inline-block is added to the li element in the styles. For the skew, use the transform property with the skewX function and the value -30º. This property is also applied to links inside the list, but with a positive value of 30º, this ensures that the letters are displayed correctly rather than slanted.

    Chrome, Safari and Firefox browsers use the transform property for block or inline block elements, so the links have their display property set to block .

    Good day to everyone who is reading now this publication. Today I want to tell you about one of the website building tools that no web resource can do without. This is the site menu, or as they also say site map. Today there are an unlimited number of types and subtypes of menus.

    Developers of online stores, blogs, educational services and other resources are experimenting and creating more and more new and unusual maps. After reading the article, you will learn what main groups all types of navigation panels are divided into, you will be able to try each of them, and also learn how to write menu code for an html website. Now let's get down to business!

    Tools for creating a navigation bar

    There are several ways to create a menu in markup language. Their basic concept is to use an unnumbered list. Thus, in html 4, which is familiar to us, developers write tags on the page

      And
    • .

      As stated in previous publications, pair element

        creates a bulleted list and
      • - one element of the list. For clarity, let's write the code simple menu:

        Navigation

        Site navigation

        • Home
        • News of the week
        • Technological advances
        • Chat

        However, with the advent of the platform, the markup language was replenished with additional tags. This is why the menu of modern websites is created using a special tag< menu>. In use, this element is no different from bulleted lists.

        Instead of one< ul>is prescribed< menu>. However, significant differences appear when judged from the work side. So, the second example speeds up the work search programs and robots in . When analyzing the site structure, they immediately understand that this piece of code is responsible for the site map.

        There are horizontal, vertical and drop-down menus. Sometimes the navigation bar is designed as an image. Since the technology segment has expanded, web services are being made adaptive, i.e. The page structure automatically adapts to the device screen size. Let's look at the listed menu groups.

        Let's create a horizontal navigation model

        This type of navigation is the most popular. At horizontal design panel, all menu items are located in the page header or in the “footer” (sometimes navigation elements are duplicated, displayed simultaneously at the top and bottom).

        As an example, we will create a horizontal panel whose menu items will be styled as css help (cascading tables styles), or rather transformed. Yes, everyone separate element will be located in a beveled rectangle. Intrigued?

        For transformation we use a css property called transform . To specify the transformation, the built-in skewX function is used, which specifies the skew angle in degrees.

        Unfortunately, each browser works with this property in its own way, despite the prescribed standards. Therefore, special prefixes were created to indicate this:

        Now let’s apply the acquired knowledge to writing an example.

        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 30 31 32 33 34 35 36 37 38 39 40 Horizontal panel
      • Home
      • About the company
      • Products
      • Contacts
        		•

        Horizontal panel li ( display: inline-block; margin-right: 6px; background: #FF8C00; transform: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg) ; -ms-transform: skewX(-45deg); -moz-transform: skewX(-45deg); transform: skewX(40deg); -o-transform: skewX(40deg); -moz-transform: skewX(40deg); li:hover ( background: #1C1C1C; )

      • Home
      • About the company
      • Products
      • Contacts

        • And now vertically. I said vertical!

        For the second program we use the previous code as a basis. I wanted my items vertical menu were not beveled, but with rounded corners.

        For this I used another css property border-radius .

        In previous articles I have already worked with this parameter, so I don’t think there will be any difficulties in understanding its functioning.

        Vertical panel li( display: block; margin: 13px; padding: 13px; background: #FF8C00; width:20%; text-align:center; font-size:20px; border-radius:10px; ) a ( color: # fff; ) li:hover ( background: #1C1C1C; )

      • Home
      • About the company
      • Products
      • Contacts

        • As you already noticed, the main change in this code is the absence of the display: inline-block declaration, which was actually responsible for horizontal arrangement navigation points.

        Menu sub-items: drop-down list

        We have looked at the main groups navigation bars, however, there are several more varieties, or better yet, additions.

        Sometimes situations arise when some of the points complement the main ones. In this case, you cannot do without drop-down lists. They are created through transformations using css tools.

        Below I have attached the code of a small program that implements this approach.

        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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 Dropdown list body ( padding-left: 30%; font-size: 18px; ) .m-menu ( margin: 0; padding: 9px; width:50%; text-align:center; border: 3px solid #000; background : #FF8C00; ) .m-menu > li ( position: relative; display: inline-block; ) .m-menu a ( display: block; margin-left: -2px; padding: 13px; color: #fff; border -left: 3px solid #fff; ) .m-menu a:hover ( background: #1C1C1C; ) .m-menu .s-menu ( left: 10px; position: absolute; display: none; width: 155px; margin: 0; padding: 0; list-style: none; background: #FF8C00; ) .m-menu .s-menu a ( border: 1px solid #000; ) .m-menu >

        Dropdown list body ( padding-left: 30%; font-size: 18px; ) .m-menu ( margin: 0; padding: 9px; width:50%; text-align:center; border: 3px solid #000; background : #FF8C00; ) .m-menu > li ( position: relative; display: inline-block; ) .m-menu a ( display: block; margin-left: -2px; padding: 13px; color: #fff; border -left: 3px solid #fff; ) .m-menu a:hover ( background: #1C1C1C; ) .m-menu .s-menu ( left: 10px; position: absolute; display: none; width: 155px; margin: 0; padding: 0; list-style: none; background: #FF8C00; ) .m-menu .s-menu a ( border: 1px solid #000; ) li:hover .s-menu ( display :block)

        In this example, I divided the menu units into two classes:

      • m-menu
      • s-menu

        • The first class is responsible for the main menu, and the s-menu is responsible for the submenu.

        In the code you can see such a technique as .m-menu > li:hover or .m-menu > li.

        So, using:hover, you specify how the element will behave when you hover over it.

        In this case, the “>” sign modifies the selector so that only objects belonging to the top level are block-lowercase.

        The submenu was initially set to display: none , which notifies the handler to hide this object. Upon hovering over a navigation element with hover , the display property value changes to block and therefore the dropdown list opens.

        As you can see, the implementation of this technique is very simple.

        Now you have mastered the main types of navigation panels and can modify, supplement and modernize them yourself. If you liked my article, then subscribe to blog updates and share the source of knowledge with friends and colleagues. Bye bye!

        Best regards, Roman Chueshov

        Read: 1010 times



    • Related publications: