Mega Menu with unlimited nested sub menus with Vue3
Budget: $40 – $60 USD
As the project owner, I need a responsive mega menu for a Vue.js 3 project, primarily for navigation purposes. I'm looking for a menu exactly similar to the one on Bingx.com in terms of functionality.
Please read following requirement carefully before bidding:
Key Requirements:
- The menu should be responsive, adapting smoothly to various screen sizes exactly like bingx.com and displaying hamburger menu on mobile sizes and display the same menu to mobile friendly view, should not have multiple different code for different sizes (by hiding one and showing the other one for different screen sizes)
- The functionality should mirror bingx.com's mega menu with unlimited nested sub menus using ul, li tags.
- Font colors, sizes should match bingx.com
- every submenu item must have title, optional title badge, optional icon (font awesome or any other font icon library) , optional small description abilities.
- border radius, menu hover color and, opening and closing transition, and margins and paddings should match bingx.com
- menu must support and display correctly for both LTR and LTR directions and languages, LTR by default and RTL when applying a css class or dir attribute just to parent tag.
- Must be implemented on a fresh created Vue 3 project using vite with javascript which has a component named Megamenu with a prop named items which data (nested js object) to be passed is similar to text file attached.
- must implemented as a stand alone component in scr/components/Megamenu.vue with scoped css (css, sass, less, etc.) and pure javascript, with no external dependencies or javascript/css libraries. (except for font icon css/library)
- must not require to link any js or css file in public/index.html or any other file, every thing must stay in component file located in scr/components/Megamenu.vue
- must not require to call any code or add anything to mounted() or computed() functions in scr/components/Megamenu.vue
- must support router-link or regular a html tag depending on items prop passed, if isRouterLink is set true, then it's router-link otherwise it's regular a tag
- attention to every detail specified is very important and final project is only accepted and paid if every detail is implemented correctly.
Note: Interaction with other site components is not required for this project. Let's focus solely on the menu's functionality.
Please read following requirement carefully before bidding:
Key Requirements:
- The menu should be responsive, adapting smoothly to various screen sizes exactly like bingx.com and displaying hamburger menu on mobile sizes and display the same menu to mobile friendly view, should not have multiple different code for different sizes (by hiding one and showing the other one for different screen sizes)
- The functionality should mirror bingx.com's mega menu with unlimited nested sub menus using ul, li tags.
- Font colors, sizes should match bingx.com
- every submenu item must have title, optional title badge, optional icon (font awesome or any other font icon library) , optional small description abilities.
- border radius, menu hover color and, opening and closing transition, and margins and paddings should match bingx.com
- menu must support and display correctly for both LTR and LTR directions and languages, LTR by default and RTL when applying a css class or dir attribute just to parent tag.
- Must be implemented on a fresh created Vue 3 project using vite with javascript which has a component named Megamenu with a prop named items which data (nested js object) to be passed is similar to text file attached.
- must implemented as a stand alone component in scr/components/Megamenu.vue with scoped css (css, sass, less, etc.) and pure javascript, with no external dependencies or javascript/css libraries. (except for font icon css/library)
- must not require to link any js or css file in public/index.html or any other file, every thing must stay in component file located in scr/components/Megamenu.vue
- must not require to call any code or add anything to mounted() or computed() functions in scr/components/Megamenu.vue
- must support router-link or regular a html tag depending on items prop passed, if isRouterLink is set true, then it's router-link otherwise it's regular a tag
- attention to every detail specified is very important and final project is only accepted and paid if every detail is implemented correctly.
Note: Interaction with other site components is not required for this project. Let's focus solely on the menu's functionality.