How to reproduce the "many open tabs" in firefox

[johnq]

Basic example: http://i.imgur.com/NWCpCEB.png

Example of what the menu: http://i.imgur.com/7sFErP8.png

When navigation is full of links, rather than break, I would like these links were hidden, and a small slide for mostralos, similar to the image above.

[Ilan Firsov]

You would probably have to use some Javascript.
Can you tell me how exactly it works? does it open a menu or just slides the tabs?
I’m pretty sure the sliding option can be easily achieved with setting the CSS overflow: hidden for the menu, adding 2 buttons (left and right arrows), and using element.scrollLeft JS property to set the position for the menu based on which button is pressed

[Ilan Firsov]

Here is a simple sliding thingy example
http://codepen.io/ilanf/pen/MYavzK

[johnq]

I found another spectacular example to solve my problem: http://jsbin.com/opufow/47/edit

All I need now is that the “arrows” only appear when the menu is full of links.

[johnq]

I have many limitations in javascript. Just wanted to know if it would be possible for example, that the “scroll” right and left, only appear when the menu is full of links and when the screen is a lower resolution. As in firefox, when the browser is with many tabs open, appears the arrow to slide the tabs.

Firefox example:
http://i.imgur.com/NWCpCEB.png

[Ilan Firsov]

Sure it’s possible.
You’d have to listen to the resize window event and load document event (and if you dynamically update tabs add events for the adding and removing of elements), then in the event handler for both mesure the width of the containing div and the width of the ul, if ul width is higher show arrows, smaller or equals hide arrows.

Bump this post if you need an example

[johnq]

Yes, please, as I said, my knowledge in javascript is limited, but I can turn around with the basics, but I do not really know how. Could give me an example? The first example that you gave me, is perfect: http://codepen.io/ilanf/pen/MYavzK

Only now need these small changes.

I apologize for taking your precious time is, I’m already grateful for you taking the trouble to respond. Thank U.

[Ilan Firsov]

I’m glad to help :)

here is a pen based on my previous example. I added comments to explain what I did and why

http://codepen.io/ilanf/pen/raLPoL

you need to click the ‘edit on codepen’ link and then you will able to see this working since the forum has a maximum width that still shows the arrows

[johnq]

Amazing, amazing, amazing! Thanks for the Christmas present. Quite an accomplishment. I will be forever grateful.
I will not forget to give credit to that solution. Again, thank you.

[johnq]

Everything was perfect. I’m using the bootstrap, already added dropdown and was magnificent. Thank U. And I could not explain to you how ashamed I am asking for just one more thing.

You know the continuous effect of traditional scrollbar? Do not you think it would be very interesting to add scrool effect keep the scroll arrow? Clicking pressed to move the menu. I spent the whole night trying to add it, but was giving many conflicts. That’s a shame for me. At the end of the month will sign a plan in Lyndaou in tutsplus to reduce my ignorance.

Anyway, I’m too grateful to you for that.

[Ilan Firsov]

Sure thing, it’s actually simpler than I thought it would be

http://codepen.io/ilanf/pen/ByLQxq

I had a weird bug where when you drag the mouse out of the button (actually drag the link) and release it would not fire the mouseup event (that stops the scrolling), but I managed to get around it

[johnq]

Incredible. Would you be the next Zuckerberg? Good luck! ;)
amazing how you solved it quickly, a clean, proper and beautiful code. Thank you, I hope this solution will help others.

[Author]

Posts