Мобильные события для навигации по CSS для мобильных устройств

-1

Я пытаюсь сделать свой первый мобильный сайт первым, и у меня есть небольшая проблема с моим onclick, даже когда вы нажимаете меню. Когда вы нажмете на значок меню и выпадаете, экран немного падает, показывая только часть заголовка. Как сделать так, чтобы при нажатии кнопки меню экран не падал или немного прокручивался. вы можете увидеть в моем примере я поставил на то, что я имею в виду, какие-либо идеи, любая помощь очень ценится Heres моей демо ссылки:Мобильные события для навигации по 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, но это может пойти против того, что вы пытаетесь сделать здесь. AKA css только –

вот пример навигации, который я использую. он использует один и тот же тег по умолчанию, но его не двигает, когда его нажимают, http://jeffri.me/2012/11/pure-css3-responsive-navigation-with-target/, обратите внимание, как при нажатии кнопки мыши экран не работает, t падение. –

Как том сказал ... что это действие по умолчанию якоря тегов ... Потому что есть хэш (#) в HREF атрибута, он пытается перейти к этому местоположению. Вы должны использовать JavaScript, чтобы переопределить функциональность тега привязки или просто жить с прыжком. И да ... пример, который вы тоже давали. Он перескакивает на «#nav», когда нажимается «open», а «#» при нажатии на клик ... если вы изменяете размер экрана, чтобы вы могли прокручивать его, вы увидите, что это происходит.

Чтобы перейти на маршрут JS, вы можете использовать onclick в самом теге и вернуть false, или вы можете использовать jQuery и использовать preventDefault.

Вне этого я не знаю, как это сделать с помощью CSS и предотвратить «прыжки».

источник

2014-03-31 14:51:20 kevindeleon

, а не ТОЛЬКО, что, когда контейнер меньше размера экрана, ТОГДА он НЕ ПРОХОДИТ НАСТОЛЬКО НЕ ИМЕЕТ НИЧЕГО делать с Хэш-тегом –

Бро ... вы издеваетесь? На ЭТОЙ демонстрации (http://projects.keaglez.com/navigation/) Уменьшите размер экрана вашего браузера (высота, чтобы вы могли прокручивать вниз), прокрутите вниз, нажмите кнопку «Открыть», а затем нажмите «Закрыть». Вся страница возвращается к вершине. Не ставьте под сомнение мой профессионализм, когда вы, очевидно, тот, кто не понимает, как работают анкеры HTML. – kevindeleon

http://projects.keaglez.com/navigation/# << ПОСМОТРЕТЬ В МИРЕ И СМОТРЕТЬ В СВОЕМ МЯСНОМ РАЗРЕШЕНИИ К НОМЕРНОМУ ДЖЕКУ ПРОЧИТАЙТЕ, ЧТО ИМ ГОВОРИТ ДО ОТВЕТОВ Я НЕ говорю о ДВИЖЕНИИ НАЗАД НА ВЕРНУЮ СЕЙЧАС ВЗГЛЯД НА МОЙ ПРИМЕР http://cssdeck.com/labs/jkxsecgl MINE падает вниз по заголовку наполовину КОГДА u НАЖМИТЕ МЕНЮ –

Я подумал об этом, хотя я все еще считаю, что JS - лучшее решение, это может помочь: http://cssdeck.com/labs/ok437d8l Я переместил все ваши целевые теги в #container. Это элемент контейнера, поэтому точка привязки находится вверху.

Но он будет прыгать на верх, если ваш прокрутить прочь.

источник

2014-04-01 14:16:34

спасибо человеку, что я проверю его, оцените его, это все хорошо, я просто буду использовать javascript или я ' ll использовать метод checkbox, из которого я слышал, лучше, csstricks говорит о прыжке с якоря, когда u использует цель, и должен использоваться, когда вам нужно прыгать здесь, если кто-то заинтересован. http://css-tricks.com/on-target /, и еще одна ссылка для событий css3 click с плюсами и минусами каждого метода. http://tympanus.net/codrops/2012/12/17/css-click-events/ –

Мобильные события для навигации по CSS для мобильных устройств

ответ

Смежные вопросы