Floaty Navbar

21 Responses

  1. Glenn Hitchcock Glenn Hitchcock

    I haven't posted in yonks; been busy with many projects. Here's an early shell concept of an app I'm working on. The idea is the navbar disappears off screen when scrolling.

    Photo is of Simon Frouws' stunning Artisans 'Cigar' Box. Got it for Christmas - well chuffed.

    12 months ago

  2. Andrea Cau Andrea Cau

    Really nice work Glenn!

    12 months ago

  3. Jonno Riekwel Jonno Riekwel

    Hahahaha great avatar & name of @Jack Bingham

    12 months ago

  4. Kyle Decker Kyle Decker

    Looks nice. What's the advantage of this over a standard, fixed navbar?

    12 months ago

  5. Rogie King Rogie King

    Haha, love Jacques.

    likes

    12 months ago

  6. Jack Bingham Jack Bingham

    Ah yes, my French cousin. He approves of the sexy tab bar too.

    likes

    12 months ago

  7. Dan Lebowitz Dan Lebowitz

    Yes. Very nice.

    12 months ago

  8. Glenn Hitchcock Glenn Hitchcock

    @Kyle Decker It's a bit different, helps show the content beneath and by not being the definitive bottom of the screen, removing it on scroll is less severe.

    12 months ago

  9. Jim Silverman Jim Silverman

    DAT NAV

    12 months ago

  10. Ari Ari

    Love the subtle details.

    12 months ago

  11. Alexander Zaytsev Alexander Zaytsev

    Looks super cool :-)

    12 months ago

  12. Aaron Sananes Aaron Sananes

    This is seriously amazing..

    12 months ago

  13. Kyle Decker Kyle Decker

    @Glenn Hitchcock Seems like it might lead to some frustrating unintended clicks, appearing and disappearing like that. I dunno, I just feel like the 'floating element' is Dribbble's new fetish.

    12 months ago

  14. Glenn Hitchcock Glenn Hitchcock

    @Kyle Decker As a concept, floating navigation has existed for a few years (Twittelator Neue). The hit area of this is essentially the same as a regular navigation bar. As for the interaction of it - see Pinterest and Piictu for a real world example. It works pretty well.

    There is no intent to emulate Facebook's chat heads or Foursquare's 'Add' here, nor adhere to any new trends that may be appearing.

    12 months ago

  15. Angel Jiménez Lopez Angel Jiménez Lopez

    Beautiful work.
    This is now a common practice on Android were both the nav bar and tap bar sometimes disappear is called "Quick Return" you can also see this behavior on iOS G+ App.

    likes

    12 months ago

  16. Leo Lin Leo Lin

    It was also implemented in Twittelator. Feels good.

    12 months ago

  17. Joshua Hibbert Joshua Hibbert

    Have you thought about having the content width match that of the nav bar?

    12 months ago

  18. Glenn Hitchcock Glenn Hitchcock

    @Joshua Hibbert Yep! Two reasons I went for a wider navbar:

    A) It felt a bit too roomy when 600px width with the padding being 20px all the way around.

    B) By having it be larger than the content containers in the background, it looks raised above them and clearly stands out, avoiding confusion that it's part of the same layer.

    12 months ago

  19. Joshua Hibbert Joshua Hibbert

    @Glenn Hitchcock How about balancing it a little more then? It just seems a little odd currently. Maybe if you had the nav bar terminating exactly in the middle of the padding?

    likes

    12 months ago

  20. Maxwell Barvian Maxwell Barvian

    This is great work man! Keep it up.

    12 months ago

  21. Glenn Hitchcock Glenn Hitchcock

    @Joshua Hibbert Good idea - worth looking at.

    likes

    12 months ago

keyboard shortcuts: previous shot next shot L or F like