Making my website menu touch friendly (drop down)

Question

I'm building a small site with a simple drop down menu. On desktop when you hover over an item, you get a drop down list, simple.

However, on touch screens that doesn't work properly, I can click on a item and it will generate the drop down, but I can't close the drop down with a click of the parent menu item.

And unfortunately, I don't really know JavaScript, so I can't quite figure out most solutions I've found on this site so far.

Here is my site in jsfiddle: https://jsfiddle.net/y1v8zsc5/

and a live version: raihansharif.site90.com

Code is long...

HTML:

<body>
  <div id="wrapper">
    <div class="header">
        <h1 id="header-text">Basics of Web Design</h1>
      <div class="nav"> 
        <a href="#" class="hamburger">
          <div class="line"></div>
          <div class="line"></div>
          <div class="line"></div>
        </a>

        <ul class="clearfix menu">
          <li><a href="#">Home</a>
            <ul class="submenu">
                <li><a href="#">sub heading 1</a></li>
                <li><a href="#">sub heading 2</a></li>
                <li><a href="#">sub heading 3</a></li>
                <li><a href="#">sub heading 4</a></li>
                <li><a href="#">sub heading 5</a></li>
                <li><a href="#">sub heading 6</a></li>
            </ul>
          </li>
          <li><a href="#">HTML</a>
            <ul class="submenu">
              <li><a href="#">sub heading 3</a></li>
              <li><a href="#">sub heading 1</a></li>
              <li><a href="#">sub heading 2</a></li>
              <li><a href="#">sub heading 3</a></li>
              <li><a href="#">sub heading 4</a></li>
              <li><a href="#">sub heading 5</a></li>
              <li><a href="#">sub heading 6</a></li> 
            </ul>
          </li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
          <li><a href="#">Aesthetics</a></li>
        </ul>
      </div> <!-- nav -->
    </div> <!-- header -->

    <div id="main">
    <div id="article">
      <h1 id="headline">Welcome to Basics of Web Design</h1>
        <p>
       Mea te probo aperiam, phaedrum imperdiet dissentiunt mea id. Harum molestiae cu eum, his ne doming propriae, delectus adolescens pro ei. Mea dicam dolorem te, mei eu prompta quaerendum, duo id sanctus albucius scripserit. Ex qui graecis honestatis concludaturque, te sed porro impedit reformidans, legimus accusata vim te.
        </p>

    </div> <!-- article -->
  </div> <!-- main -->
  <div id="aside">
    <ul id="fixednav">
      <li><a href="#">Logical separation of structure and style</a></li>
      <li><a href="#">sub heading 2</a></li>
      <li><a href="#">sub heading 3</a></li>
      <li><a href="#">sub heading 4</a></li>
      <li><a href="#">sub heading 5</a></li>
      <li><a href="#">sub heading 6</a></li>
    </ul>
  </div>
    <div id="footer-wrapper">
    <div class="footer">
      <ul class="footer-info">
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Resources</a></li>
      </ul>
    </div> <!-- Footer -->
  </div><!-- Footer wrapper -->

  </div> <!-- wrapper -->

</body>

CSS:

/* *resets everything */
*, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/* top level styles, applies to all listed elements/classes unless overridden */
html, body {
    height: 100%;
    background-color: #4A4A4A;
    background-repeat: repeat;
}

/* some default text and other styling */
body {
    font: 1em'Roboto', sans-serif;
    color: #C9C9C9;
    background-color: #dddd;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
} 

#wrapper{
    min-height: 100%;
    min-width: 100%;
    position: absolute;
}
/* ul anchors all have the below effects unless overridden */
ul a {
    font-weight: bold;
    text-align: center;
    color: #737575;
    cursor: pointer;
    text-decoration: none;
    background-color: #f5f5f5;
    cursor: pointer;
}

li a:active{
    color: black;
}

.nav ul a:active{
    color: black;
}

/* all h1 tags have these effects */
h1 {
    font: 2em'Open Sans', sans-serif;
    text-align: left;
    color: #E8E8E8;
    text-shadow: 0px 1px 1px #4d4d4d;
    font-weight: normal;
}

/* all paragraphs get 1em total margin at top/bottom */
p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.header{
    background-color: #CFD1D1
}
#header-text {
    padding: 30px 0;
    font: 4em 'Open Sans', sans-serif;
    text-align: center;
    color: #737575;
    text-shadow: 0px 1px 1px #4d4d4d;

}
.nav {
    height: 3.6em;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background-color: #f5f5f5;
    /* adds box shadow */
    -webkit-box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1);
    -moz-box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1);
    box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1);
    z-index: 3;
}


