Working with nested elements is tricky because, say, when you move a parent element with it, all its children move as well. Therefore, we will apply a few tricks that will support the desired 3D translations of the submenus and their children. The main idea is to increase the cast value to ensure that the sublevels are not shown when we all move a little to expose the edges of the parent elements. Of course, this is not necessary when the parent element covers the submenu.
Please note that we are using CSS (transform, transition) properties that only work in modern browsers. An example of an alternative for non-supporting browsers can be found at the end of the component.css file, which simply shows the first-level menu. We do the same in the absence of JS.
For the menu, we need the following nested structure:
Here, each level is wrapped with a div tag with the mp-level class. We will not be able to apply this kind of fixed positioning to the menu, as the transformations will make it behave like an absolute positioned element, so we will have to use absolute positioning, which will lead to the problem of unwanted site behavior (menu scrolling and depending on the height of the document).
To avoid scrolling the menu and clipping it if the site content is too short, we'll use a little trick by taking the following page structure:
Now we assign the following CSS styles to the elements:
Html, body, .container, .scroller (height: 100%;) .scroller (overflow-y: scroll;) .scroller, .scroller-inner (position: relative;) .container (position: relative; overflow: hidden; background: # 34495e;)
This will allow scrolling content when the menu of the mobile version of the site is closed, and it will also become equal to the height of the browser window. In this way, we imitate what a fixed positioning would achieve. The plugin itself can be called like this:
New mlPushMenu (document.getElementById ("mp-menu"), document.getElementById ("trigger"));
Or, if the submenus should cover the previous levels:
New mlPushMenu (document.getElementById ("mp-menu"), document.getElementById ("trigger"), (type: "cover"));
Shifter is a jQuery plugin for simple slide out mobile navigation. Shifter works by checking target elements in the DOM and obligatory events with them.
SlickNav
SlickNav is a responsive mobile menu plugin for jQuery with features like multi-level menu support, cross-browser compatibility, flexible, simple markup and degrades gracefully without JavaScript.
Menutron
Menutron converts your navigation menus from a list to a selection menu when the browser is resized. On mobile devices, the select menu pulls up a native control, making it easier to select an item.
Responsive and touch-sensitive menu
A tutorial for creating responsive and touch-friendly dropdown navigation. The technique consists of 3 main parts, which are Simple dropdown navigation based on HTML and CSS, implementation of Responsiveness using media queries and their acceptance for touchscreen devices using super tiny jQuery plugin.
jQuery.mmenu
MMENU is a jQuery plugin for creating smooth, double sliding menus application for you mobile website or responsive website.
Navobile
JQuery Navobile is a jQuery plugin that makes mobile navigation easy. Navobile uses CSS to apply CSS3 translations, mobile detection and navigation position fixing.
FlexNav
FlexNav is a mobile first example of using media queries and having a nice layered menu with support for touch, hover opens, and keyboard input tab accessibility.
Responsive Retina-Ready Menu
Responsive menu with three layouts for different browser sizes. The menu automatically changes to one of three different layouts depending on the size of the browser window: a "desktop" row version, a two-column tablet optimized version and a mobile version with a menu link to show and hide navigation for small screens. Font was used as icons to avoid blurring at different resolutions.
slimMenu
slimMenu is a lightweight jQuery plugin that is made to create fast and layered navigation menus on fly.With slimMenu, you no longer have to struggle with media requests to create responsive menus, or any other heavy plugins for creating layered submenus. It's 100% mobile responsive.
Horizontal slide-out menu
A simple, horizontal menu slide with a thumbnail grid layout like a submenu. The menu slides out from the top when the main menu item is clicked and the sub-items disappear in. After clicking another item, the height of the submenu will adjust and the content will disappear in and out when you switch.
One of the areas that requires special attention when developing an interface design for a mobile device is the navigation menu. If the site has many sections or pages, special skill is required to place all items in a small screen resolution. Very often, navigation turns into a bunch of lines or a bunch of buttons piled on top of each other. In this tutorial, we'll look at one of the ways to create navigation using jQuery.
Task
The screenshots below show the situations with templates on mobile screens. If the navigation has 3 or 4 buttons, then its location will be saved in one line. But when the menu contains 6 or more items, the result is an ugly bunch.
Solution
One common way is to convert the navigation to a dropdown list based on the select element. This solution has the disadvantage that the select element cannot be styled with CSS. Javascript plugins like Chosen let you customize the menu, or you have to be content with the system styles for the dropdown. Also, the user can be confused when the widescreen version of the menu structure is transformed into a dropdown list on a mobile device.
2) Output as a block
Another popular way is to shape menu items as vertically stacked items. However, this approach takes up a lot of heading space. If the navigation contains many buttons, the user will have to scroll through a long list to get to the information.
3) Menu icon
And the last method we'll look at in our tutorial is using a menu icon to enable navigation. This approach saves space on the page (which is important on a mobile device) and gives you full control over the look with CSS. The menu icon and navigation itself can be presented in accordance with the overall style of the site.
Mobile navigation included with jQuery
In this tutorial, we'll show you how to create navigation for a small screen. JQuery will be used to prepare the menu icon and enable navigation. No additional HTML tags are required for navigation to work.
A simple structure will be used for our menu:
The menu requires JavaScript code to function. The function prepares the element
