I am using Wordpress and the Underscores starter theme to build a website for a client. The landing page is a one-pager with a navigation menu that slides to the correct section with anchor tags.
The issue is that for the first section the navigation link's "current" class doen't activate until I click the "home" link itself (the page doesn't move, only the class activates) or scroll a bit down. In the html the "home" section seems on the top of the viewport, so it should be activated on landing. Any ideas?
You can add current class when page is loaded
$('.main-menu li:first-child').addClass('current');
Or event check if there is no selected items:
if ($('.main-menu .current').length == 0)
$('.main-menu li:first-child').addClass('current');
You can trigger that with js jquery, somehting like
$('.yourFirstMenuElement').click();
Related
I have a sidebar router-view element in my app.vue that is optional next to my "regular" router-view element. Now this sidebar has a transition effect when it opens and now I'm also trying to add sliding transitions when navigating within this sidebar. The idea is that this should work like in the iOS Agenda app:
I'm adding a transitionName depending on $route.to and $route.from but I'm not seeing how I'm getting the effect I want the way my template is structured now.
I've set up a sandbox here: https://codesandbox.io/s/vuepoc-etqvg
Click "Go to Day x"
Click on "Details" and de sidebar opens (works!)
Click on "Expenses" in de sidebar (Looks like it only needs overflow: hidden but didn't work for me)
Click on "Back" (This doesn't work at all..)
Is there someone that can give me a kick in the right direction? Am I on the right track? Should I structure my html/css differently? Or maybe even change the way I structure my routes and put the sidebar somewhere else?
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
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.
I'm making a simple WordPress theme and I wanted to include a jQuery Sidr into and I got that done properly, however the menu icon that pulls the slide-in sidebar disappears behind the sidebar leaving the user with no way to collapse the sidebar again.
The theme is far from complete (and I was working on it using an offline WP setup) but I put it up here temporarily for the sake of this question: http://sweven.vhbelvadi.com
The menu icon in question is on the top-right. I have given it top and right properties, floated it right, as well as given it a fixed position to make it stay there.
As I said, the design is far from complete, so take no notice of it, but once you click on the icon to slide out the sidebar area, the menu icon disappears.
I have tried giving it a z-index which works, putting the menu button on top and makes it accessible, but you cannot see it on the link above because I removed it; didn't like the look of it.
Basically, I'd like to know if there's any way of changing the attribute (focus, active don't seem to work) or do anything else so once the sidebar opens the menu icon slides out alongside it.
What is my solution?
Thanks.
Update:
Right now I'm using the following code at the link above:
$(document).ready(function(){
$('span.genericon').on('click', function(){
$('#simple-menu').sidr({side: "right"});
$('span.genericon').css({
right: "6.5em"
}, 500);
});
});
It works, but how would I return the menu icon to its original place?
The collapse button is there but when the sidebar opens, the button goes behind it, so you need to change the CSS based on whether sidebar is visible or hidden, so use a kind of toggle like below.
$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
Demo
Demo 2 (by Patrick)
When you trigger the jQuery to move the menu to make it slide out, use the jquery animate command to change the "right" property of this menu icon (.genericon.genericon-menu) to 270px.
So, something along the lines of this:
$(document).ready(function(){
$('.genericon.genericon-menu').on('click', function(){
$('#idofmenu').//code to move the menu out;
$('this').animate({
right: "270px"
}, 500);
});
});
And then vice versa for when the menu collapses.
I have defined in the code for a link to go to a page, but it is not going anywhere when I click it.
If you go to this page: http://www.davidhechtkitchens.com/ and try to click on "Portfolio" in the top navigation it does nothing. If you look at the code you'll see that it's defined to go to portfolio.html.
This problem only seems to be in effect when there is a sub-menu underneith the top link. If I remove the sub-menu from "Portfolio" it works.
It seems you have some kind of script active that prevents the default action,
While checking the source code, When I click on the button it adds a class to the anchor. (In most cases this is made to make it work on mobile devices)
Simple fix Just add a class of .menu-link to all the links that you want that are not sub menu links. You can use whatever class you want but make sure that class is only on the href's you want to actually use this. Also don't forget to put this AFTER your Jquery include.
<script>
$(".menu-link").on("click", function(){
//get this clicked link
var link = $(this).attr('href');
//go to link clicked
window.location = link;
});
</script>