CSS and HTML5: Responsive navigation menu. Adding functions to the menu

The element has become obsolete in HTML4; it is recommended to use it instead

. In HTML5, the element is included again, but in a different capacity. Now it acts as a container for the element and menu creation.
Syntax
• menu item
• menu item
Closing tag

Required.

Example

MENU

In this issue:

• Russian kitchen. Burlatskaya soup
• Ukrainian food. Vareniki
• Moldavian cuisine. Paprikash
• Caucasian kitchen. Soup kharcho
• Baltic cuisine. Vertinyai

The result of this example is shown in Fig. 1.

Rice. 1. View of a list created using

MENU

• New... Open... Save
• Copy Cut Paste
Note

Firefox only supports creating a context menu when the value of the type attribute is context .

Specification

Each specification goes through several stages of approval.

• Recommendation - The specification has been approved by the W3C and is recommended as a standard.
• Candidate Recommendation - The group responsible for the standard is satisfied that it meets its goals, but requires help from the development community to implement the standard.
• Proposed Recommendation - At this stage, the document is submitted to the W3C Advisory Council for final approval.
• Working Draft - A more mature version of a draft that has been discussed and amended for community review.
• Editor's draft (Editorial draft) - a draft version of the standard after amendments have been made by the project editors.
• Draft (Draft specification) - the first draft version of the standard.

Alive stands apart HTML standard(Living) - it does not adhere to traditional version numbering, since it is under constant development and is updated regularly.

Specification Description

The tag is intended to display a list of menu items. Similar to tags and

