ilch Forum » Allgemein » HTML, PHP, SQL,... » Slide out Mobile menu

Geschlossen
  1. #1
    User Pic
    Blaubaer Mitglied
    Registriert seit
    24.10.2009
    Beiträge
    331
    Beitragswertungen
    33 Beitragspunkte
    Hi,


    ich habe mal eine Frage an euch.

    Ich habe mir von der Seite jsfiddle.net/fh6p4/ das Mobil Menü angeschaut und möchte es für ein ilch Design nutzen.

    Ich habe alles von der Seite in eine Index.html eingefügt.

    Jetzt will das Menü nicht sliden (beim drauflicken), weiß jemand was der Fehler sein könnte?

    Hier mal die Index die ich erstellt habe:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <title>Slide menu test</title>
    <script type="text/javascript">
    $('#button').toggle( 
        function() {
            $('#right').animate({ left: 250 }, 'slow', function() {
                $('#button').html('Close');
            });
        }, 
        function() {
            $('#right').animate({ left: 0 }, 'slow', function() {
                $('#button').html('Menu');
            });
        }
    );
    </script>
    
    <style type="text/css">
    * {
        padding: 0px;
        margin: 0px;
    }
    
    #menubar {
        width:100%;
        background-color:#444;
        color: #fff;
        padding: 10px;
    }
    
    #button {
        cursor:pointer;
    }
    
    #menu, #right {
        display:inline;
    }
    
    #menu li a {
        padding: 10px;
        display: block;
        color: white;
        text-decoration: none;
    }
    
    #right {
        width:100%;
        background-color: #fff;
        z-index: 5;
        position: fixed;
        left: 0px;
        height: 100%;
        -webkit-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
            moz-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
              o-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
                box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
    }
    
    #right p {
        padding: 10px;
    }
    
    #menu {
        float:left;
        width: 350px;
        height: 100%;
    }
    
    #menu li {
        background-color:#444;
        border-bottom: 1px solid #888;
    }
    </style>
    </head>
    
    <body>
    <div id="menu">
            <ul>
                <li><a href="#">Menu Item 1</a></li>
                <li><a href="#">Menu Item 2</a></li>
                <li><a href="#">Menu Item 3</a></li>
                <li><a href="#">Menu Item 4</a></li>
                <li><a href="#">Menu Item 5</a></li>
                <li><a href="#">Menu Item 6</a></li>
                <li><a href="#">Menu Item 7</a></li>
                <li><a href="#">Menu Item 8</a></li>
                <li><a href="#">Menu Item 9</a></li>
                <li><a href="#">Menu Item 10</a></li>
                <li><a href="#">Menu Item 11</a></li>
                <li><a href="#">Menu Item 12</a></li>
            </ul>
        </div>
        <div id="right">
            <div id="menubar">
                <div id="button">
                    Menu
                </div>
            </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
        </div>
    </body>
    </html>


    Danke und LG
    Blaubaer


    verwendete ilch Version: 1.1 O

    betroffene Homepage: jsfiddle.net/fh6p4/
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Ahrtas Hall Of Fame
    Registriert seit
    17.12.2007
    Beiträge
    2.303
    Beitragswertungen
    202 Beitragspunkte
    Füge mal die neueste jquery-bibio von Google ein, vielleicht liegt es daran.
    1 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Blaubaer Mitglied
    Registriert seit
    24.10.2009
    Beiträge
    331
    Beitragswertungen
    33 Beitragspunkte
    hab jetzt die neuste eingefügt funktioniert auch nicht grumml

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


    eventuell noch andere Ideen oder vorschläge?
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    Outi77 Mitglied
    Registriert seit
    31.03.2013
    Beiträge
    1.209
    Beitragswertungen
    130 Beitragspunkte
    Kannst Du in der Firebug-Konsole einen Fehler sehen?
    Die richtige Formulierung eines Problems ist nicht selten bereits die halbe Lösung.
    »Albert Einstein«
    1 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Ahrtas Hall Of Fame
    Registriert seit
    17.12.2007
    Beiträge
    2.303
    Beitragswertungen
    202 Beitragspunkte
    Das Script läuft nicht mit jquery 1.10.1 sondern nur mit jquery 1.7.2

    Das kannst du testen in dem du oben rechts bei "Frameworks & Extensions" im Auswahlfeld jQuery 1.10.1 auswählst und auf "Run" klickst.


    Und dann muss das so aufgebaut sein:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script src="http://code.jquery.com/jquery-1.7.2.js"></script>
    <title>Slide menu test</title>
     
    <style type="text/css">
    * {
        padding: 0px;
        margin: 0px;
    }
     
    #menubar {
        width:100%;
        background-color:#444;
        color: #fff;
        padding: 10px;
    }
     
    #button {
        cursor:pointer;
    }
     
    #menu, #right {
        display:inline;
    }
     
    #menu li a {
        padding: 10px;
        display: block;
        color: white;
        text-decoration: none;
    }
     
    #right {
        width:100%;
        background-color: #fff;
        z-index: 5;
        position: fixed;
        left: 0px;
        height: 100%;
        -webkit-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
            moz-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
              o-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
                box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
    }
     
    #right p {
        padding: 10px;
    }
     
    #menu {
        float:left;
        width: 350px;
        height: 100%;
    }
     
    #menu li {
        background-color:#444;
        border-bottom: 1px solid #888;
    }
    </style>
    </head>
     
    <body>
    <div id="menu">
            <ul>
                <li><a href="#">Menu Item 1</a></li>
                <li><a href="#">Menu Item 2</a></li>
                <li><a href="#">Menu Item 3</a></li>
                <li><a href="#">Menu Item 4</a></li>
                <li><a href="#">Menu Item 5</a></li>
                <li><a href="#">Menu Item 6</a></li>
                <li><a href="#">Menu Item 7</a></li>
                <li><a href="#">Menu Item 8</a></li>
                <li><a href="#">Menu Item 9</a></li>
                <li><a href="#">Menu Item 10</a></li>
                <li><a href="#">Menu Item 11</a></li>
                <li><a href="#">Menu Item 12</a></li>
            </ul>
        </div>
        <div id="right">
            <div id="menubar">
                <div id="button">
                    Menu
                </div>
            </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
        </div>
    <script type="text/javascript">
    $('#button').toggle(
        function() {
            $('#right').animate({ left: 250 }, 'slow', function() {
                $('#button').html('Close');
            });
        },
        function() {
            $('#right').animate({ left: 0 }, 'slow', function() {
                $('#button').html('Menu');
            });
        }
    );
    </script>
    </body>
    </html>

    getestet funktioniert

    Viel Spaß lächeln


    Zuletzt modifiziert von Ahrtas am 11.01.2014 - 15:32:41
    1 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    Blaubaer Mitglied
    Registriert seit
    24.10.2009
    Beiträge
    331
    Beitragswertungen
    33 Beitragspunkte
    ohje, da hätte ich auch drauf kommen müssen das es nur mit jquery 1.7.2funktioniert.

    Jetzt funktioniert es einwandfrei lächeln
    vielen lieben dank.


    Thema erledigt kann geschlossen werden.
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten