Menu working on a one page mobile version?

Is it possible or even useful to make a (dropdown) menu for a onepage mobile version website? or what’s the best way to give the user access to the different sections of a onepage website, aka making the navigation make sense? does it work with those scroll points? i noticed them but never really could work them into a design “properly”…
Hope my question is understandable- and somebody can point me the way.

thank you in advance :slight_smile:

Hello.

Well, it depends on the personal taste of the creator. Both is possible.

If the page is not excessively long, I would do without navigation. However, if there are several chapters or sections (in this one single page), you can make a menu by using the scroll locations.

Mr. F.

thank you for your reply, fozzie!
can you maybe redirect me somewhere where I can learn how to implement them functionally? documentation I’ve already read, but it doesn’t seem to be enough for me to understand them…

Hi.

Check out this video:

It has all kinds of menus and scroll location.

Mr. F.

1 Like

thankyouthankyouthankyou! you are a life saver. I tried youtube but couldn’t find the right Duncan video

Here’s a sample of a menu on a one page site built in Sparkle.

1 Like

@Fozzie watched the video that you posted now, but it says nothing about those scroll location thingies and how to use them… or did I miss it?

I am specifically wondering if i can link those to the menu items- say if I click on about me does it scroll to that part of the onepage site? i don’t see an option for that in the “when click go to”… because that’s what I’m trying to achieve.
My one pager is sadly too long to simply scroll through and needs more structure helper points.

sorry if the english terms are not 100pr correct, my sparkle is in german.

Near 10 min 40 sec Duncan uses a scroll location named “anchor1”.

You should see the horizontal line he is moving downwards.
The menu item is linked to the same page and instead of “top of the page” to “anchor1”.

Mr. F.

aaah! ok thank you now i see it. i was excepting it to be an extra item. and it really works the way i wanted it to too :slight_smile:
thank you!

Just FYI … after a testing/review period, my client went with a simple set of ‘buttons’ for navigation of a fairly long one-pager: josephgoldmusic.com.

We decided that it was not desirable to switch navigation modes when going from desktop to mobile — it not also changed the look-and-feel of the header/hero area, but also a ‘burger’-style menu of course requires twice the taps! :point_up_2:t2: :point_up_2:t2:

We also decided to trim the number of anchors/scroll locations to three, effectively splitting the page into more-easily scrollable, generic sub-sections (work, bio, contact).

Note that there is no ‘home’ (top-of-page) navigation, as you will have already ‘been there, done that’ by merely visiting the website. Want to see it again? Your thumb knows how (thanks to velocity-sensitive scrolling). :+1:t2:

Note that positioning the scroll locations/anchors can be tricky, as you have to allow for any content that is glued to the top of your page (the anchor will need to be positioned higher than the destination to allow for that). Also, it’s helpful to get used to using the tab key to show and hide overlays (of which the ‘scroll location’ is one), and keep a Preview window open, to check positioning live as you edit.

I hope something here is useful!

1 Like