堆栈内存溢出
  繁体   English   中英

Facebook应用程序幻灯片菜单

[英]Facebook app slide menu

 原文  2012-11-10 14:48:33  1   1    jquery/ facebook/ menu/ slide/ iscroll

问题描述

我正在尝试创建一个类似于Facebook应用程序的幻灯片菜单，我可以使显示/隐藏菜单正常工作，但是，我被菜单本身的触摸滚动功能所困扰。

在我尝试过的3个解决方案中，它们都有问题，这些问题可以总结如下：

CSS触摸滚动
旧版iOS不支持单指滚动
jsFiddle上的CSS触摸 |

iScroll插件解决方案
菜单滚动正常，但阻止页面上的其他任何内容滚动。
iScroll on jsFiddle |

触摸滚动插件解决方案
当我触摸滚动菜单时，它会滚动到屏幕顶部附近
触摸jsFiddle上的Scroll |

我已经在以下移动浏览器中测试了这三种解决方案。

Android 4.0.4

  • Android默认
  • Opera Mobile
  • 火狐浏览器
  • 铬

iOS 4.2.1

  • 苹果浏览器

任何人都知道如何使2个插件正常播放吗？

以下3个版本的代码

CSS版本 

<html>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>Left Reveal - CSS</title>

    <style>
        html, body                                                  {margin:0; padding:0; font:1em/1.1em "Arial", sans-serif;}
        h1                                                          {clear:both; font-size:130%}

        a#reveal-trigger                                            {float:left; display:block; margin:0 0 20px; padding:10px;  text-decoration:none;
                                                                    border:1px solid #aaa; border-radius:3px; background:#ccc}

        #container-reveal                                           {position:relative; margin:0 auto; padding:0; overflow:hidden; border:1px solid black;}

            #menuContainer-reveal                                   {position:absolute; top:0; left:0; z-index:10; overflow-y:scroll; -webkit-overflow-scrolling: touch; background:#555;}

                #menuContainer-reveal #menu                         {margin:0; padding:0; list-style:none;}
                    #menuContainer-reveal #menu li                  {margin:0; text-align:center; background:#ccc; font-weight:bold;}
                    #menuContainer-reveal #menu li a                {display:block; padding:10px; color:black; border-bottom:1px solid black; text-decoration:none}
                    #menuContainer-reveal #menu li:last-child a     {border-bottom:0}

            #content-reveal                                         {position:relative; background:white; z-index:20; padding:10px; border-left:1px solid #ccc}
    </style>

</head>

