jquery to achieve both sides of the Sliding tab menu example

The effect chart is as follows

Today I made a tab menu, in fact, there is no difference in nature and Ordinary tabs, for menu items have a hover effect, there is a check effect, the increase is that menu items can have countless, when the width of the total menu item and beyond the fixed width of the tab, will appear right move button, at this time, The extra menu items will be hidden away.

Then, you can click the Move button to move the menu item, so that the hidden menu items come out, and the menu items can be many, free to increase. Here's a concrete look:

The first is the page structure: (omitted part of the Li tag, are the same, can be added freely)

The code is as follows

Copy Code

<div class= "Tab-menu-box" > <ul class= "Tab-menu-list" > <li> <a href= "javascript:void (0);" class= "active" > Front-End development html5</a> </li> <li> <a href= "javascript:void (0);" > Front-End Development css3</a> </li> <!--the same structure, a number of omitted li--> <li> <a href= "javascript:void (0);" > Front-End Development js</a> </li> <li> <a href= "javascript:void (0);" >web Front-End Development </a> </li> </ul> < move buttons around!----> <a href= "javascript:void (0);" class= "Btn-toleft" >&lt;&lt;</a> <a href= "javascript:void (0);" class= "Btn-toright" >&gt;&gt;</a> </div>

This is true for CSS layouts:

Let the UL absolute positioning, so easy to move around, at the same time two buttons also to positioning, located on both sides of the tab. The UL width is by the JS dynamic processing, the UL width is all Li's width and its margin's sum, then will have the part to exceed the parent width, at this time, lets the excess part hide to be possible (the parent sets overflow attribute). In addition, the code is not pasted, the last side will give a download link, you can go down to see for themselves.

Finally is the JS section (here to the jquery library):

This piece is the logic of the implementation, to think about under what conditions the button appears, then click on the button after how the UL move, click again to continue to move, has moved to the menu all appear, that is, the UL to move to the "end", this must determine the conditions are what, these are need to think about, can write and paint, Maybe it came to me.

The code is as follows

Copy Code

$ (function () { var Otabmenu = $ (". Tab-menu-box"); var otabmenulist = $ (otabmenu). Find (". Tab-menu-list"); var aLi = $ (otabmenulist). Find ("Li"); var Amenus = $ (otabmenulist). Find ("Li a"); var omenubtnl = $ (otabmenu). Find (". Btn-toleft"); var Omenubtnr = $ (otabmenu). Find (". Btn-toright"); var disx = 0; var L = 0; function Reset () { var ulwidth = 0; for (var i = 0; i < ali.length; i++) { Ulwidth + + = Ali.eq (i). Width () + 10; } Otabmenulist.css ("width", ulwidth); if (Otabmenulist.width () > Otabmenu.width ()) { Omenubtnr.show (); } DISX = Otabmenulist.width ()-otabmenu.width (); } function Move (dis) { Otabmenulist.animate ({"Left": dis}, 400); } Reset (); Amenus.click (function () { Amenus.removeclass ("active"); $ (this). AddClass ("active"); /* You can add the contents of the tab, click on the corresponding menu to display the content * * }); Omenubtnr.click (function () { if (l >=-disx) { L + =-100; Move (L); } if (L < 0) { Omenubtnl.fadein (); } if (L <-DISX) { Omenubtnr.fadeout (); } }); Omenubtnl.click (function () { if (L < 0) { L + + 100; Move (L); } if (l >= 0) { Omenubtnl.fadeout (); } if (l >=-disx) { Omenubtnr.fadein (); } }); });