"I am using the js plug-in ""hiraku.js"" to create the drawer, but the link on the smartphone menu is strange, so I am having trouble."
If you have used hiraku.js, or if you have had a similar experience,
I would appreciate it if you could teach me how to install the navigation correctly.
Navigation is an in-page transition (scrolling to the link position).
For more information, I uploaded the site that is currently being created, so please check the navigation behavior of the smartphone screen.
https://satori-log.com/product/30daystrial-final/
Cause:
When I opened the menu, hiraku.js fixed the screen.
Your own solution:
Unscroll fixing by re-specifying position and overflow settings to initial values for body in jQuery
Cause: Unknown
conjecture:from some configuration of hiraku.js
Guess your own solution: Overwrite hiraku.js initial settings with jQuery, etc.
There are no error messages.
Here's an excerpt from the appropriate section.
<body class="drawer drawer --right">
<header role="banner">
<!--Hamburger button-->
<button type="button" class="hiraku-open-btn" id="offcanvas-btn-right" data-toggle-offcanvas="#js-hiraku-offcanvas-1"aria-expanded="false" >
<!---<span class="hiraku-open-btn-line">/span>-->
<img class="open-btn" src="img/hamburger.svg" alt="Hamburger Button">
<img class="close-btn" src="img/batsu.svg" alt="close button">
</button>
<!--Mobile Menu-->
<nav class="mobile-nav offcanvas-right" role="navigation">
<ul class="navbar-nav">
<lic class="nav-item">
<a href="#news" class="nav-link">News</a>
</li>
<lic class="nav-item">
<a href="#service" class="nav-link">Service</a>
</li>
<lic class="nav-item">
<a href="#results" class="nav-link">Results</a>
</li>
<lic class="nav-item">
<a href="#qa" class="nav-link">FAQs</a>
</li>
<lic class="nav-item">
<a href="#price" class="nav-link">Price</a>
</li>
<lic class="nav-item">
<a href="# comments" class="nav-link"> Comments</a>
</li>
<lic class="nav-item">
<a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
</nav>
</header>
</body>
$( document).ready(function(){
// Opening and closing the smartphone menu
$(".offcanvas-right").hiraku({
btn: "#offcanvas-btn-right",
direction: "right"
});
// Unlock the screen when you press the link
$('a[href^="#"]').click(function(){
$('body').css('position', 'static');
$('body').css('overflow','scroll');
$('body').css('overflow-y','scroll');
});
});
$( document).ready(function(){
$('a[href^="#"]').click(function(){
var speed = 400;
var href=$(this).attr("href");
var target=$(href=="#"||href==""?'html':href);
var position = target.offset().top;
$('html, body').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
I looked it up and found a similar case.
"However, the solution was ""restart the PC"", but in my case, it didn't change when I tried."
I'll put it on just in case.
https://teratail.com/questions/200664
·Mac
·Chrome
·jQuery.3.4.1
·Hiraku.js
Mobile (767px or less)
javascript jquery
Self-resolved.
In conclusion,
The screen was fixed by the function of hiraku.js, so when you press the link on the menu, you can release the screen fixation.
When correcting it, I wrote the following in jQuery.
$( document).ready(function(){
// Opening and closing the smartphone menu
$(".offcanvas-right").hiraku({
btn: "#offcanvas-btn-right",
direction: "right"
});
// When you open the smartphone menu,
$('.hiraku-open-btn').click(function(){
// toggle the display of headers
$('header').css('background-color','rgba(62,62,62,0.7)');
$('.hiraku-open-btn').css('margin-left', '81.39px');
$('.open-btn').hide();
$('.close-btn').show();
});
// When you close the smartphone menu,
$(document).click(function(event){
if(!$(event.target).close('.offcanvas-right') .length
&&!$(event.target).clost('.hiraku-open-btn').length){
// toggle the display of headers
$('header').removeAttr('style');
$('.hiraku-open-btn').removeAttr('style');
$('.open-btn').show();
$('.close-btn').hide();
}
});
// When you press the link
$('a[href^="#"]').click(function(){
// unlock the screen
$('body').css('position', 'static');
$('body').css('overflow','scroll');
$('body').css('overflow-y','scroll');
// close a menu
$('.js-hiraku-offcanvas-open') .hide();
$('.js-hiraku-offcanvas-body-right') .css('left', '0');
// toggle the display of headers
$('header').removeAttr('style');
$('.hiraku-open-btn').removeAttr('style');
$('.open-btn').show();
$('.close-btn').hide();
// initialize class
$('body').removeClass('js-hiraku-offcanvas-body-right');
$('.hiraku-open-btn').removeClass('js-hiraku-offcanvas-btn-active');
$('.hiraku-open-btn').atttr({'aria-expanded':'false'});
$('.js-hiraku-offcanvas') .removeClass('js-hiraku-offcanvas-open');
$('.js-hiraku-offcanvas-sidebar').removeClass('active');
// Initialize style
$('html').removeAttr('style');
$('body').removeAttr('style');
$('header').removeAttr('style');
$('.hiraku-open-btn').removeAttr('style');
$('.close-btn').removeAttr('style');
$('.js-hiraku-offcanvas') .removeAttr('style');
});
});
The basic flow is as follows:
Click the button to run.
Switch the button image and adjust the position.
This part has nothing to do with making the link work.
Optional.
It runs when you click on a background other than the smartphone menu and buttons.
At this point, delete the style settings that you set when you opened the smartphone menu.
This is the liver.
Runs when you click the link on the smartphone menu.
First, unlock the screen so that you can scroll.
However, if the menu remains open when you press the link, the screen scrolls back to the top of the screen as soon as you close the menu.
Therefore, you should also add the action of closing the menu as soon as you press the link.
The following is a description of the header display, such as button image switching and positioning.
Do this at your discretion.
Finally, initialize the class and style specification and return the button to its previous state.
Because it is not closed by the function of hiraku.js, the class attached when the button is opened will continue to remain when the menu is closed.Therefore, when you press the link, you need to explicitly delete it.
That's all.
If you get stuck in a JS plug-in like this, it's basically best to look at the source of the plug-in and deal with it.
However, there are times when you can't understand the sauce well even if you look at the sauce.
In that case, use Chrome's verification tool to compare before and after pressing the button, and
I think it's better to look at how the values of class, style, and properties are changing and deal with them.
© 2024 OneMinuteCode. All rights reserved.