Example for more than two nav buttons

[yocontra]

There is no example for how to do more than a left and right set of nav buttons. What if I want two buttons on the right?

[soyjavi]

easy:

2012/10/17 Eric Schoffstall [email protected]

There is no example for how to do more than a left and right set of nav
buttons. What if I want two buttons on the right?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/6.

[alana314]

I hacked together a mod to support having two navs, stp-nav on the left and stp-nav2 on the right. It's not pretty but it works, let me know if anyone wants it.

[leiweke]

Hello Jordan, would be good if you can share the code, as i looking actually for this. Thanks Sebastian

[alana314]

So I've made a lot of changes to my code since I made this modification, but I will try and strip out the parts that I modified just for the second menu. It's ugly but it works:
In your markup, in your sidetap header after the h1, add a button to toggle the right menu:

<a href="javascript:void(0)" class="header-button menu2 right sidetapcss"><span>Menu2</span></a>

If you want the three line button instead of text add the "icon" class as well.
Also in the markup add the second nav after your stp-content div and call it stp-nav2:

 <div class="stp-nav2">
        <nav>
        <!--stuff here -->
       </nav>
</div>

I added this in my own css file. I modified a lot of the css classes since it was conflicting with bootstrap. Also I gave my right menu a grey background:

h1.sidetapcss {
  color: white;
  font-size: 20px;
  font-weight: bold;
  line-height: 42px;
  margin: 0;
}

a:hover.sidetapcss {
    color: white;
    text-decoration:none;
}

.stp-nav2 {
  background: #bbb;
  color: black;
  display: none;
  right: 0px;
  position: absolute;
  top: 0;
  width: 272px;
  z-index: 5;
}
.stp-nav2 a{
  color:black;
}

Somewhere in your js $(document).ready, add this:

$(".header-button.menu2").click(function(){
        st.toggle_nav2();
    });

in sidetap.css, add these classes. Note that for .sidetap.nav-showing I just added the .sidetap.nav2-showing selector, same with .stp-content-panel and .stp-nav2.panel (they already exist I just added more selectors):

sidetap.nav2-showing{
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.9);
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.9);
}
.sidetap.nav-showing .sidetap.nav2-showing .stp-overlay {
  display: block;
  z-index: 100;
}
.stp-content-panel,
.stp-nav-panel, .stp-nav2-panel {
  position: relative;
  height: 100%;
}
.ios .stp-nav2-panel {
  height: 100%;
  right: 0px;
  position: absolute;
  top: 0;
  width: 100%;
}
.showing-nav2 {
  -webkit-transform: translatex(-272px);
  -moz-transform: translatex(-272px);
  -webkit-animation-name: slidefornav2;
  -moz-animation-name: slidefornav2;
  -webkit-animation-timing-function: ease-out;
  -moz-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-duration: 175ms;
  -moz-animation-duration: 175ms;
  animation-duration: 175ms;
}
@-webkit-keyframes slidefornav2 {
  from {
    -webkit-transform: translatex(0px);
  }
  to {
    -webkit-transform: translatex(-272px);
  }
}
@-moz-keyframes slidefornav2 {
  from {
    -moz-transform: translatex(0px);
  }
  to {
    -moz-transform: translatex(-272px);
  }
}
.hide-nav2 {
  -webkit-transform: translatex(-272);
  -moz-transform: translatex(-272);
  -webkit-animation-name: slideovernav2;
  -moz-animation-name: slideovernav2;
  -webkit-animation-timing-function: ease-out;
  -moz-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-duration: 175ms;
  -moz-animation-duration: 175ms;
  animation-duration: 175ms;
}
@-webkit-keyframes slideovernav2 {
  from {
    -webkit-transform: translatex(-272px);
  }
  to {
    -webkit-transform: translatex(0px);
  }
}
@-moz-keyframes slideovernav2 {
  from {
    -moz-transform: translatex(-272px);
  }
  to {
    -moz-transform: translatex(0px);
  }
}

In sidetap.js:
in function SidetapStandard() add these lines, after their respective similar ones:

this.toggle_nav2 = __bind(this.toggle_nav2, this);
this.set_window_size2 = __bind(this.set_window_size2, this);
this.stp_nav2 = this.detect_primary_element("stp-nav2");