inside the container the list is formed using tags
• .

  In HTML4 the tag has become obsolete, it is recommended to use the tag instead

  . In HTML5 the tag is included again, but in a different capacity. Now it acts as a container for the tag and menu creation.
  Syntax

  HTML	menu item menu item
  HTML5	...

  Attributes Sets the visible label for the menu. Sets the menu type. Closing tag

  Required.

  Validation

  The use of this tag is condemned by the HTML4 specification; valid code is obtained only when using a transitional . In HTML5, the tag is used correctly.

  HTML 4.01 IE Cr Op Sa Fx

  MENU tag

  In this issue:

  • Russian kitchen. Burlatskaya soup
  • Ukrainian food. Vareniki
  • Moldavian cuisine. Paprikash
  • Caucasian kitchen. Soup kharcho
  • Baltic cuisine. Vertinyai

  The result of this example is shown in Fig. 1.

  Rice. 1. View of a list created using a tag

  HTML5 IE Cr Op Sa Fx

  MENU tag

  • New... Open... Save
  • Copy Cut Paste

  We invite you to familiarize yourself with the new technique for creating a responsive (adaptive) menu without using Javascript. It uses clean and semantic HTML5 markup. The menu can be aligned left, center, or right. This menu switches on hover, which is more convenient for users. It also has an indicator that shows the “running/threading” menu item. It works on all mobile and desktop browsers including Internet Explorer!

  Target

  The purpose of this lesson is to show you how to regular menu make a drop-down menu on a small display.

  

  This trick will be more useful for navigation with a lot of links, like in the screenshot below. You can condense all the buttons into an elegant dropdown menu.

  

  Nav HTML markup

  Here is the markup for navigation. The tag is required to create a drop-down menu with CSS property absolute position. We'll explain this in a lesson later. The .current class points to the active/current menu links.

  • Portfolio
  • Illustration
  • Web Design
  • Print Media
  • Graphic Design

  The CSS for navigation (desktop view) is pretty basic, so we're not going to go into too much detail here. Note that we specified display:inline-block instead of float:left in the element's NAV

  • . This will allow the menu buttons to align left, center, or right by specifying text-align to
    element.

    /* 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!

        Creating dropdown menu for the websites is no more a new trend as it has been accepted very well all over the world. By using dropdown menu, designers cannot only create a visual appeal in the website design but can also provide an effective navigation scheme for the website. HTML5 and CSS3 have made creating visually appealing dropdown menu quite easy.

        Here, we are presenting some of the free dropdown menus that were developed by using HTML5 and CSS3. We hope that you will like this collection and find it useful for you. Do share your opinions with us via comment section below. Let us have a look and feel free to share it with friends as well. Enjoy!

        This dropdown menu can give your website very elegant and impressive sliding box navigation. Moreover, a submenu box can also be integrated with this in order to make it more appealing.

        

        This is a very simple CSS3 based animated navigation menu that can degrade quite gracefully to be used in older browsers as well as it is future proof so that you can use it with the next generation of browsers as well.

        

        With this CSS3 based animated dropdown menu, one can add beautiful transitions and transforms to his website or template, and add a polished look to his website.

        

        With this dropdown menu, you can achieve two level menus for easy navigation.

        

        In this dropdown menu, only CSS is used and there are no images in this dropdown menu. Moreover, it is cross browser compatible and optimized for IE7.

        

        This is another very elegant and classy type of dark CSS3 menu template that you can use on your website as well.

        

        As the name of this dropdown menu suggests, it is a creative piece of dropdown menu that can give a website a very unique and pleasing look.

        

        If you are looking for some inspiration for creating a marble style CSS3 based navigation then this dropdown menu can serve you with lots of inspiring ideas. This horizontal dropdown CSS3 menu will be suitable for black and for white websites.

        

        With CSS3, one can easily create various types of dropdown menus. One simply has to connect with his imagination power and the outcome can be mind-blowing. In this dropdown menu, when you hover on the upper menu items, the submenu items appear whirling.

        

        This is another great example of creativity and skill. This is a multilevel CSS3 based dropdown menu with transition and animation. This is UL-LI-based multilevel menu.

        

        This dropdown menu is also created by using CSS3 and sub menus are created by using animation with some amazing transition effects. Keep in mind that these new effects work only in the freshest browsers.

        

        This is another UL-LI based CSS3 dropdown menu that looks like the menu on Microsoft website. This click action CSS3 based dropdown menu is created with the help of jQuery.

        

        Here is another one-click action multilevel CSS3 based dropdown menu where submenu appears on click action and not on hover.

        

        Here is another two level CSS3 based dropdown menu where submenu slides when you hover the parent elements. This is a pure CSS based dropdown menu with no JS. It renders perfect on Firefox, Chrome and Safari browsers.

        15. Multilevel CSS3 Metal Navigation with icons

        

        This is another multilevel CSS3 based dropdown menu with icons in metal style that looks extremely beautiful. This is also UL-LI based menu.

        

        This dropdown menu comes with slide out submenus that gives it a very stylish look. The colored tabs add further beauty in the overall look. The sliding effect work in Firefox, Chrome, and Safari and possibly in Opera too.

        17. CSS Drop-Down Menu Framework

        

        Another CSS based dropdown menu framework that is clean, standards-friendly, free, easy to use and cross browser framework.

        18. Drop-down Nav Menu With HTML5, CSS3 and JQuery

        

        This dropdown menu is created by using CSS3, HTML5 and jQuery for easy and friendly navigation menu. JQuery is used to handle effects and add finishing touches as well.

        

        Here is another multilevel dropdown menu that is like Mac. Border-radius, box-shadow, and text-shadow have been used in creating this menu. It renders perfect on Firefox, Safari and Chrome.

        

        Here is another CSS3 animated menu. Powerful CSS3 effects and transitions are used here in order to build a JS free animated navigation menu.

        21. Kick-Butt CSS3 Mega Drop-Down Menu

        

        This is a mega menu that is common on ecommerce websites because it can display a lot of content while keeping the layout clean. It is cross browser compatible menu.

        

        This is another stunning example of CSS3 based navigation menu that can a sophisticated look to any website or template.

        

        This is another mega menu based on CSS3 and HTML5 that can be used to display a relatively large content in a neat and clean layout. This includes 5 containers with blocks of content and lists.

        

        CSS3 keyframes property is used to create an appealing flashy effect. Initially, the menu is in gray color but on hover, the menu color changes to very light bluish gray color to a dark blue color over a period of 200ms.

        

        This fancy navigation menu is created with JQuery using .animate() techniques and .clone() so that we can get two stacks menu item (the red and white stack).

        

        Here, CSS3 is used to create sweet tabbed navigation.

        

        This jQuery style like menu is created by using some CSS3 transitions that can replace all the fancy jQuery animation one day. The animated sliding vertical menu looks good.

        28. Fun Animated Navigation Menu With Pure CSS

        

        This is a navigation menu which you can use to add a polished look to your website or template. It uses @font-face, transforms and transitions. It renders perfect on Firefox, Safari and Chrome.

        29. CSS3 Wheel Menu

        

        Here, CSS3 is used to create an awesome, layered CSS3 wheel menu that looks amazing and can give your website a very nice look.

        30. The Fanciest Dropdown Menu You Ever Saw

        

        This dropdown menu shows that one can create the fanciest dropdown menu by using CSS3.

        

        Using dropdown menus have become a must-to-have thing in desktop applications, and with CSS and jQuery one can achieve the desired results.

        

        LavaLamp effect is based on jQuery plugin and here CSS3 transitions are used to achieve that result without any JavaScript.

        33. 3-Level Navigation Menu

        

        This is a multilevel dropdown menu that you can use on your website to display large content while keeping the layout neat and clean.

        

        This musical drop down menu is created using HTML5 and CS3 animation effects.

        

        This is a very stylish and vertical multicolor 3D CSS3 based dropdown menu for adding a fine look to your website. This is UL-LI-based menu.

        In this article, I will provide an overview of two HTML5 elements: and, which are included in the interactive elements specification. These two elements are among the least discussed among developers, likely due to their lack of support in major browsers. Firefox is the only browser that supports this tag.

        Menu Element vs Nav Element

        When we talk about menu, it's important not to confuse it with a tag, which is an HTML navigation element. It creates a web page navigation block with links that allow you to navigate through sections of one page or to other pages on the site.

        An element is a set of menu commands. The principle of its operation is similar to desktop or mobile applications. Stationary applications usually use a menu to perform various tasks. For example, the “Blur” menu in Photoshop. It is designed to perform tasks of blurring the selected layer:

        Blur Menu in Photoshop

        This is the main difference between these two elements; should contain links that help users navigate web pages while allowing them to perform specific tasks.

        Using the element

        The element is intended for creating context menus, pop-up menus and toolbar menus. But support for the last two tag functions has not yet been implemented in any browser, including Firefox.

        For now, we'll focus on creating the context menu.

        Context menu

        The context menu appears when we click in the application right click mice. Display options depend on where the user clicked:

        
        

        The original context menu in OS X and Ubuntu

        JavaScript option

        You can add context menus to web pages through JavaScript or JQuery plugins. The problem is that these methods use great amount markup, and the script itself removes the original browser context menu. This may result in an implementation that does not meet user expectations:

        
        

        Customized context menu in Google Drive

        Original solution

        Items and will add new items to the version of the original context menu. In the example below, we will add to the tag new item context menu called "Hello World":

        Hello World

        The main parts of the above code snippet are the attributes - id , type and contextmenu , which define the menu type as context , as well as the area where the new menu should be displayed.

        In our case, when you right-click, a new menu will appear anywhere in the document, since we assigned it using the contextmenu attribute for the entire body section.

        You can limit the range within a specific section of the page by assigning a value to the contextmenu attribute on the , , etc. elements:

        Hello World

        When we view this code in a browser (currently Firefox only), we'll see that the menuitem we declared appears at the very top of the list:

        
        

        New menu item, "Hello World", which loads as part of the original context menu

        Adding submenus and icons

        Submenus are a group of items with related or similar actions. The Image Rotation menu in Photoshop is a great example of this. It includes several submenu items that allow the user to select the rotation angle as well as the direction of rotation.

        Using the menu element when adding submenus is simple and straightforward. Include another element with a label attribute to declare the menu name, like this:

        Rotate 90 degrees Rotate 180 degrees Flip horizontally Flip vertically

        When we run this code in the browser, we will find a new menu with four submenu items:

        
        

        Icons

        A new icon attribute has also been introduced to add icons to the left of menu items. It's worth noting that this attribute is only applicable to the . Specify the path to the icon for icon , for example like this:

        Rotate 900 Rotate 1800 Flip horizontally Flip vertically

        And icons will appear in our menu, as you can see in the picture below:

        
        

        Each submenu item is now illustrated with an icon

        Adding functions to the menu

        We've created what looks like a context menu, but it doesn't work like a functional menu yet. We can fix this using JavaScript.

        Let's take our example with the "Rotate image" submenu and add a function that will rotate the image on which we right-clicked. CSS3 transforms and transitions can perform image rotation in the browser. Here's a style that will rotate the image 90 degrees:

        Rotate-90 ( transform: rotate(90deg); )

        Having specified the style, we must write a function to apply it to the image:

        function imageRotation(name) ( document.getElementById("image").className = name; )

        Add this function to the corresponding one using the onclick attribute and pass a parameter with the class name rotate-90 :

        R Rotate 900 Rotate 1800 Flip horizontally Flip vertically

        To complete our submenu, create styles that will rotate the image 180 degrees and flip it. And add each function to the corresponding submenu item along with the parameter. You can see a working version of such a menu on this demo page.