jquery popup menu. JQuery: Dropdown menu using cookies

In order to write navigation yourself in the form of a vertical drop-down menu in jQuery with a drop-down list of subcategories, you need to understand the very principle of operation of this mechanism. But first, let's look at the navigation structure:

Navigation

As you may have guessed, our drop-down menu is based on bulleted lists. When you hover over a tag

everything contained in it will be revealed, namely:

test 1
test 2
test 3
test 4

But how, you ask? Yes, everything is actually very simple. First, let's look at the style sheet of our navigation list, it will look like this:

Body ( background: rgb(244, 244, 244); font-family: Verdana; font-weight: 100; ) /*---Navigation---*/ #menu ( width: 200px; margin: 0; padding: 2px; ) #menu li ( list-style-type: none; ) .menu ( position: relative; background: chocolate; background: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3) ; background: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); background: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); : 1px solid #2AC4B3; .menu:hover ( background: #00c; background: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -webkit-linear-gradient( top, rgb(230, 230, 230), #0CBFAB); background: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB) .menu span ( width: 11px; height: 11px; display: block; position: absolute top: 8px; cursor: pointer; width: 150px; padding: 1px; position: absolute; top: -1px; left: 198px; ) .menu ul li ( background: chocolate; background: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); background: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); background: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); border: 1px solid #fff; ) .menu ul li:hover ( background: #00c; background: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -webkit-linear-gradient(top, rgb( 230, 230, 230), #0CBFAB); background: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB) .menu a ( padding: 5px; display: block; text-); decoration: none; color: white; ) .menu a:hover ( color: white; ) /*---END---*/

From the style sheet you can see that the drop-down list is not initially hidden, but we will correct this point using:

$(document).ready(function())( $(".menu ul").hide(); $(".menu span").css("background", "url("down.png")") ; $("#menu li").hover(function())( $(this).children("ul").show(); /*Equivalent to $("ul", this).show();*/ $(this).find("span").css("background", "url("right.png")"); /*Equivalent to $("span", this).css("background", "url"); ("right.png")");*/ ),function())( $(this).children("ul").hide(); /*Equivalent to $("ul", this).hide(); */ $(this).find("span").css("background", "url("down.png")"); /*$("span", this).css("background", " url("down.png")");*/ )) ))

Now let's look at the jQuery code for the drop-down menu in detail, because... Perhaps it will not be entirely clear to some. At the very beginning the following construction is written:

$(document).ready(function())( ))

It specifies the commands that must be executed after the page has fully loaded. This was done so that various kinds of errors do not appear when it is impossible to find any object due to the fact that it simply has not yet loaded.

$(".menu ul").hide();

What does this entry mean? The “$()” construct allows you to select elements. Therefore, at the very beginning we need to hide our drop-down list. We take the “$()” construction and write the object we are interested in in it. In our case, this object will be a bulleted list with the class “menu”. Next, we write the “hide()” method, which allows us to hide the object of interest to us.

$(".menu span").css("background", "url("down.png")");

What is she doing? It looks for a tag whose parent element is assigned the class “menu” and, using the “css("background", "url("down.png")")" method, assigns the "background" style property the value "url("down. png")". "down.png" is an icon indicating that the list can be expanded.

Then comes the construction that will expand our list, it looks like this:

$("#menu li").hover(function())( $(this).children("ul").show(); $(this).find("span").css("background", " url("right.png")"); ),function())( $(this).children("ul").hide(); $(this).find("span").css("background" , "url("down.png")");

We are looking for a tag whose parent element is assigned id="menu". Next comes the "hover" method and two functions in parentheses. The first function will be executed when the mouse is hovered, and the second will be executed if the mouse cursor leaves the element of interest to us.

The first function says:

$(this).children("ul").show(); $(this).find("span").css("background", "url("right.png")");

The construction “$(this)” means that we are interested in the element that we are currently hovering over (this from the English this). And we hovered over the tag

. Next, using the “children("ul")” method, we look for a nested tag in the tag and display it using the “show()” method.

After this, we look for descendants of the tag, namely: the tag and change its background to another icon.

After this, a function is written that does everything as it was originally, after the mouse cursor leaves the list element:

Function())( $(this).children("ul").hide(); $(this).find("span").css("background", "url("down.png")"); )