ul {
    list-style: none;
    max-width: 900px;
    margin: 0 auto;
}
ul a {
    display: block;
    padding: 20px;
    /* padding-right: 0 !important;
    /* important overrides media queries */
    font-size: 13px;
    text-align: center;
    color: #737575;
    text-decoration: none;
    background-color: #f5f5f5;
}

li {
    float: left;
    width: 20%;
    border-left: 1px solid #ddd;
    position: relative;
}

.nav li:last-child, .footer-info li:last-child {
  border-right: 1px solid #ddd;
}

.nav > li > ul  li{
    float: left;
    position: relative;
}

ul.submenu {
    display: none;
} 

ul.submenu li {
    width: 100%;
    background: #eee;
    z-index: 3;
    border: none;
}
ul.submenu li a {
    width: 100%;
    padding: 6px;
}

.nav ul.menu > li:hover ul.submenu {
    float: none;
    display: block;
    background: #eee;
}

ul.menu > ul.submenu {
    float: none;
    display: block;
    background: #eee;
}


#main{
    margin: 0.5em;
    margin-bottom: 3em;
    display: block; 
    float: left;
    clear: both;
    padding-bottom: 1em;
}

#article{
    float: right;
    margin-top: 80px;
    margin-right: 15%;
    margin-left: 15%;

}

#aside{
    position: fixed;
    margin-top: 6em;
    margin-bottom: 5px;
    margin-right: 5px;
    width: 14%;
    border-bottom: 1px solid #ddd;
    background-color: #f5f5f5;
    /* adds box shadow */
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
    float: left;
}

ul#fixednav li{
    list-style: none;
    float: none;
    width: 100%;
    border-top: 1px solid   #ddd;
}

ul#fixednav li a{
    padding: 10px;
    text-align: left;
}

#headline{
    text-align: left;
    font-size: 2em;
}
#article a{
    color: white;
}
#article a:hover{
    background: rgb(115, 117, 117);
    border-radius: 0.3em;
}
ul a:hover {
    background: #eee;
}


#tim{
    position: relative;
    float: right;
    border: 1px solid black;
    height: 30em;
    margin: 1em;
}




/* footer, attmep to style like nav bar */
#footer-wrapper{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    clear: both;
}

.footer{
    position: relative;
    height: 3.6em;
    background-color: #f5f5f5;
    left: 0px;
    right: 0px;
}

.footer li{
    width: 33.3%;
}

@media only screen and (max-width: 600px) {
    .hamburger {
        padding: 15px;
        display: block;
    }
    .line {
        border-bottom: 4px solid #bbb;
        width: 35px;
        margin-bottom: 6px;
    }
    .line:last-child {
        margin-bottom: 0;
    }
    .nav li {
        width: 100%;
        z-index: 3;
    }
    .menu {
        height: 0;
        z-index: 3;
        overflow: hidden;
        transition: height 0.3s linear;
        -webkit-box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1);
        -moz-box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1);
        box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1);
    }

    #aside{display: none;}
    h1#header-text {
        padding: 3px 0;
        font: 3em'Open Sans', sans-serif;
    }

    .slide-down {
        height: auto;
    }
    #article{
        margin: 0 auto;
        padding: 5px;
        padding-bottom: 4em;
    }
    img#tim{
        border: 1px solid black;
        margin: auto;
        width: 90%;
        height: auto;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        display: block;
        float: none;
    }

    #headline{
        font-size: 2em;
        margin-top: 1em;
        margin-bottom: 0.5em;
    }
}

Js:

$('.hamburger').on('click', function(e) {
  // Prevent link from jumping to the top of the page
  e.preventDefault();
  // If menu is already showing, slide it up. Otherwise, slide it down.
  $('.menu').toggleClass('slide-down');
});

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    var touch = e.touches[0];
    alert(touch.pageX + " - " + touch.pageY);
}, false);

Crinkley Crewms · Answer 1 · 2015-11-13T20:31:32.623

0

Your using the the touchmove listener type instead of the touchend listener type and applying it to the entire page instead of just the menu.

$('.menu li').addEventListener('touchend', function(e){
    e.preventDefault();
    $(this).find('ul').toggle();
});

edited Nov 13 '15 at 20:31

answered Nov 13 '15 at 20:18

Crinkley Crewms

123
11

I'm sorry, I don't quite understand. I tried to remove my old code and put this in, it doesn't work and I'm not sure how to adapt it to get it right for particular site. – Shiny_and_Chrome Nov 13 '15 at 22:32

Making my website menu touch friendly (drop down)

1 Answers1