CODEWITHSUNDEEP
ember.jsember-router
Adrien Coquio
Adrien Coquio

Reputation: 4930

How to make a one page menu in Ember?

I'm wondering how can I make a menu like in this website with Ember ?

The page is split in different sections and we can scroll to go to each section, a click on the menu make the page scroll to the wanted section.

I'm not sure if I should have different routes in the router for this behavior, I would guess it's not the case as when we change route the view is remove from the DOM.
Then, how should I build the anchor link to each section ?

The best solution will automatically updates route when we scroll the page but any solution to handle the link and URL recognition will be fine.

Upvotes: 5

Views: 993

Answers (2)

Arni Gudjonsson
Arni Gudjonsson

Reputation: 544

Try using a *: catch all pattern in the router on the page you want to handle this scenario.

so lets say that index will work as a single page that you have to be able to automatically scroll to certain elements from the url.

Also you have posts and about sub pages that you can go to from the index page via links.

then...

App.Router.map(function() {
  this.route('about');
  this.route('posts');
  this.route('index',{path:'*:'});

});

so if you have an element with id="elementToScrollTo" then the url /#elementToScrollTo would load the index page and scroll to that element.

See How to handle 'no route matched' in Ember.js and show 404 page? also for some other ways to solve this.

I hope this helps you.

Upvotes: 0

Corey Gwin
Corey Gwin

Reputation: 150

Some may argue otherwise, but Ember may be a little overkill for a website landing page like you've shown. Ember is meant more for robust web apps that have multiple views and data they need to be connected with.

First off, if you look at their script, they're using jQuery to animate the body's scrollTop position to the respective div and setting window.location.hash to the hash of the menu element's href which also happens to be the ID of the <section/> the body scrolls to:

$(document).on('click', '#nav a, .clients-capabilities a', function(){
    var target = $(this);
    var hash = this.hash;
    var destination = $(hash).offset().top;

    stopAnimatedScroll();

    $('#nav li').removeClass('on');
    target.parent().addClass('on');

     $('html, body').stop().animate({ 
        scrollTop: destination
    }, 400, function() { window.location.hash = hash; });
    return false;
});

Secondly, they are not doing anything special to load to a specific position on page load. If you load any page on the web with a hash, the browser will look for an element with that ID and load at that position. For example, http://emberjs.com/#download.

Even if you still want to use Ember for this, you'd probably end up doing something similar with a single view loaded from the / route so I wouldn't even worry about Ember until your site becomes a full fledged web app.

Upvotes: 1

Related Questions