In order for the written code in jQuery to work and our drop-down menu to work correctly, you need to download the library from jquery.com and connect it by writing the line after the opening tag.

Well that's all! In conclusion, I would like to note that if your site is quite heavy, then perhaps the script will launch too late (the site will take a long time to load) and users will see how it first opens completely and only then hides, which, you see, is very ugly. Therefore, it is necessary to move all jQuery commands behind this construction: “$(document).ready(function()())”. It will look like this:

$(document).ready(function())( )) $(".menu ul").hide(); $(".menu span").css("background", "url("down.png")"); $("#menu li").hover(function())( $(this).children("ul").show(); $(this).find("span").css("background", " url("right.png")"); ),function())( $(this).children("ul").hide(); $(this).find("span").css("background" , "url("down.png")");

The connection of our script must be moved from the tag to the very end, before the closing tag, or you can connect the script immediately after the bulleted list.

(downloads: 314)

Nowadays jQuery navigation menus are more than just blocks of text with links in them. In I shared how you can use JQuery and CSS3 to create a navigation menu that looks really cool.

Using the power of JQuery, we can turn the navigation menu into a dynamic menu. While you can currently only use CSS3 to create dynamic navigation, JQuery makes menus even more powerful.

In addition to dynamic functions, design also plays an important role. If only because this is what visitors see first when they come to your site.

If the menu is unpresentable, it will give users a poor user experience. A good menu design will in turn increase the quality of your website and provide a better user experience.

Today I present to you 30 great jQuery navigation menu examples.

1.Pushy

Pushy is a responsive, non-canvas navigation menu using CSS transforms and transitions. It works great on mobile devices. Be sure to watch the demo and you will definitely like it.

Demo | Download

2. Slinky

This is another great jQuery menu for creating beautiful scrollable navigation lists. Its distinctive feature is the small size of the source files.

Demo | Download

3. jQuery Pop Menu

This is a simple responsive popup menu with very interesting features. When you click on the menu icon, a menu window with element icons pops up. Check out the demo.

Demo | Download

4. Slidebars

Slidebars is a JQuery framework for quickly and easily implementing application styles without being tied to a canvas. Slidebars also handles orientation changes and resizing.

Demo | Download

5. jQuery Square Menu

JQuery Menu, which displays a square animated website menu using JQuery and CSS3. Make sure of this by watching the demo.

Demo | Download

6. Perspective Page View Navigation

This jQuery navigation menu turns a page into a 3D menu. The idea is to create a mobile app design in which when you click on a menu icon, the content of the page slides to the side and the menu is brought to the front.

Demo | Download

7. SlickNav

Plugin for creating a responsive mobile jQuery menu with several levels and flexible but simple settings. Compatible with different browsers, navigation using the keyboard is possible.

Demo | Download

8. Menu

jQuery menu for applications with and without binding to the canvas with pop-up sub-items. Thanks to numerous options, add-ons and extensions, very flexible menu customization is possible.

Demo | Download

9. Sidr

jQuery plugin for creating menus and easily adding responsive features. With Sidr you can create various elements of your website, as well as responsive menus.

Demo | Download

10. slimMenu

slimMenu is a small jQuery plugin that will help you develop responsive, multi-level navigation menus. What's cool about it is that you can have several different menus and they will all be completely responsive.

Demo | Download

11.HorizontalNav

jQuery navigation menu, which allows you to set a horizontal menu across the entire width of the container. This plugin makes it very easy. In addition, support for IE7 can be implemented.

Demo | Download

12.FlexNav

This is a mobile-first example of using media queries and JavaScript to create great multi-level menus with support for touch screens, hover effects and keyboard navigation.

Demo | Download

13. jQuery Menu-Aim

jQuery menu that fires events when the mouse hovers over a drop-down menu item. Ideal for creating responsive dropdown menus like Amazon's.

Demo | Download

14. SmartMenus

A jQuery menu plugin that offers a simple and intuitive way to display menus. Creates responsive menu lists. Works on all devices!

Demo | Download

15. Shifter

Shifter is an easy to use mobile-first jQuery plugin for creating slide menus that slide out from the right side when you click on the switch button. There is only one maxWidth option to configure. It allows you to adjust the resolution/orientation for mobile devices.

Demo | Download

16.Hamburger

Hamburger is a jQuery plugin for creating an Android App-style slide menu that places a pop-up menu on the right edge of the screen. When the menu is expanded to full size, it overlaps the content area, but not the action bar.

Demo | Download

17. Focucss

Focucss is a jQuery navigation menu that creates a non-canvas sidebar menu with cool blurring features that can help you draw users' attention to the main sections of the site and make less noticeable sections less noticeable.

Demo | Download

18. Drawer

Drawer is a jQuery plugin for creating a responsive, animated menu that pops out from the side of the screen when clicked. You might have seen similar functions in Android applications.

Demo | Download

19.Datmenu

Datmenu is a premium jQuery responsive menu with various CSS3 animation features. What's great about this plugin is that it's fully customizable with js options.

Demo | Download

20. jPanelMenu

jPanelMenu is a beautiful and modern jQuery menu that allows you to create a panel navigation menu with CSS3 animation transition features. The style of jPanelMenu is reminiscent of the mobile versions of Facebook and Google. The plugin can be used for a variety of mobile applications.

Demo | Download

21. Fly Side Menu

Fly Side Menu is a cool navigation menu plugin that uses CSS3 to create a side menu with 3D transformations and transitions.

Demo | Download

22. PageScroll jQuery Menu Plugin

PageScroll is a custom mobile jQuery menu recommended for use on any website as well as landing pages.

Demo | Download

23.DD Icon Menu

DD Icon Menu is a jQuery plugin that allows you to create a vertical menu of icons located on the edge of the screen with menu sub-items that expand on hover.

Demo | Download

24. JQuery Mobile Date Navigation

jQuery menu that allows you to navigate by dates in a selected range (week, month or year). Ideal for requesting information using AJAX calls.

Demo | Download

25. Navobile

jQuery navigation menu plugin that makes it very easy to create mobile menus. Uses CSS transitions to set the menu position on mobile devices.

Today I would like to make a selection of a relatively new generation of navigation for the site - full-screen menus. They are used in cases where there is no navigation itself on the page, there is only one button, when clicked, a menu opens. A similar principle can be seen in the -framework: when the navigation bar no longer fits, the block with the list of menu items is simply hidden. In its place appears a button with an image of, as a rule, three stripes. When pressed, the full menu appears. In many modern websites, the menu is always hidden, even on large screens. This was done so as not to load the page. Although you shouldn’t do this on all your projects now. If the menu is of secondary importance, you can hide it, but if you have a large site with a complex structure, it is better not to use this option. So. We figured out the general principle of operation, but this type of menu is quite standard, I want something new. Not long ago I began to notice sites where the navigation not only drops out, but opens completely in full screen in a pop-up window. Something like popular slide panels, but this whole thing takes up the entire area of the work area. Separate jQuery plugins and css3 solutions began to appear behind the sites, which this topic is actually about.
Personally, I really like this implementation of the navigation menu, as it is convenient for users with mobile devices and looks very impressive on large monitors. More and more sites with full-screen menus are appearing, there are also more free jQuery plugins, and the concept is gradually becoming a trend.
So. Here are 20 jQuery plugins for full-screen menus in a popup window.

Full-Screen Pushing NavigationOne of the best free full-screen navigation scripts today. When you click on the “Menu” button, navigation appears, plus there is a block with contacts, this is very convenient for the site visitor, since the path to the call becomes 1 click less. I would like to note that the script and on mobile devices the block with contacts becomes under navigation.
A very nice addition to the window design is the animated SVG icon. By default, it looks like three bars, but when clicked, the icon transforms into an arrow, which shows that the menu can be hidden. Rounded Animated Navigation Another very cool jquery full-screen navigation script from the same developers as the plugin above. This script has a very cool and unusual appearance effect. When you click on the menu button, a wave emanates from the icon using css3 across the entire monitor, which grows into the background of the menu items. The same hiding effect.
This navigation works great on mobile devices, but given that the appearance effect is quite heavy, I think everything will be slow on older phones (I haven't tested it, so I'll be glad if you write your experience in the comments).

Perspective Page View NavigationAnother spectacular full-screen menu script. When you press the menu button, the visible part of the page moves to the side with the effect, and a menu appears in the free space. There are several appearance animation effects.
Unfortunately, it does not work correctly on mobile phones: if there are a lot of menu items and they do not fit on the screen, then vertical scrolling does not appear and the navigation is simply cut off.

Full Page Intro & Navigation A fairly simple full screen menu script. I can’t say that it’s very effective, but it will be convenient on mobile devices.

Fly Side MenuAnother full-screen menu, in which the visible part with the 3D effect is moved to the side, but from other developers. Unlike the previous similar script, this one should work well on mobile devices, since if the menu does not fit on the screen, vertical scrolling appears.

After receiving several requests, I decided to write an article on how to make a drop-down menu. The best and easiest way to create such a menu is to rely on jQuery.

Let's look at the HTML markup first

Simple dropdown menu based on jQuery Simple dropdown menu

Home
Products
Services
Contact Us

Content

There is a simple unordered list of ul , its li tags are the basis of the navigation menu. Next, add the code below to the appropriate li tag, this will structure the dropdown list.

If you are paying attention, you will notice two things:

1. The li tag has a dropdown class.
2. The parent link has the ddIcon class.

The dropdown class is used in jQuery to show/hide a dropdown menu. The second class, ddIcon, is used to display a pointer to the dropdown menu.

There is nothing special about the menu styles - the usual styles are:

Container ( width: 960px; margin: 0 auto; padding-top: 50px; ) .container h1 ( font-size: 30px; color: #666; margin-bottom: 1em; ) .container nav ( border-radius: 4px; background-color: #fff; height: 37px; .container nav ul li ( position: relative; float: left; ) .container nav ul li a ( font-size: 12px; text-decoration: none; font-weight: bold; text-transform: uppercase; padding: 13px 15px; display: border-right: 1px solid #f9f9f9; ") no-repeat 86% 52%; padding: 13px 25px 13px 15px; ) .container nav ul li a:hover ( background-color: #cc333f; color: #fff; ) .container nav ul li.active a ( background -color: #cc333f; color: #fff; ) .container nav ul li:first-child a ( border-radius: 4px 0 0 4px; ) .container nav ul li .subNav ( position: absolute; background-color: # cc333f; padding: 15px 15px 20px; left: 0px; display: none); ) .container nav ul li .subNav h4 ( margin-bottom: 0.5em; ) .container nav ul li .subNav h4 a ( font-size: 11px; color: #edc951; text-transform: capitalize; border-bottom: 1px solid #D33B47; padding: 7px 10px; : #fff; -moz-transition: color 0.5s ease 0s; ) .container nav ul li .subNav h4 a span:hover ( color: #390206 ) .container nav ul li .subNav a ( float: none; border: none ; display: block; capitalize; color: #fff; -moz-transition: color 0.5s line-height: 1.3; .container nav li .subNav:hover : #390206; ) .container .section ( clear: both; padding: 10px; ) .container .section article p ( font-size: 16px; color: #488fb8; line-height: 1.3; ) .container .section article header p ( padding-top: 20px; font-size: 20px; color: #333; line-height: 1.3; margin-bottom: .4em; )

Now we need to revive drop down menu. The simplest jQuery function will help us with this.

$(function())( $("li.dropdown").hover(function() ( if ($("this:has(div.subNav)"))( $(".subNav").css((" display":"none")); $(".subNav", this).css(("display":"block")); $("nav ul li").css(("position":"relative ", "z-index":"1001")); $(this).addClass("active"); ) ), function())( $(".subNav").css(("display":"none ")); $(this).removeClass("active"); $("nav ul li").css(("position":"relative", "z-index":"1")); )) ; ));

