A clickable drop-up menu

Question

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

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:

Where should I be putting the "position: absolute; bottom: 100%" in the CSS?
How should I change the slideUp / slideDown calls when the menu opens upwards?
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.]

This code is not easy portable to using at the bottom. I strongly recommend, that you avoid the table and build a menu with `
`s. This would be better portable, too — Fuzzyma, Jan 30 '15 at 21:15
@Fuzzyma: what makes the table that much more difficult to deal with? I have successfully gotten this to work on the bottom using a menu that opens on hover, as detailed in the linked question. I cannot get it to work with this particular menu and a click-to-open. — Steve D, Jan 30 '15 at 21:26
Please add the code to the hover-version then. Changing it to click shouldnt be a big deal. However dealing with tables is always creepy. Tablecells behave different than normal elements when it comes to positioning and thats why its difficult to deal with — Fuzzyma, Jan 30 '15 at 21:29
@Fuzzyma: after messing around a bit with this, I think you are right that the table is making things difficult. I used the table because I like having a space between menu items: how can that be achieved with a div and ul? — Steve D, Jan 30 '15 at 21:52
You can add margin and padding (even height and width) to lists as well. In your case you would use a `
` for the sliding box and you could use nested lists for the Menu and Submenu (or just plain lists) — Fuzzyma, Jan 30 '15 at 21:59
Removed my previous fiddle....Added a new fully working fiddle...see now... — prograhammer, Jan 30 '15 at 22:14
Oh I forgot you wanted both on same page....updated fiddle and answer again...works great! (and you don't have to change your script logic...it will handle both!) — prograhammer, Jan 30 '15 at 22:52
LOL! One last update to my answer and fiddle. Now it's perfect! All you needed was a small update to your CSS. See my answer... — prograhammer, Jan 30 '15 at 23:06
@davidgraham: sorry away from my computer until tomorrow morning. Will check you update and let you know as soon as I can. Thank you much for the effort so far! — Steve D, Feb 01 '15 at 00:32

prograhammer · Accepted Answer · 2015-01-30T23:56:25.930

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;   
}

I just wanted to let you know that this works perfectly! I had to tweak the bottom separation to get what I want, but your updates definitely did the trick. One question though: I actually forgot to put in the `position: fixed` in at first, and it still worked great. What exactly does that `position: fixed` do? Again, many thanks! — Steve D, Feb 01 '15 at 20:40
Welcome! Position:fixed keeps the menu at the top or bottom of the screen, even as you scroll a large page. If you don't want it to stay on the screen as you scroll, then yeah, you can remove it and it will be fine. — prograhammer, Feb 01 '15 at 21:11

score 0 · Answer 2 · edited Jan 30 '15 at 21:07

0

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

edited Jan 30 '15 at 21:07

maja

17,250
17
82
125

answered Jan 28 '15 at 08:45

vas

962
1
9
21

The **menu** should open upwards. – Steve D Jan 28 '15 at 09:00

A clickable drop-up menu

2 Answers2