Navigation menu css. 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); .navli ( 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!

    The task of any designer, web developer and, of course, marketer is to constantly invent something new and unique. The reason for this is quite simple: the company needs to stand out from the endless line of brands competing with it in the market, and a unique style will help to do this. But sometimes adventurous design can do more harm than good.

    And most often, web resource navigation suffers from various kinds of experiments.
    A web usability report by KoMarketing reported that approximately half of those surveyed in the study use the navigation menu when exploring a new web resource. At the same time, 37% of respondents said that inconvenient website navigation is a sufficient reason to leave the site and never return to it.

    Needless to say, the navigation system has a huge impact on the quality of the user experience and you can't afford to mess it up.
    There are many places on the site where you can implement bold experiments and surprise visitors with something unexpected and attractive. However, navigation should always remain a solid foundation for your site. Visitors should easily understand where the menu is and how it works in order to be able to quickly navigate the resource and find the necessary information.

    That doesn't mean you can't try new techniques like left-aligned or full-page drop-down menus, or those that appear on scroll. This simply means that you must organize everything in such a way as to make it as easy as possible for visitors to work with the resource and improve the quality of interaction with it.

    Remember: user experience should be at the top of your list of priorities.

    Of course, what works for one site won't necessarily work for yours - which is why split testing should be part of the whole process. Designing navigation seems simple and straightforward, especially if you follow traditional navigation rules, but you can never be sure what will work best for your audience until you try other existing options. Using split tests, testing all these alternatives is quite easy.

    However, before you go design your own experiment, take a look at what the experts have already been able to discover. Their results can give you a better idea of ​​which hypotheses to test first in your own tests.

    1. Menu structure

    While there is no data on what usability issues Portland Trail Blazers' website users were experiencing, it is clear that someone did encourage them to hire Sq1 Agency to evaluate their conversion funnel and determine what was potentially causing their weak sales.

    The marketing agency focused on a navigation system that clearly wasn't optimized for the user experience. Here's what she looked like in 2013:

    The menu design itself was difficult to understand, and the structure could be completely confusing. After identifying the purposes for which visitors used the menu, Sq1 decided to update its design and structure:

    1. It removed the transparent background.
    2. The navigation items in the drop-down menus have also been reshuffled to make them feel more logical and orderly.
    3. Mobile responsiveness of the menu has been improved.

    As a result of the split test, it became clear that the new and improved menu structure led to a 62.9% increase in revenue. The Trail Blazers site's navigation has undergone several changes since then, but the opaque background and vertical orientation have remained the same. Here's what the menu looks like today:

    

    2. Menu titles

    When the Formstack site designers were faced with the task of developing a navigation menu, they first tried to answer questions like:

    1. What kind of content should be displayed in the menu?
    2. How should it be structured?
    3. Which pages should have priority in the hierarchy?

    The page they decided to launch their navigation menu on was called “Why Use Us.” They had high hopes that the headline would drive traffic and conversions, and were surprised to see that the click-through rate didn't meet their expectations.

    This is what this page looked like in 2013:

    Formstack - up to

    Disappointed with the result, the developers decided to change the name “Why Use Us” to “How It Works”. This was the name that was invented before the launch of the project, but was eventually discarded. As you can imagine, they were shocked at how a simple title change resulted in a 50% increase in page views and an 8% increase in conversions.

    Here's what the site looked like in March of that year when the changes were implemented:

    Formstack - after

    3. Menu logic

    In 2014, the people responsible for the Bizztravel Wintersport project began to notice how many actions site visitors had to take to find the destination and vacation location that suited them best. It took an average of 5 clicks to get to the desired region (just a region, not a specific destination). The authors of the service immediately realized that this omission threatened them with much bigger problems in the future.

    It was soon determined that the site's weakest point was its navigation. The lack of logic and simplicity forced the developers to radically change not only the menu itself, but also the headings. This could make the search process easier for visitors.

    Split testing was carried out to create an improved and more intuitive navigation system for the site. It was found that the new version of the design generated 21.34% more conversions than the previous one.

    

    

    As you can see, the improved navigation system relies on clearer signage - such as country flags and other recognizable symbols - creating a more intuitive interface.

    4. Hidden menus

    When people argue about , the real conversation is about whether to hide the navigation behind an icon (like a hamburger menu) or not. While hidden menus are indeed necessary on sites viewed on mobile devices, the question of whether these minimalistic navigation solutions should be used on desktop resources is still open.

    Consulting agency Nielsen Norman Group conducted an experiment to try to find out exactly what happens when using a hidden menu on desktop and mobile versions of websites. Unfortunately, there is no exact information about which sites were tested, but the essence of the test is clear in itself.

    

    If you chose the icon located in the center of the page - which, logically, should lead to the main page of the site - then you are right.

    Here's what NMG found out:

    Desktop version of the site

    1. Visitors used the hidden menu in 27% of experiments.
    2. Visible menu was used 48% of the time.
    3. On sites with hidden menus, people had to spend more time figuring out where to look for what information; specifically, they were 39% slower than those on sites with visible menus.

    Mobile version of the site

    1. Users used hidden menus in 57% of experiments.
    2. When the menu was partially visible (using a fully visible menu is not practical on mobile versions of sites), it was used in 86% of cases.
    3. Hidden menus slowed down users by 15% (compared to those browsing a site with visible menus).

    In addition, the researchers also found that hidden menus are harder to detect (which is quite obvious). On sites without clear signs at the top, visitors spent more time finding the information they needed. Hidden menus make a task 21% more difficult and reduce the ability to complete a task by 20%.

    Below is a good example of a simple, clear and visible menu:

    

    5. Mobile menus

    As you can see from the example above, mobile users are probably more familiar with hidden menus than desktop users. But when it comes to figuring out how to create a hidden menu for your mobile site, relying just on the proverbial hamburger icon isn't enough. Research conducted by the Sites for Profit agency will answer why.

    The first experiment aimed to test the effectiveness of the hamburger button design. Three versions of the hidden menu icon were created:

    1. The basic model, which consisted of only three horizontal stripes.
    2. A hamburger icon consisting of three horizontal lines surrounded by a thin line.
    3. A hamburger icon with the words “MENU” placed at the bottom.

    It was found that the second option (three stripes in a square) showed the highest number of conversions. This was explained by the fact that this version of the icon is more reminiscent of a classic button, looking at which visitors instantly understood that they could click on it.

    Caffeine Informer - hamburger icon

    The second experiment was designed to test whether the word “Menu” placed next to an icon had any effect on conversions. Four versions of the hidden menu icon were created:

    1. The winning design in the previous experiment was chosen as the base design: three stripes in a square.
    2. The word “Menu” instead of an icon.
    3. A hamburger icon and the word “Menu” placed together and surrounded by a line.
    4. The word “Menu” surrounded by a line.

    According to the data obtained, version 3 of the icon received more clicks; however, the word “Menu” enclosed in a square generated more conversions.

    Caffeine Informer - menu icon

    So, what did you learn about the navigation menu after doing all these experiments? Obviously, if visitors somehow interact with your resource incorrectly, then, most likely, an unsuccessful navigation system is to blame. Navigation typically doesn't require as much time to be spent designing a site's homepage or even choosing the appropriate wording for a popup, but it's worth remembering that this UI element can have a serious negative effect on conversion rates if it's not will be properly processed.

    When designing your navigation menu, keep the following guidelines in mind.

    The company logo should always lead to the main page of the site. According to the previously mentioned KoMarketing report, 36% of people tend to use a logo as a means of returning to the beginning.

    Despite the numerous menus and search bar, the REI logo is visible enough that no one has any doubts about where to click to return to the home page.

    

    Keep it simple. The more pages you try to fit into one web space, the higher the chances that you will simply confuse your visitors. We strongly recommend that you simplify your menu layout and try to use as few menu options as possible (5 to 7).

    The La Moulade navigation is a great example of this:

    

    The company could have posted information about its services on several pages, but it made it even simpler. The site has only three pages, and a funny animation effect that occurs when scrolling provides visitors with all the information they need about the quality of work with the company.

    Organize your menu based on priority. The Serial position effect indicates that pages located closer to the beginning or end of a list will automatically dominate users' minds.

    

    As you can see on Comedy Central's website, the shows are not listed in alphabetical or any other logical order, which would help users find what they're looking for much faster. One might assume that "The Daily Show" is probably the most popular show - or the service wants to draw more attention to it - and that's why it ranks at the top.

    Menu names should be concise, but at the same time succinct. This is not a place where you can give free rein to your imagination.

    Menus should be as large as possible for any screen size: the text will be easier to read and the buttons easier to click.

    The Adwyse website presents everything in the best possible way: the menu is large enough that all the headings fit easily, they are easy to read and click. This applies to the navigation system on the desktop version of the site:

    

    Same for mobile:

    

    Use color or any other hover effect to be able to use the menu to indicate to visitors what area of ​​the site they are currently in. For this purpose, the Netflix service very successfully uses its branded red color:

    

    Make the navigation menu “sticky”, that is, remaining on the screen even when scrolling, so that it is always visible. This applies to any navigation style: mobile or desktop, visible and hidden, horizontal and vertical.

    The Colored Lines website boasts a colorful, icon-based navigation menu that does not disappear as you scroll down the page.

    

    Mobile and desktop users would like to have a menu that meets their needs, so offering one design for all types of visitors will not work. Intuit's website is a great example of why you should do this.

    Desktop menu option:

    

    Mobile:

    

    Either they don't have mobile visitors, or they just don't care that people have to zoom and scroll to find anything on such a non-responsive site.

    When you start developing a menu for the mobile version of the site, do not forget to make it clearer and more visible that the menu is clickable. Boundaries are the best way to do this. Take a look at the example below:

    

    Therefore, try not to use them - both in the mobile version and in the desktop version. Not everyone manages to choose such pictures that will be understandable and easily recognizable. Brit & Co succeeded in:

    

    There's nothing wrong with having deep, multi-level menus. But you should not combine them with hidden menus. Use mega menu design and breadcrumbs to make further navigation easier.

    The Verizon Wireless site managed to avoid breaking both of these rules. Firstly, they are completely transparent in providing the information they have about the navigation system and have done a fantastic job of organizing its structure:

    

    Secondly, they prudently implemented breadcrumbs into the system. No matter how far visitors go in their exploration of the site, they can always come back.

    

    If you want to use a creative navigation option when entering the site, feel free to do so. Place the main menu in a place users expect.

    Many designers experiment with popup/slide forms because unexpected movement on the screen needs to capture the attention of visitors well. But pop-ups should not be relegated to windows announcing urgent offers and the like, they should be used for the sake of navigation, as is the case with the Bolden site menu.

    

    Conclusion

    Following all the rules and your own intuition when designing a navigation menu is not enough to make people happy. Anything that doesn't meet their expectations of your site, or causes confusion, can cost you conversions. Therefore, split testing is mandatory when designing a navigation system. And not only.

    In his work, he devoted a lot of time to developing various types of navigation for websites, both using . I decided to put all the developments on the topic together and post them as a kind of collection of lessons on creating a navigation menu. The review presents different types of menus, in terms of execution style and functionality, multi-level with drop-down submenus, menus in the popular “accordion” style, vertical and horizontal with dynamic effects, simple and complex in structure.
    Based on these lessons, based on the examples given, experimenting and using a little imagination, you can easily make your website stand out from the crowd, spectacular and memorable.

    ✓ By clicking on the title, you will be taken directly to a page with a detailed description of the entire process, and by clicking on the picture, you will go to a page with an example of the operation of the menu you have chosen ツ

    1.

    

    This amazing menu was created using pure CSS3 styles and features, without any additional image files or javascript. With modern browsers supporting new CSS3 standards, it has become possible to use all the magical properties of CSS3 magic in website design. By putting this menu creation technique into practice, you can achieve amazing results.

    2.

    In this tutorial, you will learn how to use styles and new CSS3 properties, without using javascript or images, you can create a great, functional and fast accordion style menu.

    3.

    A detailed tutorial on creating a beautiful accordion-style menu using CSS and jQuery. The menu has been tested and works great in all modern browsers. Using the css3 linear gradient function in the design makes this menu more expressive and dynamic.

    4.

    The lesson presents the entire process of creating an interesting, vertical menu for a website, built entirely on the use of CSS and a small image file, which you can easily edit to suit your needs if desired.

    5.

    As a continuation of the previous lesson, a detailed description of the option for creating a vertical menu with nested sub-items has been added

    6.

    A small, but at the same time detailed lesson on creating a high-quality, with a small amount of HTML, CSS and JavaScript code, with a beautiful interface, a navigation block in the “Accordion” style.

    7.

    Another interesting solution in terms of creating a multi-level navigation menu using jQuery. The final product's cross-browser compatibility, JQuery animation and CSS3 gradient make the navigation block even more attractive.

    8.

    I like the solution of having menus behave like dropdowns. Craftsmen often use JavaScript to achieve this effect, but this tutorial shows how to achieve what you want using only pure CSS styles and functions.

    Translation and adapted version of the lesson on creating a beautiful, horizontal menu in the “Lava-Lamp” style. There are many versions of menus made in this style on the Internet, based on the knowledge gained from the lesson, you can freely create something of your own.

    That's all for now. This collection presents only a small part of what can be done in terms of creating beautiful, individual, and most importantly functional navigation menus for your projects. I hope someone will find a suitable option for themselves and use it in their work on improving the site. If anyone liked the article, comment, share with friends via Twitter, Google+ and other social networks. services, or you can just bookmark the article

    Good day to everyone who is now reading 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, the paired element

      creates a bulleted list and
      • - one element of the list. For clarity, let's write the code for a 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 of 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. When the panel is designed horizontally, all menu items are located in the page header or in the “footer” (sometimes navigation elements are duplicated, appearing simultaneously at both the top and bottom).

        As an example, we will create a horizontal panel, the menu items of which will be designed using CSS (cascading style sheets), or rather transformed. So, each individual 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:

        • -ms- (Internet Explorer)
        • -o- (Opera)
        • -webkit- (Chrome, Safari)
        • -moz- (Firefox)

        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 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 company
      • Products
      • Contacts
      And now vertically. I said vertical!

      For the second program we use the previous code as a basis. I wanted my vertical menu items to have rounded corners rather than beveled ones.
      

      To do 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 company
      • Products
      • Contacts

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

      Sub-items in the menu: drop-down list

      We have looked at the main groups of navigation panels, but there are several more varieties, or better yet, add-ons.

      

      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 > home Products Candies Cakes Cookie Contacts

      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 :block)

      • home
      • Products
        • Candies
        • Cakes
        • Cookie
      • Contacts