Denis L.
|
Hi,
I would like to build a one page Joomla website template with a fixed top menu like this web site: http://denistalbot.com
The way I suppose it works is that you add anchors to different sections of the page and assign the menu items to those anchors?
So my questions are:
1- How do you fix the top menu?
2- How to set the anchors in the "article" sections and assign menu items to them?
3- And how to switch the menu items to active mode (like selected) when the page has scrolled to the anchor?
Thanks in advance for your help and if someone could provide some examples and the way to code this, it would be of great appreciation. :)
Denis.
|
|
Denis L.
|
Hi Michel,
Thanks for your answer, it helps a lot! :)
Just one thing though... I'm not to familiar with the JQuery part to make the menu item switch to a:active state when the page has scrolled down to the anchor and without reloading the page.
Could you please show me an example and also in which template files the different codes go?
That would be very kind of yourself.
|
|
Michel K
|
Hi Denis,
First, use Google Chrome to inspect a page.
Next, in Chrome:
Take a look at:
http://ironsummitmedia.github.io/startbootstrap-freelancer/
If you click with right mouse button on a menu item, you see in the drop down menu "Inspect Element"
Click on Inspect Element.
Your browser screen will spit. (front-end and source code)
In the source code screen, you see a highlighted rule. This the is menu item you want to inspect.
If you expand all the gray arrows, you see a class named 'page-scroll'
In front end, when pressing a menu item, you see in the attribute active to appear in the source code.
So, this class page-scroll is connected to a JQuery function.
This JQuery function can be found in bootstrap.min.js
When you click a menu item, JQuery sets the class to active, css knows when the class is set to active, do something. (change color)
To explain how JQuery is working, and also, to combine this with a Artisteer template..... Hmmm... I think it is way easier to buy some One Page theme from lets say, Joomlart...
With HTTrack you can easily download all used elements of a web page. When done, you can learn how things works using notepad++.
|
|
JSD SMOOTH SCROLLER did not work
|
Hi Elliott
This script // JSD SMOOTH SCROLLER when added to script.js does not work:
Menu Link: # grid1
Link CSS Style: menusmooth
I tried with another library js "smoothscroll.js" for
Menu Link: # grid1
Link CSS Style: smoothScroll
And it works properly and that you provided does not .So there is something wrong could it be improved?
link http://cymeria1.linuxpl.info/onepage/
google translate......
|
|
DGL
|
Does anybody know how Artisteer's new website is using a sticky menu and scrolling content?
|
|
Michael Trabjerg
|
Quote Adam :
Elliott sorry I forgot all about to change
//JSD SMOOTH SCROLLER
jQuery(function() {
jQuery('#menusmooth a').click(function(){
on :
//JSD SMOOTH SCROLLER
jQuery(function() {
jQuery('#headdemo a').click(function(){
Hi
Did it work?
Do you have an example?
Thanks
Br
Michael
|
|
roberto
|
hi Elliot
i just did what you posted..
but cannot find the positions declared in the template under the front end only comes in custom positions: position-0m position1 and so..
|
|
PCMShaper
|
You may like this free onepage Joomla 3 template - https://www.pcmshaper.com/joomla-templates/acrostia
|
|
Lars Nielsen
|
Hi.
Any news on this? Im looking for this aswell.
Regards, Lars
|
|
OliverSmilingGuy
|
Guys, I can't make a final decision. Is Joomla really that good for making user-friendly websites? I've recently discovered a brilliant article on this issue https://www.templatemonster.com/blog/wix-vs-joomla-what-is-better-for-you/ , but I still need some recommendations from Joomla users.
Thanks!
|
|