Examples of CSS menus with animation from the Codepen resource. Plugin "Animated Content Menu"
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. Drops out when pressed full menu. In many modern websites, the menu is constantly hidden even on big 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 website with complex structure, it is better not to use this option. So. WITH general principle work sorted out, but this type The menu is pretty 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 the whole thing takes up the entire area work area. Separate sites began to appear jQuery plugin s and css3 solutions, 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. There are more and more sites with full-screen menus, free jQuery There are also more plugins and the concept is gradually becoming a trend.
So. We bring to your attention 20 jQuery plugins for full-screen menus in a popup window.
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 one jquery script full-screen navigation 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).
Unfortunately, on mobile phones does not work correctly: if there are many menu items and they do not fit on the screen, then vertical scroll does not appear and the navigation is simply cut off.
Excellent styling of an interface element in the form of a drop-down list.
When you hover the mouse over the button, a panel appears on top.
6. jQuery plugin “MobilyBlocks” for displaying a radial menu
Animated javascript menu with glow effect.
Fresh, nice menu using jQuery.
9. jQuery “GarageDoor” menu 10. jQuery vertical scroll menu
Implementing a menu with a large number points. Scrolls when you move the mouse cursor up or down.
11. jQuery styling drop down list
Smooth scrolling to to the required section on the page. jQuery plugin One Page Navigation".
13. Plugin “Animated Content Menu”
New jQuery plugin. Excellent implementation of animated site navigation. When you go through menu items, a block with a description and possible links pops up, and depending on the selected item, the background of the page changes, which stretches to fill the entire screen regardless of the size of the browser window. Be sure to check out the demo page.
14. jQuery “Sweet Menu” menu plugin
Animated menu with pop-up items.
15. Fixed jQuery menu
When you scroll down the page, the menu remains fixed at the top of the screen.
16. Slider Kit Scrolling Menus
To implement a vertical menu with a large number of items. Scrolling through items is done using the mouse wheel, or using the “Previos” and “Next” links.
17. Stylish CSS3 menu
New menu in Apple style. It looks darker than before, but no less cute.
19. Original jQuery menu
Dropdown menu with background effect. Menu sub-items expand upward. When you hover over a menu item, the background image changes.
20. Animated menu with jQuery
Animated menu. Menu items are presented in the form of icons and descriptions. Several great effects when hovering the mouse over a menu item. There are 8 effects, to see them all - follow the links Exemple1-Exemple8 on the demo page.
21. “Scrolling menu” XML menu with scrolling
Vertical and horizontal scrolling menu. Good decision at large quantities menu items.
22. Context menu on a website using jQuery
Menu pops up when clicked right click mouse on a specific area.
23. Circular two-level menu for the site
When you select a menu item, submenu items are displayed on the right.
24. jQuery CSS3 menu with blur effect “Blur Menu” CSS3
The original jQuery CSS3 menu is made in 7 different styling. When you hover your mouse over one of the menu items, the rest seem to blur.
25. Some spectacular animated jQuery CSS3 menus
10 creative animated menus. Horizontal and vertical CSS3 menus with various effects and transitions.
The archive also includes the original PSD file menu.
27. MagicLine menu
The background or underline of a menu item follows the mouse with a slight delay, while the background smoothly changes its color as it moves from item to item. Very beautiful effect, looks unusual. Attention: the effect does not work in opera
28. Image Bubbles
An excellent effect when you hover your mouse over one of the images. The effect is somewhat reminiscent of jQDock described above.
Horizontal, vertical menu. Interesting effects.
32. Great Apple-style jQuery menu
A very interesting effect. Perfect for designing portfolio websites.
Interesting effect of thumbnails popping up on hover.
40. Dropdown list with autoscrolling
Nice transition effect between items.
42. Great jQuery menu
Menu items are presented in the form of thumbnails.
A navigation bar with a search box that becomes translucent as you scroll down the page.
48. Horizontal jQuery menu
Great vertical menu. When you hover the cursor, a menu item pops up.
50. Horizontal jQuery menu
An interesting effect when hovering the cursor over a menu item.
52. jQuery Dropdown Menu
When you hover your mouse over the menu, its items will appear. The items that appear are displayed in the form of an arc, the radius of which you can set when configuring the plugin. In some browsers you will not see an arc display, the menu will be displayed straight, but this will still not spoil general impression from this jQuery menu implementation.
53. CSS and jQuery navigation bar
An interesting effect when hovering the mouse over a menu item.
54. jQuery popup panelFresh animated menu in gray tones.
58. Columnar site navigation using jQuery
An interesting solution for navigation, which is presented in the form vertical stripes. When you hover your mouse over these bars, an image for the item and a list of submenus appear. When you click on a submenu item, a page with a description appears. This implementation is perfect for promotional sites or presentations. Be sure to check out the demo of the plugin.
59. jQuery site navigation
The site navigation is presented in the form of 4 pictures, when you hover over them you will notice an interesting animated effect.
60. Navigation bar scrolls with content
Navigation panel. Clicking on the arrow scrolls the page. The navigation scrolls along with the page content.
61. jQuery panel with various social services
Very often, on sites with a lot of content, the visitor gets lost on the page and has to scroll to the very top of the page to find the navigation menu. Technologies do not stand still, monitor screens and their resolutions are becoming larger, so now on a website it is no longer a pity to allocate 40 pixels on top for fixed menu when scrolling a website page. The visitor will be able to always see which section he is in, and also have quick access to the navigation menu. Ultimately, this increases the depth of browsing the site :)
What is the essence of fixed navigation menu on the website? Initially, our menu is located in its usual place, somewhere in the header, in my case at a distance of 140px from the top edge. As soon as the visitor scrolls the page this very 140px at the bottom, the menu is fixed at the very top of the window and remains there for the rest of the time until the scroll is returned to the top position.
A fixed menu when scrolling a page is essentially a control panel that is always with you. Our menu will be simple.
From theory to practice. Everything is quite simple and minimalistic, most of which is given to styles that you can customize for yourself. I made a fixed menu as in the picture; when scrolled, the color of the menu becomes slightly transparent so that it does not look heavy and the content underneath is visible.
Our styles. I have a menu with a width of 1180px, located in the center. The header is 180px high, the scrolling menu is included in it and takes up 40px. This means the distance from the top 140px. Let's remember this number)
#header ( height: 180px; ) #navigation( background: #EF0505; height: 40px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); font-size: 16px; line-height: 40px; position: relative; top: 140px; ) #navigation.fixed( position: fixed; top: 0; width: 100%; background: rgba(239, 5, 5, 0.95); ) #navigation ul( width: 1180px; padding -left: 0; margin: 0 auto; display: block; ) #menu li( float: left; list-style: none; padding: 0 25px; border-right: 1px solid #D60000; ) #menu a ( color: #fff; text-decoration: none; font-family: Verdana; ) #menu>li a:hover( color: #656565; transition: color 0.5s ease; )
And here are the few lines of code that work the magic) We set the conditions for scrolling the page, above 140px or below. Depending on this, the fixed class is assigned to our navigation menu. And with this class, as stated above, we make the menu fixed and pinned to the top.
JQuery(function($) ( $(window).scroll(function())( if($(this).scrollTop()>140)( $("#navigation").addClass("fixed"); ) else if ($(this).scrollTop() a ( color: #7180a0; background: #d9e2ee; ) #ddmenu ul ( position: absolute; top: 88px; width: 130px; background: #fff; display: none; margin: 0 ; padding: 7px 0; list-style: none; border-radius: 1px solid rgba(0, 0, 0, 0.2); ; )
We add the #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 linear transition for all links, which appears when you hover over them.
Now let's look at creating the top element indicator. It is formed using the rotation property and a universal frame with dark background for 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.