使我的网站菜单触摸友好（下拉）

时间：2015-11-13 19:48:28

标签： javascript css drop-down-menu touchscreen

我正在使用简单的下拉菜单构建一个小网站。在桌面上将鼠标悬停在某个项目上时，您会看到一个简单的下拉列表。

然而，在无法正常工作的触摸屏上，我可以点击一个项目，它会生成下拉菜单，但我无法通过单击父菜单项关闭下拉菜单。

不幸的是，我并不真正了解JavaScript，所以到目前为止我无法找到我在本网站上找到的大多数解决方案。

以下是我在jsfiddle的网站：https://jsfiddle.net/y1v8zsc5/

和实时版本：raihansharif.site90.com

代码很长......

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

1 个答案:

答案 0 :(得分：0)

您使用 touchmove 侦听器类型而不是 touchend 侦听器类型，并将其应用于整个页面，而不仅仅是菜单。

$('.menu li').addEventListener('touchend', function(e){
    e.preventDefault();
    $(this).find('ul').toggle();
});
相关问题
最新问题