手機熱門導航問題

Question

我的網站是http://www.kaniamea.com/ph/。請最小化屏幕或使用移動設備查看此頁面。然後當你點擊右上角的菜單圖標時，標題會跳出來，因爲下拉菜單會出現（這會導致隱藏整個標題）。有沒有一種方法可以防止這種情況發生，所以當你點擊菜單圖標時，菜單將出現在下方，而無需將標題隱藏在頂部？謝謝大家聖誕快樂！

<!-- 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 --> 

導航CSS是：

#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

你所看到的問題，從使用#nav:target呈現導航莖。你說的是瀏覽器「只顯示菜單時，地址欄是http://www.kaniamea.com/ph/#nav ...通過應用#nav，你也告訴瀏覽器跳轉到該元素與id="nav"。

而不是你的CSS依靠:target，您可以改爲做#nav.showNav，並添加切換的showNav類click事件。

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

請告訴我這裏重要的是，你在呼喚event.preventDefault();，防止默認點擊行爲，當你點擊一個鏈接。

這裏是您的網站的例子jquery在這裏：http://jsfiddle.net/zc6w276o/