how to create multiple "CSS Gooey Menu" on the same page? - html

I'm trying to use "CSS Gooey Menu" posted here:
codepen.io/lbebber/pen/pvwZJp.
I want to make multiple menus on the same page, but while I repeat the menu code and click on the new menu it still shows the first menu items as seen on the picture:
What can I do to get over this problem?

Related

I have a problem with my blogger site.When in my mobile mode

When I click on the point A the drop-down menu appears, but when I tap on point B(see photo) it doesn't and appears but it redirects to a blank page. the photo link is attached
https://drive.google.com/file/d/1cCCO7XthdYpuLoStj-jqgFuc6Ckssubs/view
The Dropdown menu should also appear by clicking the text(JEE)
here is the XML code of my template
https://drive.google.com/open?id=1WTVVltq1ucpOnIRWW_qyw84y6w9VZBeE
Hey there, its a normal thing to implement.
According to your question, I guess that you are working on a custom
coded theme and I assume you can code easily in header.php
Her is a plugin : jQuery Accordion MenuJQuery Accordion Menu Widget
(JQuery Accordion Menu Widget)
This plugin will add a widget in Appeareance > Widgets.
Step 1 : Create a dynamic sidebar and load this widget within that and
set all settings.
Step 2 : Go to header.php and create 2 div within a parent div.
like,
Step 3 : Load your dynamic_sidebar() in div.menu-code
Step 4: Add a hanburger icon in div.icon-hamborger
Step 5: show div.mobile-menu-container in mobile size ( <=768px ) only
Step 6 : Hide div.menu-code on load and show div.icon-hamburger only
Step 7 : code within jQuery, if you click on hamburger-icon, that will
show div.menu-code with a sliding effect
That's all.
Good luck ;)
https://www.quora.com/How-do-I-make-my-menu-as-a-drop-down-in-mobile-mode

R flexdashboard side-bar menu

I was wondering if its possible to recreate a shiny-dashboard like menu in flexdashboard?
I'm using flexdashboard with crosstalk. In the current setting I'm having too many inputs in the sidebar. So basically, I'd like hide them like submenu items in foldable menu items.
Any ideas how I can pull this off? I'm guessing its possible to use external css/bootstrap elements.
Many thanks

"Active" box on navigation bar not showing for dropdown menu

My problem is that for my navigation bar, it's supposed to have a green "active" box to show what tab the user is currently on. The box shows up for every tab I have, except for one, which happens to be a dropdown menu. Therefore, I need help figuring out why it doesn't appear. Is it because I declared 2 classes in an <a> tab? Here's my code: https://jsfiddle.net/wmzpktw7/. As you can see, there's no boxes on the "Games" menu. If you move class="selected" into another tab, you'll see the green box. Any help will be much appreciated.
It's because you have two declarations for class inside the HTML element. Multiple classes can be declared like this:
<a class="dropbtn selected" href="#">Games</a>
https://jsfiddle.net/mmd9u1h7/1/

Wordpress menu and anchor links

I'm having an issue with anchor links in my menu.
Here is a quick example of the issue I'm having:
The 2 Anchor Links:
<div id="anchor1"></div>
<div id="anchor2"></div>
The Menu:
Menu Item One (http://test.com/m1)
-Sub Menu Item One (/m1/#anchor1)
-Sub Menu Item Two (#anchor2)
Essentially Sub Menu Item One will bring me to the right place but it always re loads the page if I'm currently on it.
Sub Menu Item Two works perfectly if I'm on the page but does not work if I'm on another page.
So what I need is for the link to take me to the anchor location without refreshing the page if I'm currently on it and to take me to the anchor location if I'm on a different page.
Any ideas?
Did you use full path in href on Sub Menu Item One? Add full path with the anchor in the end and it should work like you hoped.

How to edit Wordpress menu to make a two-line menu?

I am trying to edit my wordpress page to make every menu item at the top of the page two lines long with the top line being a single word (ie: Home, About, etc.) and another line in a different font underneath each item (ie: "Read about us" underneath "About").
Here is an example of what I mean:
http://images.sixrevisions.com/2009/04/13-26_css_block_menu.png
I am aware that this is achieved in some way by using the 'Description' box on the Wordpress menu screen, and I have checked the 'show descriptions' box, but I'm unable to get it to display correctly.
Any help is greatly appreciated!
You do this by creating a custom walker which extends the Walker_Nav_Menu class - here's a good tutorial on it;
http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output