3

Let's get the fiddles out of the way first (built on the Foundation responsive framework):

Fiddle 1: one nav element, but becomes unfixed when side nav slides out

Fiddle 2: working but with multiple nav elments

Okay so, I have been racking my brain trying to develop and elegant solution for the following:

1) Make a responsive, fixed navigation that switches from stretching across the top to sliding out of the side on smaller screen sizes (ala the Facebook app)

2) I'd like to use the same DOM element for the navigation, rather than have two separate but identical elements

I was able to accomplish this using CSS translations, except for the fact that translations remove the fixed property of the nav (see fiddle 1).

The Fiddle 1 solution uses CSS translations like so:

-webkit-transform: translate3d(250px, 0, 0);
-moz-transform: translate3d(250px, 0, 0);
-o-transform: translate3d(250px, 0, 0);
transform: translate3d(250px, 0, 0);

While Fiddle 2 acts on the left and right margins of the content:

margin-right: -250px;
margin-left: 250px;

I'd like to somehow find a way to use just one DOM element for both elegance and so nav-related plugins will still work (like scrollspy)

dougmacklin
  • 2,560
  • 10
  • 42
  • 69

2 Answers2

2

One solution would be to give page position:absolute and change the left positioning instead transforming it.

.page {
    transition:.3s ease-in-out;
    position:absolute;
    left:0px;
    top:0px;
}    
.page.navigating {
    left:250px;
}
.page.navigating .top-bar .top-bar-section {
    left:0px;
}

Demo here

EDIT

To make the nave be horizontal on small screen, you'll need to use @media queries. Something like this approximates the result you want

@media all and (max-width: 310px) {
  .left li {
      display:inline-block;
  }
  .left li a {
  }
  section.top-bar-section {
      width:auto;
  }
  .left li:nth-child(odd) {
      display:none;
  }
  .left li:nth-child(even) a {
      display:inline-block;
      width:auto;
      padding:5px;
      font-size: 50%;
      background:black;
  }
  .page.navigating .top-bar .top-bar-section {
      left:40px;
  }
  .page.navigating {
      left:0px;
  }
  .name h1 {
      float:right;
      font-size:50%;
  }
}

Updated Demo

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
  • sorry for the delay, i'd given up hope after a week of no answers. i think this is a step in the right direction but a more thorough answer would be useful. for example, if I open a small window with the off canvas nav and then widen it, the two menu items do not appear in the top bar – dougmacklin Oct 01 '13 at 05:43
  • @DougieBear I updated my answer to show you add an approximate version of what you're looking for – Zach Saucier Oct 01 '13 at 13:24
1

I would suggest moving the element, outside of the div#page. That way any styling you put on the page won't affect it (including the translations), and you are free to style your nav list as needed.

http://jsfiddle.net/mKAtM/3/

This was just a quick test, i've moved the nav out of the div as suggested and added styles along the lines of: 

.top-bar {
    z-index:1000;
}
.top-bar.expanded{
    -webkit-transform: translate3d(250px, 0, 0);
    -moz-transform: translate3d(250px, 0, 0);
    -o-transform: translate3d(250px, 0, 0);
    transform: translate3d(250px, 0, 0);
    overflow:visible;
}

(Think the overflow:visible is a different issue)

Obviously you need to add your transitions etc. and the translates should be in a class, but hope this is a step in the right direction

EDIT

updated fiddle to fix animation: http://jsfiddle.net/mKAtM/8/

css needs some tidying up, much easier to with your less/scss if you are using

Alex Faunt
  • 529
  • 4
  • 6
  • i'm also open to this way of going about it, seems possibly cleaner. could you fix the fiddle so that the transitions work properly (page content slides out to reveal off canvas nav under it)? I'm also experiencing the same issue I listed with the solution above – dougmacklin Oct 01 '13 at 05:44
  • I'll update the fiddle shortly. Personally I prefer this method as seems a cleaner separation. But the main advantage is using translations rather than absolute positioning - this means that it is hardware accelerated and will be smooth on all devices, which is not true of absolute positioning. – Alex Faunt Oct 04 '13 at 10:23
  • please do update it, I'm happy to switch the selected answer. I also prefer this way that the off canvas nav pops out to reveal the tabs below it, rather than having the tabs slide out from the side – dougmacklin Oct 04 '13 at 16:14
  • Added a simple slide animation - fiddle in answer – Alex Faunt Oct 06 '13 at 20:38