Build an Apple Mobile Menu for your WordPress Website - Elementor Tutorial
ฝัง
- เผยแพร่เมื่อ 24 ก.พ. 2024
- Visit the Apple or Ikea website on your mobile. Liking the sub-levels and ease of navigation?
This is how to build you own without using Pop-Ups!
Get the HTML Code to be added after building the Containers: www.codesnippets.cloud/snippe...
Let me know how you find this video: Build an Apple Mobile Menu for your WordPress Website - Elementor Tutorial
Elementor Hosting - managed wordpress hosting :
be.elementor.com/visit/?bta=2...
Elementor Pro - The builder that will make you a pro
be.elementor.com/visit/?bta=2...
Get our Awesome 'How to Build an Elementor Website Course' - Lifetime Updates and access to New Modules at no extra cost: learn.websquadron.co.uk/
Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co.uk/how-to-star...
Book your 1-2-1 Consultation: websquadron.co.uk/socials
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your TH-cam Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk - แนวปฏิบัติและการใช้ชีวิต
That's brilliant, Imran.
I love that you're including code more and more in your tutorials.
I agree! Imran is brilliant i love it!
Hi Everyone, I saw some people here having problems with the Menu not being visible when scrolling down the screen.
In the first block of code you should change Position to Fixed. Add another line Width:100% this code solved the same problem i was facing.
Imran, i still want to thank you for this amazing video! it really helpen me out a lot. I love your tutorials! Keep up the good work :)
Waited for this one! I was wondering why noone is making videos about a mega menu version for mobile. I think many people will need this.
I liked it so much, i made some additional fade transitions. For everyone who like to copy and try out, here is what i changed:
The CSS part:
[id^='Menu'] {
/* ... */
visibility: hidden; /* Changed from display: none; to visibility: hidden; */
/* ... */
transition: opacity 0.5s, visibility 0.5s; /* Added this line for transitions */
}
The Java part:
function toggleVisibility(elementId, show) {
var element = document.getElementById(elementId);
if (element) {
element.style.visibility = show ? 'visible' : 'hidden'; // Changed from display to visibility
element.style.opacity = show ? '1' : '0';
}
}
function closeAllMenus() {
document.querySelectorAll("[id^='Menu']").forEach(function(menu) {
menu.style.visibility = 'hidden'; // Changed from display to visibility
menu.style.opacity = '0';
});
}
Where did you put this code? I am looking at something to fade in and out like the apple website so this would be good to know!
can you post a json please!
@@Alex-nn4qz All he did was update the code you put into the html widget.
Here is the full code including aequitas' updates:
/* Apply styles to any element whose ID starts with 'Menu' */
[id^='Menu'] {
opacity: 0; /* Start invisible */
visibility: hidden; /* Changed from display: none to visibility: hidden */
position: absolute; /* Use absolute positioning */
top: 0; /* Adjust top as necessary */
left: 0; /* Adjust left as necessary */
z-index: 9999; /* Ensure it's above other content */
transition: opacity 0.5s, visibility 0.5s; /* Added this line for transitions */
}
/* Apply pointer cursor to any element whose ID starts with 'Icon' or 'Link' */
[id^='Icon'], [id^='Link'] {
cursor: pointer;
}
document.addEventListener("DOMContentLoaded", function() {
// Function to toggle visibility for a specific element by ID
function toggleVisibility(elementId, show) {
var element = document.getElementById(elementId);
if (element) {
element.style.visibility = show ? 'visible' : 'hidden'; // Changed from display to visibility
element.style.opacity = show ? '1' : '0';
}
}
// Function to close all elements starting with 'Menu'
function closeAllMenus() {
document.querySelectorAll("[id^='Menu']").forEach(function(menu) {
menu.style.visibility = 'hidden'; // Changed from display to visibility
menu.style.opacity = '0';
});
}
// Show Menu_main when Link_open is clicked
document.getElementById('Link_open').addEventListener('click', function() {
toggleVisibility('Menu_main', true);
});
// Adapted to handle any ID beginning with Link_close_all to close all menus
document.querySelectorAll("[id^='Link_close_all']").forEach(function(btn) {
btn.addEventListener('click', function() {
closeAllMenus();
});
});
// Show Menu_ipad when Link_open_ipad is clicked
document.getElementById('Link_open_ipad').addEventListener('click', function() {
toggleVisibility('Menu_ipad', true);
});
// Show Menu_iphone when Link_open_iphone is clicked
document.getElementById('Link_open_iphone').addEventListener('click', function() {
toggleVisibility('Menu_iphone', true);
});
// Setup for any click on IDs starting with Link_close_sub to show only Menu_main
document.querySelectorAll("[id^='Link_close_sub']").forEach(function(link) {
link.addEventListener('click', function() {
closeAllMenus(); // First, close all menus
toggleVisibility('Menu_main', true); // Then, show Menu_main
});
});
});
Imran, this vid was a lot of work! Well done, and elegant approach. This will help me clean up the messy navigation on the site I manage. Thank you.
Glad you liked it
Thanks for doing so much work on this. A bit complicated for non pros yet with your video I think it can be done since you did the code behind. Really fantastic what you do for all of us.
Once you get it down on paper with how many Containers, their name/IDs it all makes sense. Just have lots of paper handy.
Heads up ... if you have a sticky top header ... you'll need to make the menu containers sticky too otherwise when you scroll down the page the containers are all the way at the top.
I found that the menu containers must also be offset accordingly
Thanks so much, This is fantastic!!
All hail Imran! 😂
Buddy, you do some seriously creative stuff. This is awesome!
Thanks 😅
You are a star, thank you!
Love this!!!!!!
These tuts just keep getting better and better.
Big thanks. Please do click Share and share them :)
Thank you so much. Very cool approach!
Big thanks :)
Truly good work!!!
Very good work Imran 😍
Thank you for this video.. Genius.. Long time listener / learner... You are absolutely pushing me closer to paid subscriber if your paid content is this good. I think you have already given me a education for free worth what ever the cost of your course is.
:)
Main course is here: learn.websquadron.co.uk/
cool :)
great job
Brilliant!
Amazing. Am hoping it will pass multiple device testing as this is exactly what I have been looking for. A site I am making has a lot of services and the usual dropdown just wouldn't cut it for the mobile navigation.
Very nice discovery and sharing of this effect 👍🏻
Many thanks
Awesomeee
Thanks a lot! I've always wanted to know how to make these types of menus in elementor
No problem!
Sweet!
Thanks!
🤩 when you need something and it appers
Imran!! This is exactly what I’ve been needing for soooo long!! I can’t wait to try and build this menu. Thank you so much for this video!! 🥳
Nicky
Hope you enjoy it! Don’t forget to share :)
love it and the last bit to finalize my own page was exactly a new menu.
I like it as a second option also for desktop user, however adding transition and colour change on hover over ofc.
For those who like as well, change as you want:
.mainmenu {
background: linear-gradient(to bottom, rgba(65,44,109,1) 0%, #212039 100%)
}
.heading h2 {
color: #FDFCFB; /* Main color */
}
.mainmenu:hover .heading h2:hover {
transition: all 0.4s ease-in-out;
color: #D4145A; /* Color on hover */
}
This looks great and I'm going to try and implement it in my site, which currently uses pop ups. One question, I saw that you used H2 for your headers. Is this the HTML tag that you recommend to use for each menu item or should I use H3 for the sub menu?
I would use H3. The vid was more about the process and pieces :)
Thank u so much. What about SEO for menu? Thank u again👍🏻🙏
You will still have a normal WordPress Menu that is responsively hidden.
@@websquadron
Thank u
Great tutorial.... You da man .
I appreciate that!
@@websquadron For real you found a solution I've been looking for, for a long time. Your becoming one of my favorite content producers. Keep it up brother!!
@@DigitalDesigns1 Does this count as a tutorial? Honestly, I don't understand how it works and I'm currently researching it.
Awesome!!
Thank you for your excellent explanation; that is what I was looking for!!!
However, you have left off something helpful for me: once your template is finished, how do you put it online? Obviously, it is necessary to substitute the standard WordPress menu for this one. I understand it may be something easy, but I need a little help to do this.
It's in your Header Template so it will be visible.
@@websquadron Thanks!!!
Worked so well!!!
But I am little struggeling. How can I get the opened menu to stick on the screen? When scrolling down, it stays at the top and you can see the content below
Have you set it to VH 100?
hi Imran,
First of all thanks a lot for all the work and the code.
The only issue what i am facing is that if u open the menu and u scroll down u can see the normal website. is there a way not have a maximal scroll when u open the menu?
thanks a lot
Not that I know of. If you set to be Full Width and Full Height then you shouldn't see the screen below.
I already have a header template for desktop and if i add a second one, then it disables my first
Nice work out there. Is this same mobile menu visible on desktop? This is cool
You could modify to make it look fine on the mobile
@@websquadron I want it to display exactly like this on desktop as is it is on mobile
Hello.
Question: with so many containers on the page, how much does the site speed decrease?
As far as I understand, in addition to speed, it also affects the DOM.
I tested and it was fine even on a page with many containers (for the normal home page content).
The containers are set to Display None :)
Thanks so much master Imran, but i have a question, if we do that, Does it add too much loading and code redundancy?
Nope. It's in the header and the containers are set to Display: None, thus not taking up space until they become Display: Flex. If they were just opacity 0, then they'd still be present (even when invisible) but Display: none removes them :)
Thanks so much@@websquadron
Hi Imran,
Would it be possible to add this to a page instead of creating it as a template?
Yup :)
Hi Imran, I really like your Work. This is so brilliant. In my particular case i wanted to open the menu from the bottom of the screen. So i fixed my Main Menu „ID - Link_open“ Vertcial bottom. But then every time i am in the middle of the page (so i scrolled) and then want to open the menu, it s not there. So the first opend layer sticks to the top. Do you have a solution for that?
Ok i found a solution :D. When i check the position fixed directly in elementor on each container it does not effect properly but when i set custom css on each container for example „ID - Menu_main“ -> Custom CSS „selector {
position: fixed;
}“
Than it works fine.
Thanks to @EricJGerber i got even rid of the scroll bars. So now its almost perfect for me :)
@@SteinisGrafikdesign thanks for sharing your workaround!
At 7:50 I don’t understand how it can be, that under »Menu_ipad« the direction is in a row but under »Justify Content« the content is vertical (shown in the icons).
It's a weird way of how the icons display and do something different.
I need the journey details, i wana know how to use chatGPT like that😁😁😁.
Great video btw, Thanks!
I will get that recorded!
thank you @@websquadron
Can we make it for Bricks Builder too?
You can use the same process. The bulk of the video is about the logic in terms of IDs, etc. You can use the same HTML code :)
@@websquadron Thank you. 😀
That made my brain hurt, but I got there in the end... and it works really well. Thanks, Imran.
Yup, lots to take in, but it makes sense :)
mhhm i encounter one misterious failure... for the chevron and close_all_sub , it does not go back to main menu *scratching my head*
Failure 40 as we say in Denmark... one needs to make sure that there is no more submenus in the code than available on the website, the script for closing subs does not work xD
Yup
What I noticed is the close_all_sub does not work unless you have more than ONE menu to open so for example you have iPad, iPhone, Mac - it works but if you've only built iPad and testing it does not work - I spent 30mins playing around with it - kept on building and realised that was the fix!
@@Alex-nn4qz Omg i had the same issue and even asked in the comments, but you just gave me the answer. Thanks!
Has anyone tried to expand the code to have sub levels containers that close them to the level before? As Imran is explaining that the Ikea Menu works.
I want the sub levels to close one by one instead to go back to the main menu, but I can't make that work unfortunately
If you use an Accordion you could show sub levels one at a time.
Hey man!
I'm having an issue getting the two icons to line up at the top can you help me with how to get the two items at the top then to show the text underneath it?
Am I missing something?
Great vid by the way!
Is one higher than the other?
Hey,
It's like all three are on the same line if that makes sense?
What I've done for now is just keep everything as a one icon type of container just to bypass it for now
@websquadron Any help would be great!
Would need to see the site but can only support as part of a 1-2-1 learn.websquadron.co.uk/#support @@RyanKimber
@RyanKimber I had the same issue and its an easy to understand question. Solution: The Text will wrap around if you give it a width of 100%. You can do that in the advanced section of the text you placed.
Imran, This was great! this took me a min to implement but everything is on point. I wanted to share this update to the code. I was a bit annoyed when the menu containers would open I still had the ability to scroll down the page. I tried to use overflow hidden option in elementor for each menu container but it did not work. Disclaimer I am not a code writer or claim to be, but using chat gpt I have updated your code so that when any menu is open, the ability to scroll is disabled. It works for me. If anyone is wants this option, copy and paste below code. You will still have to use the naming conventions that Imran refers to in the video to make it your own. The only changes that i could see are /*Hide scrollbar*/ code in the style, and line 26 of the original code adding : document.body.classList.toggle('menu-open', show); // Add 'menu-open' class to body.
/* Apply styles to any element whose ID starts with 'Menu' */
[id^='Menu'] {
opacity: 0; /* Start invisible */
display: none; /* Ensure it doesn't take up space when not visible */
position: absolute; /* Use absolute positioning */
top: 0; /* Adjust top as necessary */
left: 0; /* Adjust left as necessary */
z-index: 9999; /* Ensure it's above other content */
}
/* Apply pointer cursor to any element whose ID starts with 'Icon' or 'Link' */
[id^='Icon'], [id^='Link'] {
cursor: pointer;
}
/* Hide scrollbar */
body.menu-open {
overflow: hidden;
}
document.addEventListener("DOMContentLoaded", function() {
// Function to toggle visibility for a specific element by ID
function toggleVisibility(elementId, show) {
var element = document.getElementById(elementId);
if (element) {
element.style.display = show ? 'flex' : 'none';
element.style.opacity = show ? '1' : '0';
document.body.classList.toggle('menu-open', show); // Add 'menu-open' class to body
}
}
// Function to close all elements starting with 'Menu'
function closeAllMenus() {
document.querySelectorAll("[id^='Menu']").forEach(function(menu) {
menu.style.display = 'none';
menu.style.opacity = '0';
document.body.classList.remove('menu-open'); // Remove 'menu-open' class from body
});
}
// Show Menu_main when Link_open is clicked
document.getElementById('Link_open').addEventListener('click', function() {
toggleVisibility('Menu_main', true);
});
// Adapted to handle any ID beginning with Link_close_all to close all menus
document.querySelectorAll("[id^='Link_close_all']").forEach(function(btn) {
btn.addEventListener('click', function() {
closeAllMenus();
});
});
// Show Menu_ipad when Link_open_ipad is clicked
document.getElementById('Link_open_ipad').addEventListener('click', function() {
toggleVisibility('Menu_ipad', true);
});
// Show Menu_iphone when Link_open_iphone is clicked
document.getElementById('Link_open_iphone').addEventListener('click', function() {
toggleVisibility('Menu_iphone', true);
});
// Setup for any click on IDs starting with Link_close_sub to show only Menu_main
document.querySelectorAll("[id^='Link_close_sub']").forEach(function(link) {
link.addEventListener('click', function() {
closeAllMenus(); // First, close all menus
toggleVisibility('Menu_main', true); // Then, show Menu_main
});
});
});
Excellent update and I love it when we can take things further.
Thank you! Why is the original code not updated yet?
You are a hero! This was my only problem.
@@websquadron please update main code because I was struggling a lot until I found this comment
@@leegaacy no problem! Happy to expand.. it was my only issue as well
18:56
That what i need...
Somewhere i made mistake i couldnt find where did i made mistake can you help me Please?
It’d have to be part of a consultation
every time i refresh the page or open the website the main menu shows up for some mili seconds is there any solution
Shouldn't do so unless you have some JS optimisation delay or something else applied.
i am having issue with the back button kindly help
Help as in how? Do you need a 1-2-1 consultation?
Guys can you help me maybe? Do i need another container for the two icons in the "ipad menu"? For me the two icons and the text is now in one row. Don't know how to wrap it right at the second icon.
I put it in a container but the backwards icon doesnt work anymore, because it is not in main container anymore
@@zerobambiro you can put into another container without an issue.
I had a similar issue of the back button not working, i noticed it was because I hadn't yet added in all containers mentioned in the code (I was testing as I built it). So it has an event listener for Link_open_ipad but I hadn't added that container in. So the code failed after that point as it was "listening" for something that wasn't there. As such the close icon didn't do as it should. Looking in chrome developer tools > Console pointed out the issue and helped me remedy it.
@@andy1luckman Thank you very much man! I rebuild everything and the mistake was gone. I think it was the same reason. Appreciate your answer!
I found the solution. The container changed his width on mobile even tho it had a width of 100%. I just used this css on every menu container: selector { width: 100%!important; }
Won't having so many containers affect performance?
Nope as I tested it and they are not displayed or taking up any space until the relevant icon is clicked
Some plain text links won't affect performance. But if you have some mega items containing images or videos, it will. And accessibility is dead
Hello, I tried to make the mega menu fixed and transparent, but it generates an error, could you help me?
Thanks
Possibly as part of a 1-2-1 consultation
@@websquadron Sorry I didn't understand, is there a second part of the video?
@@DERSONmusic I don’t provide 1-2-1 support for free thus it’s part of a paid consultation
How can we make an Apple desktop menu?
I'll do that soon, but you could use the same process, or use Elementor's Mega Menu Widget.
Really surprised they both have far left justified text, especially when most people are right handed which is just more ‘work’ for all to reach. Really should be centered which is how I always setup.
Totally go for it with the centering :)
It’s really sad that the elementor menu widget is just crap for real …
It’s fine.
I am finishing this project with elementor and will never touch it again. I will try bricks builder after that.
This is so awesome I’m having trouble with the Link_close_sub i edited the CSS ID to Link_close_sub_about for the about sub menu but when I click on the icon nothing happens I made sure that the IDs match with everything but it still doesn’t work
Are the ids unique?
@@websquadron yes the chevron icon I have it set as Link_close_sub_about and the plus icon as Link_close_all_about the plus icon works but the chevron icon doesn’t work.
@@websquadron I had a custom css in my custom code for a previous header I was working on I forgot about it I deleted it maybe that’s why it wasn’t working properly I’ll try it again. Thank you very much your channel really helps me out a lot 🤙🏾
Link_close_sub_ipad is not doing anything. Dont know why :(
Difficult to be sure without assessing
I had a similar issue, i noticed it was because I hadn't yet added in all containers mentioned in the code (I was testing as I built it). So it has an event listener for Link_open_ipad but I hadn't added that container in. So the code failed after that point as it was "listening" for something that wasn't there. As such the close icon didn't do as it should. Looking in chrome developer tools > Console pointed out the issue and helped me remedy it.
@@andy1luckman Hey andy, did you try to make the menu sticky to the top? For me it works with the Menubar, but when i tell the containers to be sticky aswell, it moves everything to the side in a weird way.
@@zerobambiro I have a container that the hamburger icon and logo are in. I made that sticky to mobile devices using the Elementor settings in Motion Effects. I then made each individual container for the mobile menu sticky also. Works for me ... although I am still to test on multiple devices. No strange movement to the side for me, might be margin / padding in how you have built your header.
For some reason I cannot get Link_close_sub_ipad to work. everything works just fine but oddly this doesn't any ideas?
Are you repeating the IDs?
@@websquadron I am using main and iPad. Close all work but for some strange reason close iPad doesn't