How to create and display a menu in WordPress is easy with the wp_nav_menu function. Navigation Bars Using CSS

/* nav */ .nav ( position: relative; margin: 20px 0; ) .nav ul ( margin: 0; padding: 0; ) .nav li ( margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; ) .nav a ( padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; ) .nav a:hover ( color: #000; ) . nav .current a ( background: #999; color: #fff; border-radius: 5px; )

Center and right alignment

As mentioned above, you can change the button alignment using “text-align”.

/* right nav */ .nav.right ul ( text-align: right; ) /* center nav */ .nav.center ul ( text-align: center; )

Internet Explorer support

HTML5 tag and media queries are not supported by Internet Explorer 8 and older versions. Include CSS3-mediaqueries.js (or respond.js) and html5shim.js to provide fallback support. If you don't want to add html5shim.js, then replace the tag with a tag.

This is where the fun begins - making menus responsive with media queries! At 600px we set the nav element to a relative position so that we could place

menu list at the top with absolute position. We have hidden all elements
• specifying display:none, but leaving .current
• displayed as a block. Then on the NAV hover, we set everything
• to display:block (this will give the result of the dropdown list). We've added a graphical icon to the check.current element to indicate that the element is active. To align the menu center and right, use the left and right positioning property
  list.

  @media screen and (max-width: 600px) ( .nav ( position: relative; min-height: 40px; ) .nav ul ( width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0 ; border: solid 1px #aaa; background: #fff url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,. 3); ) .nav li ( display: none; /* hide all

  • items */ margin: 0; ) .nav .current ( display: block; /* show only current
  • item */ ) .nav a ( display: block; padding: 5px 5px 5px 32px; text-align: left; ) .nav .current a ( background: none; color: #666; ) /* on nav hover */ . nav ul:hover ( background-image: none; ) .nav ul:hover li ( display: block; margin: 0 0 5px; ) .nav ul:hover .current ( background: url(images/icon-check.png) no-repeat 10px 7px; ) /* right nav */ .nav.right ul ( left: auto; right: 0; ) /* center nav */ .nav.center ul ( left: 50%; margin-left: - 90px; ) )

    High conversions!

    Navigation is present on any good website, even if it is a one-page one. Depending on the situation, navigation links can lead to various sections of the site or send to a bookmark (anchor) located on current page. Competent drafting navigation in which the user does not get confused requires certain knowledge and experience. Navigation bar design also needs to be done wisely, and in this tutorial we'll show you how to create a user-friendly navigation menu.

    Creating Navigation

    What is navigation? This is a collection of links, often ordered and grouped by meaning. Navigation menu often created using an HTML list tag

    , where at each point
    • contains one link . In HTML5, a separate tag was introduced for navigation, where you can simply place link tags. Once you've created the HTML framework, you can move on to styling it with CSS, where you can define how your menu will be vertical, horizontal, drop-down, etc.

      Let's say we have a simple navigation with five links, created in HTML based on a bulleted list:

      • Home
      • About
      • Gallery
      • News
      • Contacts

      Initially, without styles, our navigation looks like a regular list:

      
      

      To make this element more like a navigation bar, there are a few required steps you need to take. Firstly, markers are not needed near menu items, and secondly, the standard margin and padding values ​​​​set by the browser for the list may interfere, so we reset them to zero. The result is the following:

      Menu ( list-style-type: none; margin: 0; padding: 0; )
      
      

      Essentially, the style reset file performs identical actions in relation to lists Reset.css, therefore, if you use it on your site, then the code above does not need to be written.

      After resetting the standard list styles, you can proceed directly to creating styles for navigation. We'll show you how to make vertical and horizontal panels.

      Vertical menu

      Creating a vertical navigation bar is considered easier than creating a horizontal menu. Mainly because there is no need to set the links to be horizontal. This is simply a vertical list of pages on a site. Still, some important styles will have to be applied.
      

      Block links

      First of all you need to make all the tags block elements:

      Menu a ( display: block; )

      There are several reasons for this:

      
      Menu width

      The next thing we need to do is set the width of the menu. If you haven't pre-defined the width of the navbar, and it's not in a container that bounds it, then the menu will stretch across the entire width of the window (as in our example above) - because that's how a block element behaves by default. You can set the required width for the .menu element, for example:

      Menu (width: 300px; )
      

      Instead, you can set the width for the items

    • or for links - visually the effect may be the same, but keep in mind that in this case the width of the .menu element will still remain 100%.
      
      Separating items

      To visually separate menu items, you can give each of them a lower or upper border. Depending on which one you use, you will have a missing border at the top or bottom of the menu. This can be fixed by adding another border to the .menu block itself:

      Menu a ( border-top: 1px solid blue; ) .menu ( border-bottom: 1px solid blue; )
      

      Point Height and Vertical Alignment

      Right now the menu links look too low and too close together. If the text of each link does not occupy more than one line, then you can increase their height and keep the text vertically centered using the height and line-height properties:

      Menu a ( height: 30px; line-height: 30px; ) GIF

      As you can see in the animation, the height property affects the height of the link, and the line-height line spacing changes the height of the text line itself. Be sure to set the same values ​​for these two properties if you want the link text to be vertically centered.

      Horizontal menu

      The main task when creating horizontal navigation is to arrange menu items in one row. This can be done in several ways.
      

      Method one

      The first option is to set the display property of the list items with the value inline or inline-block:

      Menu ( display: inline; )
      

      At the same time, tags inside

    • cannot be made block, otherwise the items will no longer line up horizontally and will return to a vertical position. Links can also be set to inline or inline-block . Choose the second one if you plan to indent links in the future.

      After this, you can start creating links. For example, you can make this style:

      Menu a ( text-decoration: none; font-family: sans-serif; color: #5757a0; display: inline-block; padding: 10px 20px; background-color: lavender; border-bottom: 5px solid #5757a0; )
      

      We added a background color and a bottom border to each link, and increased its size using padding. Notice that there are small gaps between menu items, although we did not add them via styles. They occur because the browser interprets the carriage return character between the closing and opening tags this way.

    • . These gaps can be removed by writing the list HTML code on one line:
      • Home
      • About
      • Gallery
      ...
      
      

      However, this is inconvenient, because these changes will have to be made to the HTML manually, and the code will be difficult to read. Therefore, you can try to get rid of gaps using a negative margin-right value:

      Menu li ( margin-right: -5px; )

      This code does not remove the gaps, but covers them by shifting the elements five pixels to the left. This method cannot be said to be very reliable because the size of the gap may vary depending on other styles.

      If the spaces between points are not planned in your design, it is better to use the second method of horizontal alignment of elements.
      

      Method two

      You may have already guessed that the second option for creating a horizontal menu is to use float properties. To do this, add a style for the tags

    • :

      Menu li ( float: left; )
      

      As you can see, there are no longer any gaps between points. All other styles work as before. But if you add another HTML element after the navigation (let's say ), it will be affected by the wrapping and will be aligned with the menu items. You can cancel this action by adding the clear: left property to the header. But when developing a site with a large number different pages It can become difficult to keep track of where you forgot to indicate this property. It's much easier to undo the wrapping on the navigation side. This entry will help with this:

      Menu ( overflow: hidden; )

      This will also help return the parent of the floated elements to their normal height. We already talked about this problem in previous lessons, but then we solved it through a special hack using the pseudo-element:after . The example above is another way to solve the problem with the missing height of the container.

      Note: if you set a background for a .menu element, you won't see it until you apply overflow: hidden to it. Logical, because how can you see the background of an element whose height is zero?

      In the next lesson we will talk in more detail about the capabilities of attribute selectors, with which you can set

      Hello, today we’ll talk again about creating a menu (vertical and horizontal) in wordpress through the control panel, as well as how to display it anywhere on your site using the wp_nav_menu function, everything will be much easier than my previously written guides on creating menus .

      You can download the sources for the article below

      The below guide is based on my previous article -

      However, here we will do everything simpler (we will not touch the functions.php file or use scripts to make the menu drop-down), namely, we will learn how to do vertical menu or a horizontal non-drop-down menu.

      Let's get started!

      1. Go to the WordPress site control panel, in the left menu select “ Appearance” and its sub-item “Menu”.

      Here we create the menu we need.

      For example, let’s create a menu from categories, but not from all of them, but only those that we need and name this menu– “rubrici”, this is what it will look like:

      2. To display the menu in WordPress we will use the following function:

      Everything is simple, in the above code, instead of “menu name” you substitute the name of the menu you created and paste the code anywhere on your site.

      For the menu created in our example this function will look like this:

      3. Insert the menu in the desired place on our website.

      Let's, for example, insert our “rubrici” menu into the header, at the very top.

      For example, let's take standard theme wordpress – Twenty Twelve.

      To do this, in the panel wordpress management go to the item – “Head view” and its sub-item “Editor”, on the right in the list of templates select – header.php.

      In its code we find the opening body tag, and immediately after it there is a tag that opens the “page” block - after it we will insert the output of our “rubrici” menu using the function – wp_nav_menu:

      ... ...

      We save the changes and go to our website, see what we got:

      

      As you can see, we get a vertical menu, and this is good if you need a vertical menu, however, let’s say that we need horizontal menu, then we need to specify design styles for our menu – “rubrici”.

      4. We write menu styles.

      To begin with, let's wrap the function for displaying our menu in new block, for example “menu2”, in order to specify design styles for it.

      That is, the code in the header.php file (path 3 of this guide) will look like this:

      ... ...

      The next step we need to do is to specify design styles for our new block (“menu2”), which contains our new menu (“rubrici”).

      And to do this, in the WordPress control panel, in the left menu, select the “Appearance” item, then its sub-item “Editor”, and on the right among the templates select the file - style.css.

      Go to the very bottom of the code and insert the following fragment:

      #menu2 ( padding: 0 0 0 20px; margin: 0; ) #menu2 li ( float: left; list-style: none; font: 12px Tahoma, Arial; ) #menu2 li a ( display: block; background: #20548E ; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; width: 70px; color: #EAFFED; white-space: nowrap; ) #menu2 li a:hover ( background: #1A4473; ) # menu2 li ul ( margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white; )

      Then we go to the site and see what we got:

      

      As you can see, our menu has turned from vertical to horizontal, all that remains is to adjust the design styles to suit your site.

      For example, in in this example we need to stretch the width of each menu item - the attribute is responsible for this:

      Width: 70px;

      I change it to:

      Width: 170px;

      After which my menu will look like this: