A clickable drop-up menu

Question

I have the following clickable navigation menu at the top of my site:

jsFiddle

The code is also available in this code snippet:

$("nav td a").click(function(e) {
  if ($(this).parent().hasClass('selected')) {
    $("nav .selected div div").slideUp(200);
    $("nav .selected").removeClass("selected");
    //alert("HERE!");
  } else {
    $("nav .selected div div").slideUp(200);
    $("nav .selected").removeClass("selected");
    //alert("NO HERE");
    if ($(this).next(".subs").length) {
      $(this).parent().addClass("selected");
      $(this).next(".subs").children().slideDown(200);
    }
  }
  e.stopPropagation();
});

$("body").click(function() {
  $("nav .selected div div").slideUp(200);
  $("nav .selected").removeClass("selected");
});

nav {
  background: #f0f7fa;
  color: #85a0ad;
  margin: 40px -38px 0 -38px;
  padding: 10px 38px;
}
nav table {
  border-collapse: collapse;
  width: 100%;
}
nav td {
  padding: 0;
  position: relative;
}
nav > td > a {
  display: block;
  color: #f0f7fa;
  position: relative;
  text-decoration: none;
}
nav > td.selected > a {
  z-index: 2;
}
nav td div {
  position: relative;
}
nav li div {
  position: relative;
}
nav td div div {
  background-color: #f0f0f0;
  padding: 12px 0;
  display: none;
  font-size: 0.95em;
  margin: 0;
  position: absolute;
  top: -1px;
  z-index: 1;
  width: 190px;
}
nav td div div.wrp2 {
  width: 380px;
}
nav .sep {
  left: 190px;
  border-left: 1px solid #044a4b;
  bottom: 0;
  height: auto;
  margin: 15px 0;
  position: absolute;
  top: 0;
  width: 1px;
}
nav td div ul {
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  width: 170px;
  float: left;
  list-style-type: none;
}
nav td div ul li {
  margin: 0;
  padding: 0;
}
nav td ul ul {
  padding: 0 0 8px;
}
nav td ul ul li {
  margin: 0;
  padding: 0;
}
nav td ul ul li a {
  color: #044a4b;
  display: block;
  margin-bottom: 1px;
  padding: 3px 5px;
  text-decoration: none;
  font-size: 1.1em;
}
nav td ul ul li a:hover {
  background-color: #85a0ad;
  color: #fff;
}
nav td.gap {
  width: 33%;
}
nav.top {
  margin-top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="top">
  <table>
    <tr>
      <td>&#x25BE;&nbsp;<a href="#" class="clicker">Lectures</a>
        <div class="subs">
          <div class="wrp2">
            <ul class="navul">
              <li>
                <h4>Intros</h4>
                <ul>
                  <li><a class=lecture href="lecture00.html">Introduction</a>
                  </li>
                </ul>
              </li>
              <li>
                <h4>Graph<span class="full-nav">&nbsp;Theory</span></h4>
                <ul>
                  <li><a class=lecture href="lecture01.html">Euler Circuits</a>
                  </li>
                  <li><a class=lecture href="lecture02.html">Beyond Euler Circuits</a>
                  </li>
                  <li><a class=lecture href="lecture03.html">Hamiltonian Circuits</a>
                  </li>
                  <li><a class=lecture href="lecture04.html">Travelling Salesmen</a>
                  </li>
                  <li><a class=lecture href="lecture05.html">Minimum Cost&mdash;Spanning Trees</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <td class="gap">&nbsp;
          <td>&equiv;&nbsp;<a href="#">Course<span class="full-nav">&nbsp;Info</span></a>
    </tr>
  </table>
</nav>

I would like to also put the same menu on the bottom of the page, with the clickable menu opening upward instead of downward. I have seen this post, but it is about a menu that opens upon hovering, whereas mine opens with a click. I am confused about several things:

1. Where should I be putting the "position: absolute; bottom: 100%" in the CSS?
2. How should I change the slideUp / slideDown calls when the menu opens upwards?
3. How can I prevent one menu from interfering with the other? [What I mean is that in my early attempts, clicking the bottom menu would immediately close itself because the jQuery code was doing a slideUp then slideDown, but perhaps it is not an issue.]

Answer 1

See fiddle here: http://jsfiddle.net/h5fjwju6/

Just update your CSS a bit, to have a .top class setup and .bottom class setup. No changes to any of your jQuery!...

Updates to HTML:

<!-- Just add another nav with class bottom, below your current top nav -->

<nav class="bottom">
   <table>
     <tr>
       ...

Updates to CSS:

nav {
   background: #f0f7fa;
   color: #85a0ad;
   margin: 40px -38px 0 -38px;
   padding: 10px 38px;
   position:fixed;     // <-- added this
}

nav td div div {
   background-color: #f0f0f0;
   padding: 12px 0;
   display: none;
   font-size: 0.95em;
   margin: 0;
   position: absolute;
   //top: -1px;              <-- removed this
   z-index: 1;
   width: 190px;
}
nav.top {                 // <-- added this   
   top: 1px;              
}
nav.top td div div  {     // <-- added this
   top: 1px;             
}
nav.bottom {              // <-- added this 
   bottom: 0px;           
}  
nav.bottom td div div {   // <-- added this   
   bottom: 25px;   
}    

Answer 2

Try adding the span tag at the icon

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="top">
  <table>
    <tr>
        <td><span class="icon">&#x25BE;</span>&nbsp;<a href="#" class="clicker">Lectures</a>
        <div class="subs">......

Add this CSS:

td.selected span.icon{
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    display:inline-block;
}

check out this