Have your header separate from the actual body of your website, and add that "volcano" effect depending on the current route. Is there something more specific you need help with?
[https://codepen.io/cranberriez/pen/wvQOVyO](https://codepen.io/cranberriez/pen/wvQOVyO)
This should have both the tabbing without scrolling and the rounded corners. It's a basic way to do it since I haven't done it before. It uses the ::after and ::before to position a rounded box over the edges of the tabs to give the rounded effect.
Also uses javascript to 'tab' between the different pages by showing and hiding them accordingly.
Create a header with a nav, have a class to identify which button is active, apply that class based on the current route, style the class to add have the same menu item BG as the page to make them blend
This is a clean idea, but if you plan to have this app load on multiple devices, it will be very restrictive to not have scrolling. I would only recommend doing something like this for a small art/passion/personal project and I would avoid the idea if you are planning to release this site to the general public as it goes against user's expectations. Users expect your site to scroll, it is a deeply engrained behavior. In addition, the content within each tab will be limited to the screen size of the device, unless you only show the amount of content that can be displayed on mobile.
That being said, here is an example of how this can be achieved -> [https://jsfiddle.net/q69v2rgL/19/](https://jsfiddle.net/b3gcfpnt/3/)
That does not mean you need to scrap this idea. You can still have this work for desktop/tablets and do something different for mobile. CSS media queries allow you to have different designs for different screen sizes. Literally anything you come up with is achievable with a little elbow grease.
This looks like simple tabs: https://www.w3schools.com/w3css/w3css_tabulators.asp
love this sub thanks!
Exactly what I was coming to say, well done.
Do you just want a menu? You can do this very easily with a css large menu layout.
Have your header separate from the actual body of your website, and add that "volcano" effect depending on the current route. Is there something more specific you need help with?
[https://codepen.io/cranberriez/pen/wvQOVyO](https://codepen.io/cranberriez/pen/wvQOVyO) This should have both the tabbing without scrolling and the rounded corners. It's a basic way to do it since I haven't done it before. It uses the ::after and ::before to position a rounded box over the edges of the tabs to give the rounded effect. Also uses javascript to 'tab' between the different pages by showing and hiding them accordingly.
Create a header with a nav, have a class to identify which button is active, apply that class based on the current route, style the class to add have the same menu item BG as the page to make them blend
š
This is a clean idea, but if you plan to have this app load on multiple devices, it will be very restrictive to not have scrolling. I would only recommend doing something like this for a small art/passion/personal project and I would avoid the idea if you are planning to release this site to the general public as it goes against user's expectations. Users expect your site to scroll, it is a deeply engrained behavior. In addition, the content within each tab will be limited to the screen size of the device, unless you only show the amount of content that can be displayed on mobile. That being said, here is an example of how this can be achieved -> [https://jsfiddle.net/q69v2rgL/19/](https://jsfiddle.net/b3gcfpnt/3/)
Dam I guess I gotta scrap this idea, completely forgotten the part where the site should be seen on all devices.
That does not mean you need to scrap this idea. You can still have this work for desktop/tablets and do something different for mobile. CSS media queries allow you to have different designs for different screen sizes. Literally anything you come up with is achievable with a little elbow grease.
https://codepen.io/arjunamgain/pen/YXBeLJ You can find dozens of mega menu examples online
Maybe you can achive that with tabs? https://www.w3schools.com/howto/howto\_js\_tabs.asp
This is commonly called mega menu / nav. Searching that should come up with a few designs and how to code.
I love that functionality we were designing in 2005 is still being implemented today. ā¦Iām being serious, not snarky, btw
Hi, are you planning to DIY or do you have a budget?
Is this for e-commerce store?