For each list element, it is possible to create your own drop-down menu: inside the li element, place a block with the class .subnav , and also assign the class .dropdown to the li itself.

Very often you can find drop-down navigation elements in templates. Developers use this type of hidden menu to display additional hidden links that are thematically related to the main item. You can find examples of sliding panels or various accordion-style menus that implement this navigation principle.

But in this tutorial we will build a simple dropdown menu using jQuery. It will work using an animation technique to generate delayed effects. CSS3 transition effects are also applied along with the JavaScript code. The result is a template for site navigation.

HTML

First, let's build a basic HTML5 template. We'll need the latest version of jQuery, which we get from the Google API. We also add a style file styles.css, which will be presented below:

Horizontal navigation bar | Site materials website

Now let's look at the structure that is built around the unordered list at the top of the page. The entire list is placed into an HTML5 element for better SEO results.

Home
About Us
- Mission
- Team
- Story
Products
- Logotypes
- Templates
- Icons
- jQuery plugins
- Internet marketing
Internationalization
- China
- Japan
- Canada
- Australia
- South America
Contact

The code structure is quite simple. Each list item includes a highlight effect when the mouse cursor is placed over it. All internal UL elements are contained within the original list item, so input focus is not lost when moving to dropdown menu items.

Navigation styles

The style sheet contains code to reset property values to default. Many developers include a file from Eric Meye, but for our use it is too cumbersome. In addition, the code is stored on another server, which in itself is a bad solution in this case.

Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-font- smoothing: antialiased; -webkit-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; : 101%; ) body ( background: #eaeaea url("images/bg.png"); font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; padding-bottom : 60px; ) article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) strong ( font -weight: bold; ) table ( border-collapse: collapse; border-spacing: 0; ) img ( border: 0; max-width: 100%; )

There is an interesting property in the code -webkit-font-smoothing. It is designed to smooth fonts when running code in browsers running Mac OS X or iOS.

Now let's move on to our menu.

#ddmenu ( display: block; width: 100%; height: 80px; margin: 0 auto; padding: 0 15px; background: #fff; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.15 ); box-shadow: 0 1px 1px rgba(20, 20, 0.2); outline: none; font-weight: #8aa8bd; relative; float: left; font-size: 1.45em; text-shadow: 1px 1px 0 #fff; border-right: 1px solid #dae0e5; ; line-height: 78px; text-decoration: none; -webkit-transition: all 0.2s linear; 0.2s linear; transition: all 0.2s linear; ) #ddmenu li:hover > a ( color: #7180a0; background: #d9e2ee; ) #ddmenu ul ( position: absolute; top: 88px; width: 130px; background: # fff; display: none; padding: 7px 0; border-radius: 3px; border: 1px solid rgba(0, 0, 0.2); (0, 0, 0, 0.2); )

We add a #ddmenu ul selector to select all internal elements in each list item, since it is important to determine the distance for them using absolute positioning. We also add a linear transition for all links, which appears when you hover over them.

Now let's look at creating the top element index. It is formed using the rotation property and a universal frame with a dark background for the shadow. Using offset positioning, one element of our structure is positioned above another and forms the visual representation of a pointer on a drop-down menu.

#ddmenu ul:after ( content: ""; width: 0; height: 0; position: absolute; bottom: 100%; left: 8px; border-width: 0 8px 8px 8px; border-style: solid; border-color : #fff transparent; ) #ddmenu ul:before ( content: ""; width: 0; height: 0; position: absolute; bottom: 100%; left: 4px; border-width: 0 10px 10px 10px; border-style : solid; border-color: rgba(0, 0, 0, 0.1) transparent; ) #ddmenu ul li ( display: block; width: 100%; font-size: 0.9em; text-shadow: 1px 1px 0 #fff ; ) #ddmenu ul li a ( display: block; width: 100%; padding: 6px 7px; line-height: 1.4em; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; - o-transition: all 0.2s linear; transition: all 0.2s linear; ) #ddmenu ul li a:hover ( background: #e9edf3; )

JavaScript

$(document).ready(function())( $("a").on("click", function(e)( e.preventDefault(); )); $("#ddmenu li").hover(function () ( clearTimeout($.data(this,"timer")); $("ul",this).stop(true,true).slideDown(200); ), function () ( $.data(this, "timer", setTimeout($.proxy(function() ( $("ul",this).stop(true,true).slideUp(200); ), this), 100));

The first part of the code intercepts clicks on links and stops them from being processed by default (loading pages at the URL).

The second part of the code does all the magic. We attach an event handler for the process of hovering the mouse over a list item. The handler will stop the currently active animation and output a new sub using .slideDown() . We also set a small delay so that it only responds to actual item selection.