What is a dynamic menu. We create a dynamic and animated menu. Writing code to create a dynamic menu in jQuery
Liked:
26
Didn't like: 12
In this article I will show you how to write a simple jQuery plugin that will build a nice looking HTML markup from regular HTML markup. dynamic menu. The first thing we will start with is to decide what exactly the plugin will do and what our goal is. So:
Now let's determine which files need to be created to test the operation of the example in question. Here they are:
2. jquery.dynamenu.js - plugin code placed in a separate file.
3. dynamenu.css - the style of our menu. We put all the CSS here
These files with a working menu can be found in the archive attached to the article. At the end of the article there is a live demonstration of how our menu works. Please note that in the demo, the plugin call is placed in the same place as the plugin code itself. This is only due to the fact that the live demo mechanism we use requires placing the JavaScript code in a separate frame.
Let's start writing a plugin. Go!
1. Cooking HTML markup pagesLet's set the most simple markup for our menu. Let these be several menu items for our future website:
Site news Photoshop tutorials Photoshop brushes Beautiful fonts
Everything is simple here - 4 div elements, each with a dynamenu class, so that we can then pass it as a selector to our future plugin. Inside each div there is a hyperlink with the name of the menu item.
2. Set CSS stylesTo style our menu, we use only two CSS styles. With their help, we will make the background of each menu item gray, the menu width 300 pixels with external and indentation 5 pixels each, and all menu links are black:
a.mlink ( color:#000; text-decoration:none; ) .dynamenu ( background-color: #aaaaaa; width:300px; margin:5px; padding:5px; font-family: "Tahoma"; font-size: 9pt)
3. We write the “framework” of the pluginFirst of all, let's define the framework of our plugin. This framework is partially taken from the official jQuery website and contains the so-called "Best Practices" ( best practics and techniques - from the developers of the jQuery language). IN general case a similar frame is applicable to almost everyone jQuery plugins. If you remember and understand how this framework functions, then you will be able to write plugins in one go. It looks like this:
(function($) ( // list of methods of our plugin var methods = ( init: function(options) ( // plugin initialization can be placed here. in our case // for simplicity there will be nothing here ), sliding: function () ( // the sliding method of our plugin will directly build the menu ) ); // “register” our plugin in the jQuery namespace $.fn.dynamenu = function(method) ( // here we call the desired method inside the plugin ) ) (jQuery) ;
As you can see, there is nothing complicated in the frame. But he carries within himself useful information. First important point, which needs to be understood in the framework - we collect all the methods added to our plugin (init, sliding) into one object - methods. This allows you to avoid cluttering the $.fn namespace unnecessary functions. Correctly specifying the namespace of our plugin is very an important part the plugin development process itself. Using a namespace ensures that our plugin is less likely to be overwritten by other plugins or code located on the same HTML page. Namespaces also make life easier because... helps you keep better track of methods, events, and data.
Always use method hiding inside the plugin, for example in a methods object. Besides the fact that it is good style programming, this technique will help you avoid conflicts with other third-party libraries and plugins, and will also allow you not to pollute the jQuery namespace
The next point worth paying attention to is the designer of our plugin. This is the line $.fn.dynamenu = function (method) (...). As you can see, the constructor takes one parameter - method. As a value for the parameter, we will pass a string containing the name of the method inside the object methods, which we are going to call. Let's populate the constructor with the following code:
$.fn.dynamenu = function(method) ( if (methods) ( methods.init.apply(this, arguments); return methods[ method].apply(this, Array.prototype.slice.call(arguments, 1)) ; ) else ( $.error("Method" + method + " does not exist!"); ) )
Let's figure out what we did. First we check if a method with the name passed in the constructor parameter exists in the object methods our plugin. If there is a method, then we first call the init method to initialize our plugin, and then we call the method whose name was passed in the constructor parameter, and we pass all the remaining arguments to it. If there is no method with the same name, then we will issue an error and the plugin will stop working.
On at this stage a lot has already been done! Now we can access our plugin and call its methods, although no useful work They haven't done it yet. I recommend putting our plugin code in a separate file and calling it jquery.dynamenu.js. Placing the plugin code in separate file is logical - after all, the plugin should be universal in its essence and allow us and other developers to connect it ready-made to their site.
Now that our framework is filled with code that can call the plugin's internal methods, it's time to build out the "meat" - that is, write the code that will directly turn our div blocks into a beautiful dynamic menu. Let's get started...
4. We write the code that creates a dynamic menu in jQueryAll useful code of our plugin will be placed in the function sliding, which is internal method plugin and is located in the object methods. Let's briefly describe the sequence of steps to turn static markup with our div blocks into a dynamic menu in jQuery:
That, in fact, is the whole logic. Now let's see how to implement this:
return this.each(function() ( $(this).css(("opacity":"0.4")); $(this).hover(function() ( $("a.mlink", this).css (("font-weight":"bold")); $(this).animate(( opacity:1, "margin-left":"+=5" ), 100, "linear"); ) ( $("a.mlink", this).css(("font-weight":"normal")); $(this).animate(( opacity:0.4, "margin-left":"-=5 " ), 100, "linear"); )); ));
Just in case, I’ll explain what’s happening. So, in the very first line we see the operator. It does the following: it runs through what is passed to the function sliding set of elements (i.e. all our div blocks) and executes the code placed inside. After such a run through the elements, we return ( return statement) the result of performing operations for each element of the set, again, in the form of a set. Thus, our sliding function returns a set of div blocks passed to the “input” of the function, only processed and already turned into a dynamic menu. This implements an important jQuery concept - the ability to use our plugin in a call chain. To better understand what a call chain is, here's an example:
$(".myelm").dynamenu("sliding").css(("border" : "1px solid red"));
In the above piece of code we see what a chain of calls is: first we select all the elements on the page with the class myelm, then we use our dynamenu plugin and then again we use the standard method along the chain jQuery css() to change the style of elements. If we did not return the return this.each(function() ( ... )) construct from the method, then use css method() in the “chain” they would no longer be able to.
Use the this.each() return operator to support chaining in your plugins and make them more versatile.
Let's move on, inside the each() operator, where we run through all our div blocks, it goes exactly initial installation properties "transparency" (opacity) of the element in 0.4. point. The maximum opacity value is 1 (100%), so we set the "opacity" to 40%. After this, we set two handlers for “hovering” the mouse and “moving” the mouse out of the div block area. In the first handler we set the menu item title to bold and use animate method() to achieve “full opacity” of the menu item, and also shift it to the right by 5 pixels. In the mouse “leaving” handler, we simply return the element to its initial state - change the font again to normal and shift it to the left again by 5 pixels.
That's all! Our plugin is ready to use. Although it is simple, it can be very useful for creating a dynamic menu on the site. Below is a demonstration of how our plugin works. To see the result of the plugin, go to the Result tab.
Good luck with your writing good plugins! Comments, questions and feedback are always welcome;)
You've probably seen dynamic and animated menus on some websites that change as you scroll down. By minimizing the main navigation menu, you leave more space for content. In this tutorial, we'll explain how you can create a menu yourself using HTML5, CSS3, and a little jQuery.
If you want a special focus on the content of the site, as well as allow you to create a larger and more impressive navigation when a user first visits the website, then this type of menu is perfect for you. You can perfectly showcase your brand or logo, and after an initial look at the site, reduce some elements, allowing the user to focus on your content.
There are several ways to do this. In this tutorial, we'll explain how to create a fixed, full-width menu that resizes in height along with your logo, creating a miniaturized version of the original. If desired, you can also replace the logo with another option, such as initials or an icon, but keep in mind that consistency is very important here so that the user understands how the element has changed and what its the main objective is still the site navigation.
Creation basic structure in HTML5
We'll start by creating the basic HTML code we'll need. To start, we'll stick to a very simple HTML5 structure.
Now that our initial HTML code is written, we'll add the code for the menu, as well as some other details for the header of our HTML file.
How to create an animated menu | WebDesignMagazine 
- home
- Articles
- This is a very cool site!
Scroll down and see how the menu changes
All! We've arrived!
In our : We added a meta tag for author to indicate the creator of the document, after which we included Eric Meyer's famous “CSS reset”, which will reset almost every element in the HTML file, giving you a cleaner and easier document to work with. And since we'll be using JQuery later, on the last line of our main element we'll import it via the JQuery CDN.
In our tag, we used the default HTML5 element. Ours will be the full width of the page and will be responsible for changes between large and small versions of the menu. We're giving ours a class called “large” so that we can change some specific properties in the CSS to turn our menu into a smaller version.
This is our container menu that contains an image of our website logo and a simple unordered menu list with three links.
Since we don't have any content here, this will be used to stretch the page and force scrolling to take effect.
And that's all for the HTML part. Now we need to style the elements using CSS and make the menu dynamic.
Styling menus and pages
/* Import the Amaranth font */ @import url(//fonts.googleapis.com/css?family=Amaranth); /* Main style */ body( background-color: #ebebeb; ) ul( float: right; ) li( display: inline; float: left;) img.logo(float: left;) /* Menu size and centering * / nav( width: 960px; margin: 0 auto;)
A little bit of this CSS will make our menu 960px wide in the center, while organizing our menu on the right and logo on the left. We'll also import the Amaranth font from Google Web Fonts to use for our text on the page.
Section.stretch( float: left; height: 1500px; width: 100%; ) section.stretch p( font-family: "Amaranth", sans-serif; font-size: 30px; color: #969696; text-align: center; position: relative; margin-top: 250px; ) section.stretch p.bottom( top: 100%; )
Header( background: #C7C7C7; border-bottom: 1px solid #aaaaaa; float: left; width: 100%; position: fixed; z-index: 10; ) header a( color: #969696; text-decoration: none; font-family: "Amaranth", sans-serif; text-transform: uppercase; font-size: 1em; ) header a.active, header a:hover( color: #3d3d3d; ) header li( margin-right: 30px; ) /* Dimensions for a larger menu */ header.large( height: 120px; ) header.large img( width: 489px; height: 113px; ) header.large li( margin-top: 45px; )
This is where we finish the basic styling of our header.
will serve as our menu container. It will contain our element and will serve as the element where we define the background color, menu height, link menu style and more. It will adapt to the screen width with width properties: 100% and will remain fixed across other elements on the website. It's important to remember to set the z-index so that the element overlaps the rest of the page, as well as position:fixed to make the div anchored at the top so that it stays in the same position while the user scrolls through the website. As you can see, in addition to setting styles for the headers, we also set some specific styles for the “large” class using header.large. The initial state of our menu will be large, and so we're defining only the necessary styles here to make it look the way we want it when the user initially enters the page.
Dynamic menu resizing
, which should also be reduced so that they remain vertically centered with the new menu height:
So as you can see, these styles are almost identical to those in the larger menu, we just changed the class “large” to “small” and changed the values we used to smaller ones. We use negative margin tops on the image to centralize it in the container since the image has a thin shadow and is taller than the writing to accommodate it. Now we have all the necessary styles to customize the resize menu, and if you try to change it in your , you will see in the browser that the menu will become smaller. But we need it to be dynamic.
Changing a Menu Class Using jQuery
With all our styling in place, we just need to add some JavaScript to switch between the "large" and "small" classes. Since we want to change this based on user scrolling, we will use the .ScrollTop() function in jQuery. This function will allow us to get or set the scroll position in pixels. The scroll position is the number of pixels that have already been scrolled in the browser window. In this case, we just need to know how many pixels the user scrolled so we can call our code and switch between classes:
$(document).on("scroll",function())( if($(document).scrollTop()>100)( $("header").removeClass("large").addClass("small"); ) else( $("header").removeClass("small").addClass("large"); ) ));
If the user has scrolled more than 100 pixels, then the "large" class we created will be removed and our new "small" class will be added. This way the menu will resize as we previously defined in the CSS. Give it a try, it should be working by now, but you may have noticed that the transitions between classes seem very abrupt.
CSS transitions for menu animation
In order to smoothly switch between classes in our menu, we will use CSS transitions. Just use this piece of code next to the rest of your CSS.
Header,nav, a, img, li( transition: all 1s; -moz-transition: all 1s; /* Firefox 4 */ -webkit-transition: all 1s; /* Safari and Chrome */ -o-transition: all 1s; /* Opera */ )
Here we have defined transitions for all CSS properties for. And
Have you ever heard the statement that "you can't make a dynamic dropdown menu using just CSS in IE"? I'm sure so. So, do you actually believe this? That's right, better not believe it.
The goal we want to achieve in this article
The goal of this article is to make a dropdown menu for IE made entirely in CSS. Starting with this setting, I expanded the task to make such a menu work in other most famous browsers (from the comments it turns out that these browsers are Opera 7.x and the latest versions of Firefox).
The goal that we want to achieve in this article is, in principle, more or less general educational, i.e. give a general idea of some of the "hidden" and rarely used features of browsers.
Also, those who are especially curious can find in this article some tricks with which you can achieve certain non-standard results. Well, for developers, this article can become a reason for thought or a source of new ideas.
How do we imagine the level of the reader?
I was actually thinking about labeling this article as "advanced". But I am sure that even not the most experienced developers will understand well what is written in the article. In short, the reader simply must know the basics of CSS and
HTML.
How is this menu different from all others?
I spent a long time looking online for menus that were made in CSS, but I didn’t find a single solution that would work without glitches in IE. However, I found many interesting ideas that led me to the result that will be described here. Yes, my code isn't perfect either, but I simply don't have the time to fix all the errors. The most interesting alternative solution I've seen (that uses CSS) is based on using the hover pseudo-class for LI elements. But I never thought that this was possible, just as I never thought that it was even possible to make a drop-down menu for IE without scripts...
The main difference between mine and other menus is that mine runs in IE. All the solutions I've seen use the LI element as the main element for the :hover pseudo-class, however Microsoft has decided that this pseudo-class can only be used for
element A. Most sites make a reservation that their menus only work in Opera 7.x or Mozilla browsers. But these browsers are used by only five percent of users! Yes, such menus are good in these browsers, but unfortunately they cannot be visible in most of the most common browsers. Now we will correct this misunderstanding.
What is a menu made with just CSS?
This is a dynamic menu that is created using only CSS and no scripts (for example, written in JavaScript).
What, you can’t believe it?
Let's look at the code:
<
STYLE type
=
text
/
css id
=
"default"
title
=
"default"
name
=
"default"
>
*::- moz - any - link br ,*:- moz - any - link br (
/*a workarround for mozilla*/
display: none;
}
div #menu * (
cursor: pointer; /*because IE displays the text cursor
if the link is inactive*/
}
Disabled (
color : red ! important ;
background: none! important ;
}
Div #menu (
background : #F5F5DC;
height: 15px;
white - space : nowrap ;
width: 100%;
}
Div #menu .a (
background : #F5F5DC;
border : 1px solid #F5F5DC;
color : #000000;
text - decoration : none ;
}
Div #menu .a table (
display: block;
font: 10px Verdana, sans-serif;
white - space : nowrap ;
}
Div #menu table, div#menu table a (
display: none;
}
Div #menu .a:hover, div#menu div.menuitem:hover (
background : #7DA6EE;
border : 1px solid #000080;
color : #0000FF;
margin - right :- 1px ; /*resolves a problem with Opera
not displaying the right border*/
}
Div #menu .a:hover table, div#menu div.menuitem:hover table(
background : #FFFFFF;
border : 1px solid #708090;
display: block;
position: absolute;
white - space : nowrap ;
}
Div #menu .a:hover table a, div#menu div.menuitem:hover table a (
border - left : 10px solid #708090;
border - right : 1px solid white ; /*resolves a jump problem*/
color : #000000;
display: block;
padding: 1px 12px;
text - decoration : none ;
white - space : nowrap ;
z-index: 1000;
}
Div #menu .a:hover table a:hover, div#menu div.menuitem:hover table a:hover (
background : #7DA6EE;
border : 1px solid #000000;
border - left : 10px solid #000000;
color : #000000;
display: block;
padding: 0px 12px;
text - decoration : none ;
z-index: 1000;
}
Td(
border - width : 0px ;
padding: 0px 0px 0px 0px;
}
menuitem (
float: left;
margin : 1px 1px 1px 1px ;
padding: 1px 1px 1px 1px;
}
Menuitem * (
padding: 0px 0px 0px 0px;
}
#other (
}
#moz(
}
#moz::-moz-cell-content(
height: auto; visibility: visible;
}
#other::-moz-cell-content(
height: 1px; visibility: hidden;
}
#holder (
width: 100%;
}
<
TABLE id
=
holder
>
<
TR
>
<
TD id
=
"other"
>
<
DIV id
=
"menu"
>
<
DIV
class=
"menuitem"
>
<
a
class=
"a"
href
=
"#"
>File<
BR
>
<
TABLE
>
<
TR
>
<
TD
><
a href
=
#2>click me
<
TR
>
<
TD
><
a href
=
#3>Save
<
TR
>
<
TD
><
a href
=
#4>Close
<
DIV
class=
"menuitem"
>
<
A
class=
"a"
href
=
"#11"
>Help<
BR
>
<
TABLE
>
<
TR
>
<
TD
><
a
class=
"disabled"
>..
<
TR
>
<
TD
><
a href
=
#13>Index
<
TR
>
<
TD
><
a href
=
"#14"
>About
<
TR
>
<
TD id
=
"moz"
>Mozilla specific menu!
<
DIV id
=
"menu"
>
<
DIV
class=
"menuitem"
>
<
a
class=
"a"
href
=
"#"
>Filezilla
<
TABLE
>
<
TR
>
<
TD
><
a href
=
#2>Open
<
TR
>
<
TD
><
a href
=
#3>Save
<
TR
>
<
TD
><
a href
=
#4>Close
<
DIV
class=
"menuitem"
>
<
A
class=
"a"
href
=
"#11"
>Helpzilla
<
TABLE
>
<
TR
>
<
TD
><
a
class=
"disabled"
>..
<
TR
>
<
TD
><
a href
=
#13>Index
<
TR
>
<
TD
><
a href
=
"#14"
>About
<
BR
>
What's going on, why is everything working?
Let me make a reservation right away that in this article I will not teach you how to use CSS. Therefore, we immediately move on to consider the principle of operation of the menu - to the pseudo-class ":hover". Yes, this is exactly the class. Those. a selector can inherit another selector that includes ":hover". In our case, "A:hover TABLE" selects "
