Jquery for horizontally sliding menu bar
Is there any jquery library using which it is possible to move menu bar horizontally? What I want to do is I have a menu bar which contains five items (Home, About Us, What We Do, Technologies, Contact Us). It is a dynamic menu bar and if the admin wants he can add more items to this menu bar. So suppose he adds three more items to the menu bar like (Item1, Item2, Item3) then new menu bar will look like (Home, About Us, What We Do, Technologies, Contact Us, Item1, Item2, Item3). And also he can add even more in future. Now what happens is on adding more items to the menu the newly added items are not displayed properly because page width is defined at 80% and it cannot be increased. So what I was trying to do is to provide a horizontally sliding menu. Means two arrows will be available at both the ends of the menu bar and visitor can press left pointing or right pointing arrow to access the menu items. Well so far I have not come across any jquery/javascript for this so I tried some other jqueries but they are for images and what happens is on pressing left or right arrow the whole menu slides but I want only one item to slide like on page load if user presses right arrow then home will be hidden and the menu bar will display like this (About Us, What We Do, Technologies, Contact Us, Item1). Mean on each right arrow press each leftmost item will hide and right most items will start showing up one by one. If you guys need more clarification I want Firefox like horizontally sliding functionality for my menu bar. In Firefox when more and more tabs are opened then after certain number of tabs two arrows appear at both ends and user can press arrows to slide and access the tabs. Thanks for your help in advance.
A sliding menubar does not look good. I may suggest some plugin that you can find here
but, i suggest to change your mind about the design, and have something like this:
When the user clicks on the Plus button, you can take him to a page where he can see as many options as he wants.
Or, add a drop down next to the menu bar where user can see all the options.
- How to remove "chrome is being controlled by automated test software" selenium javascript
- How to add text to a pop up window in Javascript?
- Using addEventListener and getElementsByClassName to pass an element id
- 'getDoc' is not exported from 'firebase/firestore'
- Find all elements with an 'id' attribute on the DOM
- I have a button that increment a counter when users click on it, but I want to delay the updating process if users click really fast
- rendering dropdown dynamically vue.js
- XForms Refresh not working? (XSLTForms 1.7)
- Why won't a simple image load in Phaser in the browser?
- Counting cells with a specific class in JavaScript
- How to join / combine two arrays to concatenate into one array?
- Execution order of GS files in a Project
- TypeScript Type-safe Omit Function
- how can i change html input to change to decimal when pressing comma while typing
- HTML5 enable Previous/Next track when playing Video/Audio
- Is there a way to get the JSX/TSX of a React component from the code itself?
- Imitate webserver for tests with Jest
- Check if IndexedDB database exists
- How do you mix the conditional operator ( ? : ) and deconstructed function returns?
- Use API to autofill form options?
- Display JavaScript Fetch for JsonResponse 2 Tables on HTML
- How to count number of social shares on web page locally
- How do I fix CORS issue in Fetch API
- Firebase Cloud Functions: Difference between onRequest and onCall
- Model.create is not a function - strapi
- Button in a table cell to open a modal dialog
- File API - Blob to JSON
- How to check if a variable is a blob in JavaScript
- Where to save a JWT in a browser-based application and how to use it
- React Native <Modal /> onDismiss not invoked