移動CSS導航點擊事件

-1

我試圖讓我的第一個移動第一站點，即使你點擊菜單，我的onclick也有輕微的問題。當你點擊菜單圖標並出現下拉菜單時，屏幕會顯示一點點，只顯示標題的一部分。你如何做到這一點，以便當你點擊菜單時，屏幕不會掉落或向下滾動。你可以在我的例子中我提出了我的意思，任何想法看，任何幫助是非常繼承人很欣賞我的演示鏈接：移動CSS導航點擊事件

演示：http://cssdeck.com/labs/jkxsecgl

這裏是我的HTML標記：

 <body> 
<div id="container"> 

    <div id="header"> 
    <h1>This is the header</h1> 
    <div class="main-nav" id="nav"> 
     <a href="#nav" class="nav-open"> &#9776; Menu</a> 
     <a href="#" class="nav-close"> &#9776; Close</a> 
      <nav> 
       <ul> 
       <li><a href="#">home</a></li> 
       <li><a href="#">bio</a></li> 
       <li><a href="#">contact</a></li> 
       <li><a href="#">gallery</a></li> 
      </ul> 
      </nav> 

    </div> 

    </div> 

    <div id="content"><h1>This is the content</h1></div> 
    <aside><h1>The side bar</h1></aside> 
    <footer><h1>The Footer</h1></footer> 


    <div id="content"><h1>This is the content</h1></div> 
    <aside><h1>The side bar</h1></aside> 
    <footer><h1>The Footer</h1></footer> 

</div> 


</body>

CSS ：

*{margin: 0px; padding: 0px;} 

h1 {padding: 10px;} 

#container { 
    position: relative; 
    width: 100%; 
    max-width: 320px; 
    background: rgba(51,0,255,.2); 
    margin: 0 auto; 
    } 

#nav { 
    padding-left: 10px; 
} 

#nav nav ul, .nav-close, .nav-open { 
    list-style: none; 
    text-decoration: none; 
} 
.nav-close { 
    display: none; 
} 


#nav nav ul a { 
    text-decoration: none; 
} 

.nav-open, .nav-close { 
    background: yellow; 
    padding: 10px; 
    border: 1px solid; 
} 
#nav:target .nav-open { 
    display: none; 
} 

#nav:target .nav-close { 
    display: inline-block; 
} 

#nav nav { 
    position: relative; 
    text-align: left; 
} 
#nav nav ul { 
    position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     max-height: 0; 
     max-width: 16em; 
      max-width: 16em; 
     background: #f6f6f6; 
     border-width: 0px; 
     border-style: dashed; 
     border-color: #aaa; 
     overflow: hidden; 
     -webkit-transition: max-height linear 0.5s; 
     -moz-transition: max-height linear 0.5s; 
     -ms-transition: max-height linear 0.5s; 
     -o-transition: max-height linear 0.5s; 
     transition: max-height linear 0.5s; 

} 
#nav nav ul li { 
     display: block; 
    background: orange; 
    border-bottom: 1px solid; 
} 
#nav nav ul li a { 
     padding: 0.3em 1.5em; 
    } 
#nav:target nav ul { 
     max-height: 400px; 
    } 
.nav-open { 
     display: inline-block; 
    } 

#header { 
    width: 100%; 
    background: rgba(0,204,51,.7); 
} 

#content { 
    background: rgba(0,0,204,.6); 
    height: 300px; 
    } 

aside { 
    background: rgba(153,0,0,0.9); 
    height: 300px; 
    } 

footer { 
    width: 100%; 
    height: 150px; 
    background: rgba(102,255,255,1); 
    }

來源

2014-03-31 Loungin Out

問題是，這是一個錨標記的默認動作，你可能可以用js覆蓋這個，但這可能違揹你在這裏嘗試做的。也只有css –

這是我正在使用的導航示例。他使用相同的默認標籤，但他點擊時不動，http://jeffri.me/2012/11/pure-css3-responsive-navigation-with-target/，注意如何當你點擊菜單，屏幕不會'噸下降。 –

正如湯姆說...這是你的錨標記的默認行爲 - 因爲在href屬性的哈希（＃），它正試圖跳轉到該位置。您需要使用JavaScript來覆蓋錨標記的功能，或者只是在跳躍中生活。是的......你給的例子也是跳躍的。點擊打開時，他跳到「#nav」，點擊關閉時跳到「＃」...如果您調整屏幕大小以便滾動，您將看到它發生。

要走JS路線，您可以在標籤本身中使用onclick並返回false，或者您可以使用jQuery並使用preventDefault。

除此之外，我不知道如何純粹使用CSS來防止「跳躍」。

來源

2014-03-31 14:51:20 kevindeleon

而不僅僅是當容器的尺寸小於屏幕尺寸時，那麼它根本沒有JUMP，因此它與HASH標籤 –

兄弟沒什麼關係......你在開玩笑嗎？在此演示中（http://projects.keaglez.com/navigation/）減少瀏覽器屏幕大小（高度以便向下滾動），向下滾動，單擊打開按鈕，然後關閉它。整個頁面跳回頂部。當你顯然不明白HTML錨是如何工作的時候，不要質疑我的專業精神。 – kevindeleon

http://projects.keaglez.com/navigation/# <<看礦山，看着他的礦坑到底部的小屋，看到什麼叫做之前回答我回答我「不是在說移動回到最上面現在看着我的示例http://cssdeck.com/labs/jkxsecgl當側欄，內容或頁腳中沒有任何內容時，MINE將下降標題的一半當您點擊菜單 –

雖然我仍然相信JS是一個更好的解決方案，但我可以幫助：http://cssdeck.com/labs/ok437d8l我把所有的目標標籤都移到了#container中。哪個是容器元素，所以錨點位於頂部。

但它會跳轉到頂部，如果你滾動。

來源

2014-04-01 14:16:34

謝謝，我會檢查一下，欣賞它，這一切都很好，只是要使用JavaScript或我'將使用從我聽到的複選框方法是更好的csstricks談論錨點跳躍時，當你使用目標，應該使用當你需要跳轉這裏的鏈接，如果有人感興趣http://css-tricks.com/on-target /，另一個鏈接css3點擊事件與每種方法的優點和缺點http://tympanus.net/codrops/2012/12/17/css-click-events/ –

移動CSS導航點擊事件

回答

相關問題