- This topic is empty.
-
AuthorPosts
-
December 1, 2014 at 9:36 pm #189702johnqParticipant
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.
December 2, 2014 at 12:28 am #189703Ilan FirsovParticipantYou 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 CSSoverflow: 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 pressedDecember 2, 2014 at 1:40 am #189706Ilan FirsovParticipantHere is a simple sliding thingy example
http://codepen.io/ilanf/pen/MYavzKDecember 18, 2014 at 4:42 pm #191194johnqParticipantI 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.
December 19, 2014 at 8:03 am #191246johnqParticipantI 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.pngDecember 19, 2014 at 5:11 pm #191288Ilan FirsovParticipantSure it’s possible.
You’d have to listen to theresize
window event andload
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 containingdiv
and the width of theul
, iful
width is higher show arrows, smaller or equals hide arrows.Bump this post if you need an example
December 20, 2014 at 9:20 am #191323johnqParticipantYes, 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.
December 21, 2014 at 2:44 am #191341Ilan FirsovParticipantI’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
December 22, 2014 at 2:55 pm #191457johnqParticipantAmazing, 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.December 22, 2014 at 6:58 pm #191462johnqParticipantEverything 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.
December 24, 2014 at 1:17 am #191552Ilan FirsovParticipantSure 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
December 24, 2014 at 9:28 am #191575johnqParticipantIncredible. 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. -
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.