Streaming live at 10am (PST)

Smooth navbar navigation


#1

Dear Webflow Pioneers

hi

How can I have the navbar remain static when clicking different menu items?

Right now I have 3 items (Publications / About / Contact) in different pages. When I click each one, the entire site loads again. I would like to have the navbar fixed, and only the content load beneath it.

Tried having all these items on one page as sections, and use interactions to show/hide each section, which solves the problem, but then I don't know how to link the button to each section, so it's highlighted correctly when clicked.

See this link and navigate between Publications / About / Contact

I would prefer having the content swipe horizontally from the left in a nice slide effect, but this is optional.

Thank You very much!


How to get AJAX-style nav
#2

Hello @rotem

I suggest using the tab widget to get the effect you're going for: http://help.webflow.com/lesson/tab-trigger-interaction

You can setup all the tabs and tab panes on one page so that you don't have to reload the page on each click. And you can set the "Active" state for the tabs. The tutorial above is very helpful for this.

Please let me know if you have any other questions. smile

Thank you,

Waldo


#3

Hi There,

You could also use Animsition to pull off the faux ajax effect. I've put together a demo of this below. Something I had already been playing around with but seems like it would do exactly what you need... Noteworthy stuff:

General Structure:
You'll need a "wrapper" for all content under the header... This is because you want the header to "stay the same" or look as if it isn't being reloaded on the new page. I've just used a free template for the demo - you'll notice the structure in the nav.

So your "wrapper" will have a special class called "animsition" on it, and all your links should have a class of "animsition-link" on them...

Preloader/Loading Screen:
There is a blank page in the demo where you can fully customize the look of the preloader screen. I've just left it white & used a gif image but this can be anything you want...

Scripts:
Check the scripts on the "custom code" page of the demo within the dashboard settings... Make sure they are copied over to your site in the same manner (css in Head Code section, jquery scripts in the Footer Code section)... This is also where you'll adjust & play around with the in & out classes (animations). The plugin link has all of these outlined on the homepage...

Animsition + Webflow Demo


#4

Thank You smile

looks like it's just what I've bben looking for.

1 question - would it be possible to somehow define or nest these tabs in my existing navbar, or would I have to recreate it from scratch?

Would be great to have the ease of use of the Navbar tool, with the tab functionality, does that make sense?

In other words, could the tabs be separate from the content body?


#5

hi again

regarding the Tabs, it solved the page loading problem, but I'm not sure how to link each tab to reach it from another page.

What I want to achieve is fairly simple, homepage with 3 links (publications / about / contact), when clicking each of them, a new page is loaded. when inside each of those, the user can navigate between them smoothly, without reloading the page.

What I’m trying to do is prevent the extra click a user would have to make if there is no direct link to each tab.

I haven’t republished the site, so now each category is in a separate page. I did however successfully recreated the navbar using tabs in the designer.

My basic general question here, is can one define a specific page area, tab or section, as a direct link I can send the user to.

Is it possible to have a page with 3 section, and a fixed navbar, which, when scrolling, the ‘current’ state changes from category to category, this would also solve all my navigation problems.

Thanks a bunch smile


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.