In SidetapStandard.prototype.set_up_observers, do the same:

this.set_window_size2();
$(window).resize(this.set_window_size2);

Add a new function set_window_size2:

SidetapStandard.prototype.set_window_size2 = function() {
    this.full_heights.css("minHeight", window.innerHeight);
    if (this.stp.hasClass("nav2-showing")) {
      return this.set_nav2_showing();
    } else {
      return this.set_nav2_hiding();
    }
  };

I modified the toggle_nav function, here is the complete function:

  SidetapStandard.prototype.toggle_nav = function(e) {
    if (e != null) {
      e.preventDefault();
    }
    this.stp_content.on("webkitAnimationEnd", this.nav_toggle_complete);
    this.stp_content.removeClass("showing-nav2").removeClass("hide-nav2");
    if (this.stp.hasClass("nav-showing")) {
      this.stp_content.removeClass("showing-nav").addClass("hide-nav");
      this.set_nav_hiding();
    } else {
      this.stp_nav.show();
      this.stp_content.removeClass("hide-nav").addClass("showing-nav");
      this.set_nav_showing();
    }
    this.stp.toggleClass("nav-showing");

    if (this.ios_5) {
      if (this.address_bar_showing) {
        this.set_window_size();
      }
      return window.scrollTo(0, 1);
    }
  };

Then added a new toggle_nav2 function:

  SidetapStandard.prototype.toggle_nav2 = function(e) {
    if (e != null) {
      e.preventDefault();
    }
    this.stp_content.removeClass('hide-bottompanel').removeClass('showing-bottom-panel');
    this.stp_content.on("webkitAnimationEnd", this.nav2_toggle_complete);
    this.stp_content.removeClass("showing-nav").removeClass("hide-nav");
    if (this.stp.hasClass("nav2-showing")) {
      this.stp_content.removeClass("showing-nav2").addClass("hide-nav2");
      this.set_nav2_hiding();
    } else {
      this.stp_nav2.show();
      this.stp_content.removeClass("hide-nav2").addClass("showing-nav2");
      this.set_nav2_showing();
    }
    this.stp.toggleClass("nav2-showing");

    if (this.ios_5) {
      if (this.address_bar_showing) {
        this.set_window_size2();
      }
      return window.scrollTo(0, 1);
    }
  };

Add a new nav2_toggle_complete function:

  SidetapStandard.prototype.nav2_toggle_complete = function() {
    this.stp_content.off("webkitAnimationEnd", this.nav2_toggle_complete);
    if (!this.stp_content.hasClass("showing-nav2")) {
      return this.stp_nav2.hide();
    }
  };

Add a new set_nav2_showing function:

 SidetapStandard.prototype.set_nav2_showing = function() {
    this.stp_nav2.css("maxHeight", "none");
    return this.stp_content.css("maxHeight", this.stp_nav2.height());
  };

Add a new set_nav2_hiding function:

  SidetapStandard.prototype.set_nav2_hiding = function() {
    this.stp_content.css("maxHeight", "none");
    return this.stp_nav2.css("maxHeight", this.stp_content.height());
  };

Then there's all the iOS stuff:
In function SidetapIos(), add this line:

this.set_window_size_4 = __bind(this.set_window_size_4, this);

I used set_window_size_4 and set_window_size3 since set_window_size_2 was already being used.
In SidetapIos.prototype.set_up_observers add these lines:

this.set_window_size3();
$(window).on("orientationchange", function(evt) {
      return _this.set_window_size3(evt);
    });

Add a new function set_window_size3:

SidetapIos.prototype.set_window_size3 = function() {
    this.address_bar_showing = false;
    $("body").css("paddingBottom", "5000px");
    window.scrollTo(0, 1);
    return setTimeout(this.set_window_size_4, 50);
  };

Add a new function set_window_size_4:

  SidetapIos.prototype.set_window_size_4 = function() {
    this.full_heights.css("minHeight", window.innerHeight);
    $("body").css("paddingBottom", "0");
    if (this.stp.hasClass("nav2-showing")) {
      return this.set_nav2_showing();
    } else {
      return this.set_nav2_hiding();
    }
  };

There's a lot of duplicate code stink here, I admit it would have probably been easier just to do this from scratch rather than modify sidetap so extensively.