移动热门导航问题

Question

my site is http://www.kaniamea.com/ph/ . Please minimize the screen or see this page with a mobile device. Then when you click on the top right where the menu icon is the header jumps up as the drop menu appears (which results in hiding the whole header). Is there a way to prevent this so when you click on the menu icon the menu will appear under without to hide the header on top? thanks and Merry Christmas to everyone!

<!-- Start Main -->
<div id="main">
  <!-- Start Header -->
  <div id="header">
    <!-- Start Logo -->
    <div id="logo">
      <h1><a href="#">Logo</a></h1>
    </div>
    <!-- End Logo -->
    <!-- Start Nav -->
    <div id="nav" role="navigation"> <a href="#nav" title="Show navigation">Show navigation</a> <a href="#" title="Hide navigation" >Hide navigation</a>
      <ul class="clearfix">
        <li class="home"><a href="link.html">Home</a></li>
        <li><a href="link.html">What Happened</a></li>
        <li><a href="link.html">Today</a></li>
        <li> <a href="javascript:void(0);" aria-haspopup="true"><span>Visit</span></a>
          <ul>
            <li> <a href="link.html">Tours</a></li>
            <li> <a href="link.html">Directions</a></li>
            <li><a href="link.html">Operating Hours</a></li>
            <li><a href="link.html">Things To Do</a></li>
            <li><a href="link.html">Before You Come</a></li>
             </ul>
        </li>
        <li> <a href="javascript:void(0);" aria-haspopup="true"><span>Battleships</span></a>
          <ul>
            <li> <a href="link.html">Arizona</a></li>
            <li><a href="link.html">Oklahoma</a></li>
            <li><a href="link.html">West Virginia</a></li>
            <li><a href="link.html">California</a></li>
            <li><a href="link.html">Nevada</a></li>
            <li><a href="link.html">Pennsylvania</a></li>
            <li><a href="link.html">Maryland</a></li>
            <li><a href="link.html">Missouri</a></li>
            <li><a href="link.html">Tennessee</a></li>
            <li><a href="link.html">Utah</a></li>
          </ul>
        </li>      
      </ul>
    </div>
    <!-- End Nav -->
  </div>
  <!-- End Header -->

Nav css is :

#nav {
    display: block;
    background-image: url("images/nav-bg.png");
    background-repeat: no-repeat;
    width: 681px;
    height: 63px;
    float: right;
    margin-right: -1.77em;
    margin-top: 1.6em;
}
#nav > a {
    display: none;
}
#nav li {
    position: relative;
}
#nav li a {
    padding: 20px 25px 20px 25px;
    color: #FFF;
    font-size: 1.1em !important;
    text-decoration: none;
    font-weight: bold;
    display:block;
}
#nav li a:hover {
    background-image:url(images/hover.png);
    background-repeat: repeat-x;
}
#nav span:after {
    width: 0;
    height: 0;
    border: 0.313em solid transparent; /* 5 */
    border-bottom: none;
    border-top-color: #F81302;
    content: '';
    vertical-align: middle;
    display: inline-block;
    position: relative;
    right: -0.313em; /* 5 */
}
/* first level */

#nav > ul > li {
    float: left;
    z-index:1000;
    overflow:visible;
}
#nav > ul > li > a {
    height: 100%;
    font-size: 1.1em; /* 24 */
}
 #nav > ul > li:hover > a,  #nav > ul:not( :hover ) > li.active > a {
 background-image:url(images/hover.png);
 background-repeat: repeat-x;
}
/* second level */

#nav li ul {
    background-color: #BE0115;
    display: none;
    position: absolute; 
    top: 100%;
    width:170px;
}
#nav li:hover ul {
    display: block;
    left: 0;
    right: 0;
}
 #nav li:not( :first-child ):hover ul {
 left: -1px;
}
#nav li ul a {
    font-size: 1.25em; /* 20 */
    border-top: 1px solid #D90018;
    padding: 0.75em; /* 15 (20) */
}
 #nav li ul li a:hover,  #nav li ul:not( :hover ) li.active a {
 background-image:url(images/drop-nav-bg.png);
 background-repeat: repeat-x;
}

 @media only screen and ( max-width: 800px ) {
 html {
 font-size: 75%; /* 12 */
}
 #nav {
 width: 100%;
 position: static;
 margin: 0;
 top: auto;
 left: auto;
 background-image: none;
 float: right;
 height:auto;
 }

 #nav > a {
 width: 40px;
 height: 40px;
 text-align: left;
 text-indent: -9999px;
 background: url("images/menu-icon.png") repeat scroll center center #4C8FEC;
 float: right;
 margin-top: -45px !important;
}
 #nav > a:before,  #nav > a:after {
 margin-right:40px;
 margin-top:10px;
 content: '';
}
 #nav > a:after {
 margin-top:10px;
}
 #nav:not( :target ) > a:first-of-type,  #nav:target > a:last-of-type {
 display:block;


}
 #nav > ul > li:hover > a,  #nav > ul:not( :hover ) > li.active > a {
 background-image:none;
}

/* first level */

#nav > ul {
 height: auto;
 display: none;
 left: 0;
 right: 0;
 height: 3.75em;
 width: 200px;
 float:right;

}
 #nav:target > ul {
 display: block;
}
 #nav > ul > li {
 width: 100%;
 float: right;

}
 #nav > ul > li > a {
 height: auto;
 text-align: left;
 padding: 0 0.833em; /* 20 (24) */
 height: 100%;
 font-size: 1.1em; /* 24 */
 line-height: 2.5em; /* 60 (24) */
 background-color: #BE0115;
}
 #nav > ul > li > a:hover {
 background-image:url(images/drop-nav-bg.png);
 background-repeat: repeat-x;
}
 #nav > ul > li:not( :last-child ) > a {
 border-right: none;
}
#nav > ul > li:not(:last-child) > a {
 border-right: medium none;
 border-bottom: 1px solid #D90018;
}

/* second level */

#nav li ul {
 padding-top: 0;
 width: 200px;
 position: static; 
}
}

Answer 1

The issue you are seeing stems from using #nav:target to render the navigation. You are telling the browser "Only show the menu when the url bar is http://www.kaniamea.com/ph/#nav ... By applying the #nav , you are also telling the browser to jump to the element with id="nav" .

Rather than your css rely on :target , you can instead do #nav.showNav , and add a click event that toggles the showNav class.

$(function() {
    $('.toggle-nav').click(function(event){
        event.preventDefault();
        $('#nav').toggleClass('showNav');
    });
});

Whats important here is that you are calling event.preventDefault(); , which prevents the default click behavior when you click on a link.

Here is your site with the example jquery here: http://jsfiddle.net/zc6w276o/