HTML menu navigation menu with horizontal slides - javascript

I need 3 level menu bar like this:
User will select 3 different options from the menu.
in this example the target url will be like this:
www.mysite.com/show.php?type=cat&size=middle&color=yellow
The url will be opened as soon as user changes one option in the menubar.
I don't have experience to make this menu from scratch,
is there any ready scripts making similar behaviour,
or which terms do you recommend me search for in javascrpt forums?
Thank you

Related

Dropdown navigation functionality on mobile

I am working on a website using a CMS. On desktop the navigation works properly with the dropdown menu working on hover. So the dropdown header is clickable and when you hover over it the dropdown menu shows. My issue is on mobile I need the page for the dropdown header to still be accessible. I have seen solutions on this site where you can make the dropdown header be clickable with the user taps twice on the header, however my client wants a different user experience. They want the dropdown header to show as 'Overview' inside the dropdown menu. So if the dropdown header title is Services and goes to the services.html page, on mobile they want to add a link inside the dropdown menu that says Overview and goes to the services.html page. Example images below.
Example on desktop
Example on mobile
Keep in mind the solution has to work for the possibility of multiple dropdown's. Hopefully someone already has a solution for this. I would like to get solutions using vanilla Javascript only.

Get a burger menu accessible from all pages

I'm newbie with CSS and would go with the beautifull CSS burger menu from Victor Frere : http://codepen.io/victorfreire/pen/QywRNM
My main page content will replace the following example text :
#1 Burger Menu
inspired by
Google Material Design
How could have the 3 bars menu visible and accessible on all pages of the website ?
i mean, if user clicks on the burgermenu, click on 'About' link , that wpage loads but so far the burger menu no longer visible on the top left hand side ?
What modifications should i do to get the burger menu always accessible from any page ?
Many thanks,
Well either you could use php like this, or you could simply copy and paste the burger menu html code into all pages, maybe I understood you wrong but from what I understand this should work, let me know if you need any more help.

Slide content on a page instead of loading each menu bar page

I'm new to web development. I'm making a site for a non-profit organization and I need some help. I am building a menu bar but instead of having to load each page separately, I am thinking of incorporating all the content on the same page. Only difference is that the new content will slide from the right whenever a new link is clicked.
Please check out www.pakgeosoc.org to see what i'm saying. I want to build a menu bar of this sort that will slide content from left or right whenever new link from menu bar is clicked.
I know this can easily be done using javascript. A simple explanation of how would be great! :)
P.S. The website I am building is a sister site of this website and my client (who owns this website) wants me to follow this template.
You may want to check these questions asked before:
JS or Css page slide transition between 2 full pages
slide between pages using jQuery

Website loader engine

I have a very simple question. I am starter at website building. So I have to build an website with several menus and pages. I have a dropdown menu with 5 main menu items and each main menu has about six sub-menu items. Content of each sub menu items is in html files in diferrent directories.
I look for a content loader engine. I have already try some ajax loader script with repairing bookmarking and back button, but none of them works perfectly. So I need a perfect html and php page loader method which can load content from html or php files when I click on one of menu items.
Thanks!
Regards,
Norbi
Give a a href link tag for each menu item
Menu Item 1
Menu Item 2
Will work

Pin tabs in a tab panel

i couldn't find a better title,
but i would like to build a tab panel with two tabs that are always present
and a undefined number of other tabs that are generated dynamically by the user.
I would like to implement something similar to the app-Tabs in Firefox:
The tabs added by the user should be scrollable, while the other 2 tabs should be pinned and always displayed.
Here's an image:
Is this possible via ext or do I have to do it via css?
Thanks for any ideas!
Ok for those who are interested, here is how i did it now.
I shift my tab bar to the right by applying a padding-left.
The two tabs that i want to pin are hidden
and in the free space that results from the padding i put two buttons and make them look like tabs.
If they are clicked, the hidden buttons are activated.
It's not completely finished, but i think it will act as desired.

Categories