Hiding Navigation on scroll

Hi guys,

currently am working on a very raw and basic file which will finally be my all-time template and testing file of almanac.

https://dl.dropboxusercontent.com/u/8231701/cdn-screencasts/theProject/index.html

There I got a “hide on scroll fixed navigation” where I’m pretty unsure if this is really a good idea doing or not. I mean it’s sexy elegant to have it off-the-view but on the other hand it might be a clumsy UX. On the other hand - if it wouldn’t be a fixed navigation - you’d have to scroll back, too. A lil bit unsure here and I would love to see your thoughts.

Cheers

Thomas

https://dl.dropboxusercontent.com/u/8231701/cdn-screencasts/theProject/index.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Nice site!!!

I like this type of navigation a lot, especially for mobile devices in landscape view it is very useful! So I would leave it static for bigger screens and than change it’s behaviour.

I just wanted to search the forum for a possible way of achieving that.
So would you share your knowledge about the construction?

So far I’ve got a fixed (inline)navigation like in your screencast.

Cheers,

Chris


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Thomas, have you ever seen this script: Hide your header on scroll - Headroom.js? It might or might not be something useful for you, but I wanted to show it to you anyway :slight_smile:

Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hi guys,

thanks for your comments.

@Rich

It is exactly this script in use :-). Perhaps a bit hard to investigate cause all is concatenated in one file via CodeKit - but there, starting on line 4274 or so.

@Chris

I assume you mean the Sliding in Menu for mobile?

Basically I would like to share things like those, but I’m not entirely happy with the result. There is something, that doesn’t work as in the original script and I haven’t found out yet what. The mobile menu is Sidr, and attracted me the most cause it has some cool features.

The setup in Freeway isn’t very hard. The item that appears on a certain breakpoint (toggle menu) is constructed directly in Freeway and set to display:none before the breakpoints and set to visible (block) on the breakpoint using inspector. The regular nav is vice versa.

The “Toggle Menu” is a simple link with the external target #sidr-main and identified by the name/value pair id/responsive-menu-button via extended in the hyperlink dialogue.

So the script part looks like this:

/***************** Sidr ******************/

$('#responsive-menu-button').sidr({
    name: 'sidr-main',
    source: '#object-desktopNav',
    body:'#PageDiv'
});

Kind of basic setup following the Responsive Menus documentation on scripts page.

As said: No warranty at all - cause it’s not JustWork™.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Thanks… Got most done except the 3 tiny bars for site page clicks in narrow widths. Keeping them means 2 actions are needed to go to a different page. It is preferable to see the page names to navigate the site. Current spacing between the page names can be reduced. I searched the template without finding how to alter these items.

ONLINEfor the Shevelea page I find difference results in FF and Safari AFTER FTP upload
in Safari is shows a blue scroll bar alongside the entire text on the . In FireFox it is NOT there; and it’s not there in the saved FWPro file.

Also online FF shows intermittent black segments at some widths They do not exist in the actual file. These may be querks of browsers?
Not sure what to to to alter these items
Ann


freewaytalk mailing list
email@hidden
Update your subscriptions at:

apologies. wrong thread


freewaytalk mailing list
email@hidden
Update your subscriptions at: