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.
Related
We built our website using Adobe Muse, which has since become obsolete, but since beginning to manually amend the code outside of Adobe Muse, the dropdown button on our navbar has decided to stop working on some pages.
Please see the 'Depots' button on the below URL:
https://stc-uk.com/dropdown.html
When hovering, a list of our depots is displayed.
The same code is present on the below page, but the button doesn't do anything when hovering:
https://stc-uk.com/stc.html
We have tried to copy and paste the code but this doesn't work.
It's not a simple html/css dropdown button, as we generated the button through an Adobe Muse widget. We've tried to re-create the button just using html/css but it doesn't fit in correctly.
I am trying to create a sidebar navigation alot like this website:
http://www.josephleonard.com/
I am currently using the Adaptive Theme in drupal and using panels. I have the whole layout perfectly. All I need to figure out is how to trigger a panel after selecting an item on the menu as it does on this website. Any help will be appreciated!
Use CSS to hide your pop out panel by default. display: none; then use JQuery to show your pop out panel when a menu link is clicked. See this post for both a CSS and jQuery solution. https://css-tricks.com/snippets/jquery/styled-popup-menu/
I'm editing a website and I can't get it to work properly. I'm using a responsive menu to go between pages (stays in the same page but changes out the page elements). The code for it is here.
Now I'm trying to include a link in the text of the page (as opposed to just in the menu)
Here is the code for that plus the menu.
The link won't work at all. What am I doing wrong?
I'm trying to understand how this kind of menu works : www.dantobinsmith.com/
How do you make the page associated with one of the menu items appear when you put your mouse over it?
Looking at the code base of the website I see that the developer has created the website primarily in JavaScript/JQuery where there is a full screen navigation that fades in the content when hovering on the correct navigation.
On clicking of the navigation item, the whole navigation is removed and the content appears at 100% opacity.
The website IS build oddly on Wordpress for backend editing, BootStrapper (getbootstrap.com) and JQuery and any additional javascript can be found here http://www.dantobinsmith.com/wp-content/themes/dts/app.min.js to inspect yourself.
you could do it with css:
#input:hover { background-coler:blue; /*additional css for #input on hover */}
or javascript:
<div onmouseover="document.getElementById('input').style.backgroundColor='Blue';">
<input id="input">
</div>
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