<body>

    <div id="container-reveal">

        <div id="menuContainer-reveal">
            <ul id="menu">
                <li><a href="#">Test link - FIRST</a></li>
                <li><a href="#">Test link 1</a></li>
                <li><a href="#">Test link 3</a></li>
                <li><a href="#">Test link 4</a></li>
                <li><a href="#">Test link 5</a></li>
                <li><a href="#">Test link 6</a></li>
                <li><a href="#">Test link 7</a></li>
                <li><a href="#">Test link 8</a></li>
                <li><a href="#">Test link 9</a></li>
                <li><a href="#">Test link 10</a></li>
                <li><a href="#">Test link 11</a></li>
                <li><a href="#">Test link 12</a></li>
                <li><a href="#">Test link 13</a></li>
                <li><a href="#">Test link 14</a></li>
                <li><a href="#">Test link 15</a></li>
                <li><a href="#">Test link 16</a></li>
                <li><a href="#">Test link 17</a></li>
                <li><a href="#">Test link 18</a></li>
                <li><a href="#">Test link 19</a></li>
                <li><a href="#">Test link 20</a></li>
                <li><a href="#">Test link 21</a></li>
                <li><a href="#">Test link 22</a></li>
                <li><a href="#">Test link 23</a></li>
                <li><a href="#">Test link 24</a></li>
                <li><a href="#">Test link 25</a></li>
                <li><a href="#">Test link 26</a></li>
                <li><a href="#">Test link 27</a></li>
                <li><a href="#">Test link 28</a></li>
                <li><a href="#">Test link 29</a></li>
                <li><a href="#">Test link 30</a></li>
                <li><a href="#">Test link 31</a></li>
                <li><a href="#">Test link 32</a></li>
                <li><a href="#">Test link 33</a></li>
                <li><a href="#">Test link 34</a></li>
                <li><a href="#">Test link 35</a></li>
                <li><a href="#">Test link 36</a></li>
                <li><a href="#">Test link 37</a></li>
                <li><a href="#">Test link 38</a></li>
                <li><a href="#">Test link 39</a></li>
                <li><a href="#">Test link 40</a></li>
                <li><a href="#">Test link - LAST</a></li>
            </ul>
        </div>

        <div id="content-reveal">

            <a id="reveal-trigger" href="#">&lt; &gt;   </a>

            <h1>Reveal Menu - CSS</h1>

            <p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis Tyrium coniugem eo auditis positam ac, recedite fit itaque filiam rex ut a lenoni vero non dum. Communicatio mihi cum autem quod tamen alius. Palpat venas tanquam vero diam nostra praedicabilium subsannio, theophile esse in deinde plectrum anni ipsa Invitamus me. Ante nesciret in rei finibus veteres hoc contra te sed. Tantus nata genere in rei completo litus Ephesum peteret sua in deinde cepit roseo commendavit auri. Deo adiuves finem imponunt hoc ambulare in. Illa eius non coepit cognitionis huius beneficium peregrina, volo erat bene accidentium in rei exultant deo.</p>
            <p>Epheso Tyrum reverteretur ad per sanctus primum gaudet uxoris tibi. Neminem habere homo tu mihi esse ait regem adventu nihil impetrat est amet amet amet amet constanter approximavit te. Dionysiadis eum est cum unde beata inter sacris christiana in, innocentis sit Mariae maximas hanc enim ad per. Taliarchum in modo ad suis est amet amet consensit cellula rei exultant deo adiuves finem imponunt hoc contra me. Theophile atque bona delata iuvenis ut casus inferioribus civitatis intelligitur sicut in. Visceribusque esocem manibus dimittit in, ephesum peteret sua confusus ait.</p>
            <p>Regem consolatus dum miror puella mihi Tyrum in lucem concitaverunt in deinde duas recitare ex auxilium volo. Auri est Apollonius non potentiae cognoscitivarum non ait. Diana praesentatis ne videret famis perisse naufrago, tharsiam si mihi Tyrum reverteretur. Quem est se vero cum autem quod una litus sua confusus eos. Ipso es sed quod una civitatis ut sua coniuge per accipere filia navem causa alia vero rex Dionysiadi. Iterum non ait in fuerat se est Apollonius mihi esse ait mea Stet consequat eiusdem ordo quos essem rogo me. Tempore Quaere allocutus ait mea in, tempor in modo invenit ubi ait. Eiusdem ea docentur Hellenicus sui Care die ad nomine Piscatore mihi Tyrum ad te. Testare in rei sensibilium acciperem qui auri. Facere potest ei primum intus vero rex Stranguillio eam in fuerat eum istam vero quo.</p>
            <p>Aureos mercatoris vidisset stabat somnis quidquid iterato scelere evenissent anulo quod eam est cum, mauricii materialia sola dum est amet amet amet Cur meae. Item ut diem finito servis meo avari levavit diam ' Apollonius in fuerat construeret cena reges undis Tharsiam eam eos. Atqui plurium venenosamque serpentium ne alicuius tuo lugenti permittis dicamus quia illum in modo genito in fuerat se sed. Euismod tollam auri tecum ait in rei completo litus tuos ratio indue villicus ut diem finito servis meo lateque digne. Occurrit erat in modo cavendum es illum ille sui 'maternam castitatis ipsi sacerdotes. Quicumque inimica meam celebrabantur Apollonius non coepit cenam veniebant est amet coram regis fine omnino inventa fuit. Tace mordeo tertia veni perfrictione cogente iniquam deus. Puto suam ad suis caelo in.</p>
            <p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis Tyrium coniugem eo auditis positam ac, recedite fit itaque filiam rex ut a lenoni vero non dum. Communicatio mihi cum autem quod tamen alius. Palpat venas tanquam vero diam nostra praedicabilium subsannio, theophile esse in deinde plectrum anni ipsa Invitamus me. Ante nesciret in rei finibus veteres hoc contra te sed. Tantus nata genere in rei completo litus Ephesum peteret sua in deinde cepit roseo commendavit auri. Deo adiuves finem imponunt hoc ambulare in. Illa eius non coepit cognitionis huius beneficium peregrina, volo erat bene accidentium in rei exultant deo.</p>
            <p>Epheso Tyrum reverteretur ad per sanctus primum gaudet uxoris tibi. Neminem habere homo tu mihi esse ait regem adventu nihil impetrat est amet amet amet amet constanter approximavit te. Dionysiadis eum est cum unde beata inter sacris christiana in, innocentis sit Mariae maximas hanc enim ad per. Taliarchum in modo ad suis est amet amet consensit cellula rei exultant deo adiuves finem imponunt hoc contra me. Theophile atque bona delata iuvenis ut casus inferioribus civitatis intelligitur sicut in. Visceribusque esocem manibus dimittit in, ephesum peteret sua confusus ait.</p>
            <p>Regem consolatus dum miror puella mihi Tyrum in lucem concitaverunt in deinde duas recitare ex auxilium volo. Auri est Apollonius non potentiae cognoscitivarum non ait. Diana praesentatis ne videret famis perisse naufrago, tharsiam si mihi Tyrum reverteretur. Quem est se vero cum autem quod una litus sua confusus eos. Ipso es sed quod una civitatis ut sua coniuge per accipere filia navem causa alia vero rex Dionysiadi. Iterum non ait in fuerat se est Apollonius mihi esse ait mea Stet consequat eiusdem ordo quos essem rogo me. Tempore Quaere allocutus ait mea in, tempor in modo invenit ubi ait. Eiusdem ea docentur Hellenicus sui Care die ad nomine Piscatore mihi Tyrum ad te. Testare in rei sensibilium acciperem qui auri. Facere potest ei primum intus vero rex Stranguillio eam in fuerat eum istam vero quo.</p>
            <p>Aureos mercatoris vidisset stabat somnis quidquid iterato scelere evenissent anulo quod eam est cum, mauricii materialia sola dum est amet amet amet Cur meae. Item ut diem finito servis meo avari levavit diam ' Apollonius in fuerat construeret cena reges undis Tharsiam eam eos. Atqui plurium venenosamque serpentium ne alicuius tuo lugenti permittis dicamus quia illum in modo genito in fuerat se sed. Euismod tollam auri tecum ait in rei completo litus tuos ratio indue villicus ut diem finito servis meo lateque digne. Occurrit erat in modo cavendum es illum ille sui 'maternam castitatis ipsi sacerdotes. Quicumque inimica meam celebrabantur Apollonius non coepit cenam veniebant est amet coram regis fine omnino inventa fuit. Tace mordeo tertia veni perfrictione cogente iniquam deus. Puto suam ad suis caelo in.</p>
            <p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis Tyrium coniugem eo auditis positam ac, recedite fit itaque filiam rex ut a lenoni vero non dum. Communicatio mihi cum autem quod tamen alius. Palpat venas tanquam vero diam nostra praedicabilium subsannio, theophile esse in deinde plectrum anni ipsa Invitamus me. Ante nesciret in rei finibus veteres hoc contra te sed. Tantus nata genere in rei completo litus Ephesum peteret sua in deinde cepit roseo commendavit auri. Deo adiuves finem imponunt hoc ambulare in. Illa eius non coepit cognitionis huius beneficium peregrina, volo erat bene accidentium in rei exultant deo.</p>
            <p>Epheso Tyrum reverteretur ad per sanctus primum gaudet uxoris tibi. Neminem habere homo tu mihi esse ait regem adventu nihil impetrat est amet amet amet amet constanter approximavit te. Dionysiadis eum est cum unde beata inter sacris christiana in, innocentis sit Mariae maximas hanc enim ad per. Taliarchum in modo ad suis est amet amet consensit cellula rei exultant deo adiuves finem imponunt hoc contra me. Theophile atque bona delata iuvenis ut casus inferioribus civitatis intelligitur sicut in. Visceribusque esocem manibus dimittit in, ephesum peteret sua confusus ait.</p>
            <p>Regem consolatus dum miror puella mihi Tyrum in lucem concitaverunt in deinde duas recitare ex auxilium volo. Auri est Apollonius non potentiae cognoscitivarum non ait. Diana praesentatis ne videret famis perisse naufrago, tharsiam si mihi Tyrum reverteretur. Quem est se vero cum autem quod una litus sua confusus eos. Ipso es sed quod una civitatis ut sua coniuge per accipere filia navem causa alia vero rex Dionysiadi. Iterum non ait in fuerat se est Apollonius mihi esse ait mea Stet consequat eiusdem ordo quos essem rogo me. Tempore Quaere allocutus ait mea in, tempor in modo invenit ubi ait. Eiusdem ea docentur Hellenicus sui Care die ad nomine Piscatore mihi Tyrum ad te. Testare in rei sensibilium acciperem qui auri. Facere potest ei primum intus vero rex Stranguillio eam in fuerat eum istam vero quo.</p>
            <p>Aureos mercatoris vidisset stabat somnis quidquid iterato scelere evenissent anulo quod eam est cum, mauricii materialia sola dum est amet amet amet Cur meae. Item ut diem finito servis meo avari levavit diam ' Apollonius in fuerat construeret cena reges undis Tharsiam eam eos. Atqui plurium venenosamque serpentium ne alicuius tuo lugenti permittis dicamus quia illum in modo genito in fuerat se sed. Euismod tollam auri tecum ait in rei completo litus tuos ratio indue villicus ut diem finito servis meo lateque digne. Occurrit erat in modo cavendum es illum ille sui 'maternam castitatis ipsi sacerdotes. Quicumque inimica meam celebrabantur Apollonius non coepit cenam veniebant est amet coram regis fine omnino inventa fuit. Tace mordeo tertia veni perfrictione cogente iniquam deus. Puto suam ad suis caelo in.</p>
            <p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis Tyrium coniugem eo auditis positam ac, recedite fit itaque filiam rex ut a lenoni vero non dum. Communicatio mihi cum autem quod tamen alius. Palpat venas tanquam vero diam nostra praedicabilium subsannio, theophile esse in deinde plectrum anni ipsa Invitamus me. Ante nesciret in rei finibus veteres hoc contra te sed. Tantus nata genere in rei completo litus Ephesum peteret sua in deinde cepit roseo commendavit auri. Deo adiuves finem imponunt hoc ambulare in. Illa eius non coepit cognitionis huius beneficium peregrina, volo erat bene accidentium in rei exultant deo.</p>
            <p>Epheso Tyrum reverteretur ad per sanctus primum gaudet uxoris tibi. Neminem habere homo tu mihi esse ait regem adventu nihil impetrat est amet amet amet amet constanter approximavit te. Dionysiadis eum est cum unde beata inter sacris christiana in, innocentis sit Mariae maximas hanc enim ad per. Taliarchum in modo ad suis est amet amet consensit cellula rei exultant deo adiuves finem imponunt hoc contra me. Theophile atque bona delata iuvenis ut casus inferioribus civitatis intelligitur sicut in. Visceribusque esocem manibus dimittit in, ephesum peteret sua confusus ait.</p>
            <p>Regem consolatus dum miror puella mihi Tyrum in lucem concitaverunt in deinde duas recitare ex auxilium volo. Auri est Apollonius non potentiae cognoscitivarum non ait. Diana praesentatis ne videret famis perisse naufrago, tharsiam si mihi Tyrum reverteretur. Quem est se vero cum autem quod una litus sua confusus eos. Ipso es sed quod una civitatis ut sua coniuge per accipere filia navem causa alia vero rex Dionysiadi. Iterum non ait in fuerat se est Apollonius mihi esse ait mea Stet consequat eiusdem ordo quos essem rogo me. Tempore Quaere allocutus ait mea in, tempor in modo invenit ubi ait. Eiusdem ea docentur Hellenicus sui Care die ad nomine Piscatore mihi Tyrum ad te. Testare in rei sensibilium acciperem qui auri. Facere potest ei primum intus vero rex Stranguillio eam in fuerat eum istam vero quo.</p>
            <p>Aureos mercatoris vidisset stabat somnis quidquid iterato scelere evenissent anulo quod eam est cum, mauricii materialia sola dum est amet amet amet Cur meae. Item ut diem finito servis meo avari levavit diam ' Apollonius in fuerat construeret cena reges undis Tharsiam eam eos. Atqui plurium venenosamque serpentium ne alicuius tuo lugenti permittis dicamus quia illum in modo genito in fuerat se sed. Euismod tollam auri tecum ait in rei completo litus tuos ratio indue villicus ut diem finito servis meo lateque digne. Occurrit erat in modo cavendum es illum ille sui 'maternam castitatis ipsi sacerdotes. Quicumque inimica meam celebrabantur Apollonius non coepit cenam veniebant est amet coram regis fine omnino inventa fuit. Tace mordeo tertia veni perfrictione cogente iniquam deus. Puto suam ad suis caelo in.</p>

        </div>

    </div>

    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="assets/jquery-1.7.min.js">\x3C/script>')</script>

    <script>        
        $(document).ready(function()
        {
            //Get DOM nodes & dimensions
            var viewportHeight = $(window).height();
            var content = $('#content-reveal');
            var contentWidth = content.width()

            //Set the menu width & height
            $('#menuContainer-reveal').width(contentWidth-30).height(viewportHeight);

            /* REVEAL MENU */           
            $('#reveal-trigger').toggle(function(e)
            {           
                e.preventDefault();
                content.animate({'left':(contentWidth-30)}, 250);

            }, function(e)
            {
                e.preventDefault();
                content.animate({'left':0}, 250);
            })

        })
    </script>

</body>

1 个解决方案

解决方案1
 0 已采纳  2012-11-11 10:53:29

我修复了iScroll问题，即通过从初始化代码中删除此行来防止其他所有内容滚动

document.addEventListener（'touchmove'，function（e）{e.preventDefault（）;}，false）;

现在，该插件可以完美运行，并且我页面上的所有内容都可以正常运行。

如果本地不支持1手指滚动，则我将对溢出：scroll使用modernizr测试来提供此插件。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Facebook的移动应用程序/网站水平幻灯片菜单：Jquery插件？ iPhone Web应用程序的下拉幻灯片菜单 jQuery幻灯片像Facebook应用一样从左向右切换 尝试使用幻灯片菜单创建应用程序，并使用app-UI创建JSON列表 幻灯片菜单不会滑动 .click菜单图标在菜单中滑动 使菜单按钮与菜单一起滑动 幻灯片导航菜单 jQuery幻灯片菜单 jQuery滑出菜单
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM