Vertical menu tree in javascript jquery. A simple and effective drop-down menu using jQuery and CSS3. jQuery menu with interesting effect
Also, if anyone is interested, you can look at the previous method using CSS, which is described in the article -
Now to the point. As in the last article, first of all, let's write the HTML code for our menu. The code is the same as in that article, so that there is no confusion and it is more understandable. Menu with two items and both have submenus.
- paragraph 1
- Drop-down item 1
- Drop-down item 2
- Drop-down item 3
- point 2
- Drop-down item 1
- Drop-down item 2
- Drop-down item 3
If you have such a line or a similar one that has already included the library before, then you should not do this again.
jQuery(document).ready(function($)( $("#slow_nav ul li").hover(function () ( $("ul", this).stop().slideDown(400); ), function ( ) ( $("ul", this).stop().slideUp(400); ));
In the second line of the script we indicate the ID of our menu. If you apply this method to your own menu, then naturally change the name to your own. In this case it is #slow_nav.
You can also adjust the animation time. In this script, the value for opening and closing is 400 milliseconds, which is 0.4 seconds. If you want, you can change it to a higher or lower value.
The last step is adding styles. They are very similar to the styles from the previous article, only they lack the CSS animation properties.
#slow_nav > ul( width: 500px; margin:25px auto 0; ) #slow_nav > ul > li( list-style: none; display: inline-block; position:relative; padding:0; ) #slow_nav a(text- decoration:none;) #slow_nav > ul > li > a( font-size:18px; padding:5px; background-color:#333; color:#fff; ) #slow_nav li ul( position:absolute; list-style: none; text-align: center: font-size: 15px; margin: 0; display: bottom:1px solid #888; ) #slow_nav li ul li:last-child( border-bottom:none; ) #slow_nav li ul li a( padding:5px 12px; color:#fff; display:block; ) #slow_nav li ul li:hover( background-color:#444; ) #slow_nav li ul li:first-child( margin-top:25px; position:relative; ) #slow_nav li ul li:first-child:before( content:"" ; position:absolute; height:1px; solid transparent; border-bottom-color:#333;
Also, one new line has been added to the styles, with the help of which the script works correctly. For the element - #slow_nav li ul the property display:none; . If you do not add it, the drop-down menu will be initially visible and will disappear only after you move the cursor over it. All other styles are the same as the previous article.
Like the previous method, this one can be applied not only to self-written menus, but also to the same dynamic menus that are created by content management systems, such as WordPress. To do this you need to tweak the styles a little and that’s it. That is, you don’t need to use the first HTML code, only styles. In the styles, you need to replace the ID name #slow_nav with what you have, and maybe tweak some other little things. I won't go into detail. Each case requires a personal approach, so excuse me :)
That's all, thanks for your attention. 🙂
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: 7px 15px; -moz-transition: color 0.5s; line-height: 1.3; : #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.
1. Vertical bright jQuery menu 2. Cool effect. Dancing menu. 4. Dropdown list using jQueryExcellent styling of the 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 7. Menu using spritesAnimated javascript menu with glow effect.
Fresh, nice menu using jQuery.
9. jQuery “GarageDoor” menu 10. jQuery vertical scroll menuImplementation of a menu with a large number of items. Scrolls when you move the mouse cursor up or down.
11. jQuery drop-down list design 12. Page navigation pluginSmooth scrolling to the desired section on the page. jQuery One Page Navigation plugin.
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 menu plugin “Sweet Menu”Animated menu with pop-up items.
15. Fixed jQuery menuWhen you scroll down the page, the menu remains fixed at the top of the screen.
16. Slider Kit Scrolling MenusTo 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 18. New CSS3 menu in Apple styleNew menu in Apple style. It looks darker than before, but no less cute.
19. Original jQuery menuDropdown menu with background effect. Menu sub-items expand upward. When you hover over a menu item, the background image changes.
20. Animated menu with jQueryAnimated 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 scrollingVertical and horizontal scrolling menu. A good solution if there are a large number of items on the menu.
22. Context menu on a website using jQueryA menu pops up when you right-click on a specific area.
23. Circular two-level menu for the siteWhen you select a menu item, submenu items are displayed on the right.
24. jQuery CSS3 menu with blur effect “Blur Menu” CSS3The original jQuery CSS3 menu comes in 7 different styles. When you hover your mouse over one of the menu items, the rest seem to blur.
25. Some spectacular animated jQuery CSS3 menus10 creative animated menus. Horizontal and vertical CSS3 menus with various effects and transitions.
The archive also includes the original menu PSD file.
27. MagicLine menuThe 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 BubblesAn excellent effect when you hover your mouse over one of the images. The effect is somewhat reminiscent of jQDock described above.
31. Interesting jQuery menus with various effectsHorizontal, vertical menu. Interesting effects.
32. Great jQuery menu in Apple style 34. jQuery menu with an interesting effect 36. Fresh menu with an interesting effect in jQueryA very interesting effect. Perfect for designing portfolio websites.
Interesting effect of thumbnails popping up on hover.
40. Dropdown list with autoscrollingNice transition effect between items.
42. Great jQuery menu 43. Beautiful big jQuery menu 44. Scrolling jQuery menusMenu items are presented in the form of thumbnails.
46. jQuery Radial Navigation Menu 47. CSS and jQuery MenuA navigation bar with a search box that becomes translucent as you scroll down the page.
48. Horizontal jQuery menu 49. Vertical jQuery menuGreat vertical menu. When you hover the cursor, a menu item pops up.
50. Horizontal jQuery menuAn interesting effect when hovering the cursor over a menu item.
52. jQuery Dropdown MenuWhen 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 won't see an arc display, the menu will be displayed straight, but this still won't ruin the overall impression of this jQuery menu implementation.
53. CSS and jQuery navigation barAn interesting effect when hovering the mouse over a menu item.
54. jQuery popup panelFresh animated menu in gray tones.
58. Columnar site navigation using jQueryAn interesting solution for navigation, which is presented in the form of 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 navigationThe 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 contentNavigation panel. Clicking on the arrow scrolls the page. The navigation scrolls along with the page content.
61. jQuery panel with various social servicesIf all such items are placed under each other, then perhaps the menu will become so large that its height will exceed the height of the main content. From the outside it won’t be very nice, and besides, it’s hard to find anything in such a continuous list. To group and reduce everything, you need to create such a thing as a sliding menu.
The principle of the sliding menu is that menu items are divided into groups, and these groups are hidden, only the name of the group is visible. When you click on the name, a list of a certain number of items appears.
How to make a sliding menu? jQuery will help us with this. With it, everything will work smoothly and beautifully, as in the example above. Let's start implementing the sliding menu and complete several items.
jQuery scriptAs usual, when working with jQuery, you need to include its library. Everything is as usual, in the header or footer we make the connection, unless, of course, you have not done this before for other scripts.
After the library we add the script. which will perform the animation. There will be 3 scripts, each of them performs the animation differently.
$(document).ready(function() ( $("#menu ul").hide(); $("#menu li span").click(function() ( $("#menu ul:visible") .slideUp("normal"); if (($(this).next().is("ul")) && (!$(this).next().is(":visible"))) ( $ (this).next().slideDown("normal");
This script works in such a way that when you click on a category name, a list appears, but when you click on another category, it begins to open, while the first one closes. That is, only one category is always open. If you need open categories not to close automatically, then replace the script with the new one listed below.
$(document).ready(function() ( $("#menu ul").hide(); $("#menu li span").click(function() ( $(this).next().slideToggle ("normal");
There is another script that you can replace the main one with. Its trick is that the menu slides out when hovered. No need to click, just hover over the category name and that's it. So choose which script is most suitable for you.
$(document).ready(function() ( $("#menu ul").hide(); $("#menu li").hover(function() ( $(this).children("ul") .slideToggle("normal");
HTML markupNow, in the right place on your site, you need to display the HTML markup. Well, or redo yours a little so that it becomes similar to the example.
There is nothing complicated, everything is organized using ul-lists.
CSS stylesAnd finally, in order to set the correct appearance for our menu, we need to specify styles. If this is not your first time working with CSS, you can easily customize the styles for yourself.
Ul#menu, ul#menu ul( list-style:none; margin: 0px; padding: 0px; width: 250px; -webkit-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2); - moz-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2); box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.2);) ul#menu a,ul#menu span (display: block; text-decoration: none;) ul#menu li (margin-top: 1px;) ul#menu li a,ul#menu li span( background: #1ba600; color: #fff; padding: 7px; ) ul#menu li a:hover,ul#menu li span:hover(background: #333;) ul#menu li ul li a( background: #eee; color: #000; padding-left: 20px;) ul# menu li ul li a:hover(background: #ddd;)
Nothing more is needed. This method is not very complicated and has several types of implementation, it all depends on the script you choose.
That's all, thanks for your attention. 🙂
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 does not just drop 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. 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 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).
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.
