jQuery for the typesetter (part 2): delicious menus

This is the second article about jQuery that will be interesting, first of all, for novice users of this library. In this article, from a practical point of view, we will focus on highlighting the current menu item on the client side. And after reading the article, you will understand how to make more complex samples and query chains.

Problem number 2: vertical menu

The menu is a fundamental element of the user interface, both GUI and web applications. In a few small examples, we will see how to create a navigation element using jQuery. In addition, we study the promised features of the $ (...) function for working with the properties of elements.

Vertical menus are regular lists of links:

 <ul>
	 <li> <a href="/menu.html"> Home </a> </ li>
	 <li> <a href="/articles.html"> Articles </a> </ li>
	 <li> <a href="/forum.html"> Forum </a> </ li>
	 <li> <a href="/links.html"> References </a> </ li>
	 <li> <a href="/about.html"> About Us </a> </ li>
 </ ul>

')
It can be decorated very nicely through the style sheets, and I would very much like that the current menu section was highlighted in bold (or highlighted in some other way) to let the user know where he is now. You can act in different ways: either on the server side or on the client side. When generating the page, the server script can determine which menu item corresponds to the current page, and prescribe the necessary class for the list item. This option has drawbacks: you will have to write a menu generation system on the server side, while using ready-made scripts, it will be difficult to modify the menu module, and sometimes the ability to write server-side scripts is missing as such. The second option is devoid of the above disadvantages. And for this you need to write again one line in the $ (document) .ready construction:

 $ ("a [@ href $ =" + document.location.pathname + "]"). css ({fontWeight: "bold"})

Alternatively, you can use a slightly different approach suggested by PaulColomiets :

 var a = $ ("a [@ href $ =" + document.location.pathname + "]");
 a.parent (). text (a.text ()). addClass ('selected');

PaulColomiets Rightly notes that it is better to choose not just the a tag, but you also need to specify a more complete path to it.

ayavryk

How it works

When changing the format of the links (I used relative paths), the script will also need to be changed. As for a single line that does all the work, it uses the familiar $ (...) function, which in this case selects all links with the href attribute value ending in document.location.pathname. This variable in turn keeps the path to the current page. We also use the css method to set the value of the cascading style sheet font-weight parameter. If you noticed, the name of the font-weight parameter is written a little differently fontWeight, that is, the style "camel", which is used in JavaScript. As a finishing touch, I propose to make it so that a click on the menu item of the current section is canceled. This is a very reasonable decision, because you can not go to the page where you are already. And I will be able to demonstrate the chain of calls that are constantly used in jQuery scripts:

 $ (document) .ready (function () {
	 $ ("a [@ href $ =" + document.location.pathname + "]")
		 .css ({fontWeight: "bold"})
		 .click (function () {return false;});
 });

findings

We managed to do without additional variables, which reduces the code in simple cases without compromising clarity. In this source, you can also look at the design style, which is well suited in this case: instead of one line, I beat the call chain with a few to show where the calls occur. I think that now it is not difficult to change the script for attaching the "arrow", only to external links. I highly recommend to look for simplicity, what equivalence operators are other than “$ =”, and what exactly they do.
<p />

Cycle of articles

• jQuery for the typesetter (part 1): arrows for references
  jQuery for the typesetter (part 2): delicious menus