Have you ever seen one of those fancy navigation menus that smoothly scrolls down the page when you click a link? Or that instantly jumps down the page to another section?
I bet you asked yourself “How did they do that?”
Well, we have the answer, let’s take at look how you can implement it quickly on your web pages.
In today’s OptimizePress university post, we are going to guide you through creating a scrolling and instant jumping navigation menu.
The benefits of this scrolling menu are:
- A better user experience – by providing clear links to relevant content it’s easy for the user to navigate the page.
- Fast loading content – because the content is on one page it appears instantly after clicking a link.
Some companies use these styles of pages for the entire website. There are times when I’ve visited a site and assumed I was navigating different pages before I realised I was on one page.
After following this tutorial, you will be able to add the scrolling styles menus to any of your existing landing pages.
Here is what you will learn in this blog post:
- How to build a smooth scrolling menu
- How to build an instant jumping menu
Let’s get started.
What You Need
Believe it or not, everything you need is already inside OptimizePress. Here is what you need and how to get it.
- The link URL – This tells the clickable link where it should go.
- The anchor link – The point on the page where the scroll effects stop.
Here’s where you get all the code.
Firstly create a new page and choose the Long Form Landing Page. If you do not see this template, ensure you are using the latest version of OptimizePress and check the members area where you can download it in the Downloads > Extra Downloads section.
Next edit this arrow button show here:
Grab the link URL #section2 (don’t worry that it says number 2 you can easily change this later).
Next you need to grab this piece of code:
To do that simply edit the row:
Copy the the HTML <a id=”section2″></a> as shown below.
That’s it! DONE!
Save all the code into a text file, Evernote or somewhere you can easily access it later.
You now have all the HTML links and scripts you need to start building your scrolling menu on any other landing pages and sale pages.
Smooth Scrolling Menu & Jump Menu Video Tutorial
Watch this video and learn how we built the smooth scrolling and jumping menus.
[video_player type=”youtube” youtube_remove_logo=”Y” youtube_force_hd=”hd720″ width=”630″ height=”354″ align=”center” margin_top=”0″ margin_bottom=”20″]aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj1RQmI4ZzdkS0lSRQ==[/video_player]
How To Build The Smooth Scrolling Menu
First we added a 4 column row:
Now we are going to create the navigation links or menu.
To do this, I added in the Headline element, added my headline text Section 1 and made the text a link.
The text link URL is the same code from earlier #section1 – Section 1 is where I want my page to scroll to (notice I changed it from #section2 to #section1).
Once I had created the first heading (Section 1), I created three more text links to make my navigation (Section 2, Section 3, Section 4).
I’m only using the word Section for example purposes. Yours would be something like About Us, Contact, Location or whatever section you included on your marketing page.
Again my navigation menu is for this tutorial; you would style yours any way you wanted.
Next I copied the anchor code <a id=”section2″></a> and pasted the same piece of code into each row where I wanted my links to scroll to.
A brief linking explanation if you are a little confused.
The links we made in our navigation menu scroll down to each section on the page.
- The Link URL #section1 goes to <a id=”section1″></a>
- The Link URL #section2 goes to <a id=”section2″></a>
- The Link URL #section3 goes to <a id=”section3″></a>
- The Link URL #section4 goes to <a id=”section4″></a>
If you created your link URLs and section names it may look like this:
- The Link URL #aboutus goes to <a id=”aboutus”></a>
- The Link URL #contact goes to <a id=”contact”></a>
- The Link URL #location goes to <a id=”location”></a>
- The Link URL #workshop goes to <a id=”workshop”></a>
OK …Let’s continue.
So the first row I edited became <a id=”section1″></a> the second row <a id=”section2″></a> and so on.
To do this, I edited each row, pasted the code into the Code before row field. Remember this is the same place we copied the code from earlier. This is how it looked for section two:
Here’s how my page looked (in LiveEditor mode) after I added the anchor code for each row, this example only shows the first three section links:
If you are using the Long Form Landing Page, you wouldn’t need to do this step as the code already exists.
Only do this if you have created a NEW page.
If you followed all the steps above you will have a nice smooth scrolling menu on your pages. If you are stuck with anything, watch the video above for more details.
How To Build The Instant Jumping Scrolling Menu
To see the jump menu on action skip to 7:15 in the video above.
If you followed the tutorial above and built your smooth scrolling menu you will find this nice and easy.
Secondly follow steps 1-3 for How To Build The Smooth Scrolling Menu then return here.
Next you will need to add the anchor code into each row where you want the link to jump to.
Now rather than using <a id=”section1″></a> in our Code before row field we are going to use:
Notice the text name and NOT id is being used.
Once you have done each row your page should look like this in the LiveEditor view:
And hey presto you have yourself a simple jumping style navigation menu!
You might want to use this style of navigation alongside your logo. To do that simply create a new row that allows room for a logo like this layout:
Add your links as we done above and add the image element for your logo so it would look like this:
You could also make a sticky navigation with the code from our CSS hacks post.
There you have it, two different navigation styles you can include on your OptimizePress pages.
Have fun with this and look out for this months teardown video.
[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#F3F3F3″ bg_color_end=”” border_color=”#CBD2D6″ border_weight=”1″ border_radius=”” border_style=”dotted” ]
Tell Us What You Think – Please Comment Below!
As always we love to hear your comments or questions. Would you like to see more of these shorter OptimizePress tips?