2

I want to make a single-page template from scratch, but I don't really know where to start. I'm using Joomla 3.x, so my approach should be bootstrap compatible.

I guess that since the menu buttons make the page scroll, it makes sense to use modules for every menu item. But then I wonder how I can get the scrolling and anchors to work properly.

Could someone point me in the right direction?

  • If it's a single page, are you sure Joomla is the right choice for you? – Lodder Apr 21 '15 at 6:59
  • Could you perhaps clarify what you mean by "single-page" template, do you want all your articles / contents on one page? – Epodax Apr 21 '15 at 8:30
  • @Lodder: I was kind of asking myself the same thing. I want to offer some dev tools for Joomla, and I wouldn't feel okay saying Joomla is great and then using something else. Besides, I already know how to tweak Joomla to my liking, and this would only be my landing page. The other pages would follow a more traditional approach. – mattosmat Apr 21 '15 at 13:01
  • @RasmusBoie: I mean to have my page scroll when I click on a menu item, instead of redirecting to a different page. The point is that I don't want to hard-code this, but I'd rather have it working for any menu and content that I choose from within Jooma. – mattosmat Apr 21 '15 at 14:00
2

You are on the right track.

Menu items

Create all menu items as System Links > External URL and set link as #section-[MODULE_ID_HERE].

For example your menu links should look like this

<a href="#section-[MODULE_ID_HERE]">First section</a>

Modules

I would create new chrome for modules, so they would all have unique ID attribute. For example with module ID or alias. Then you can link to them.

Joomla! docs for module chromes.

Module wrapper div should look like this.

<div id="#section-<?php echo $module->id; ?>">
    <!-- Module content here -->
</div>

section- prefix is just for example, you don't have to use this.

Scrolling

I found a short example. This prevents regular event on clicking link and animates browser to right section.

/**
 * @author Paul Underwood
 * @source http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery
 */

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.