Ankündigung

Einklappen
Keine Ankündigung bisher.

Navigation fixen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Navigation fixen

    Tag,

    ich habe ein Problem ... Ich möchte mmenu für eine Webseite verwenden. Allerdings funktioniert das ganze nicht mehr sobald ich es in den HTML5 <header>-Tag packe. Mit einer normalen CSS-ID funktioniert es. Allerdings auch nur solange der Header nicht fixiert wird und genau das brauche ich.

    Zurzeit sieht die HTML wie folgt aus:
    PHP-Code:
    <!doctype html>
    <
    html>
    <
    head>
    <
    meta charset="UTF-8">
    <
    title>final</title>
    <
    link type="text/css" rel="stylesheet" href="css/style.css" />
    <
    link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />
    <
    script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.mmenu.js"></script>
    <script type="text/javascript">
       $(function() {
          $("nav#menu").mmenu({          
              slidingSubmenus: false 
          });
       });
    </script>
    </head>

    <body>
    <header>
    <div id="menu-btn">
        <a href="#menu"></a>
    </div>
    <nav id="menu">
        <ul>
            <li><a href="#">Introduction</a></li>
            <li><a href="#">Horizontal submenus example</a></li>
            <li class="Selected">
                <a href="#">Vertical submenus example</a>
                <ul>
                    <li><a href="#">First sub-item</a></li>
                    <li>
                        <a href="#">Second sub-item</a>
                        <ul>
                            <li><a href="#">First sub-sub-item</a></li>
                            <li><a href="#">Second sub-sub-item</a></li>
                            <li><a href="#">Third sub-sub-item</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Third sub-item</a></li>
                </ul>
            </li>
            <li><a href="#">Photos in sliding panels</a></li>
            <li><a href="#">Positioning the menu</a></li>
            <li><a href="#">Coloring the menu</a></li>
            <li><a href="#">Advanced example</a></li>
            <li><a href="#">One page scrolling example</a></li>
            <li><a href="#">jQuery Mobile example</a></li>
        </ul>
    </nav>
    </header>
        hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf        hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    
        hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    
        hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    
        hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    
        hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    
        hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    
        hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    
        hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    
        hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    
        hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    
        hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    hlsaiuhflhdslfhuasdl<br><br>sdfadsfasdf    
    </body>
    </html> 
    PHP-Code:
    /* #################################################################### */
    /* HTML TAG */
    /* #################################################################### */

    htmlbody width:100%; height:100%; padding:0margin:0font-family'Lato'sans-seriffont-weight300
    background:url(../images/header_bg.pngno-repeat center centerposition:relative; -webkit-text-size-adjustnone;}

    /* #################################################################### */
    /* Navigation */
    /* #################################################################### */

    header width:100%; height:50pxbackground:#111; top:0; left:0; position:fixed; z-index:1; border-bottom:thin solid #5a595c;}
    header #menu-btn a, .menu-btn a { background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC) no-repeat center center transparent; display: block; 
    width40pxheight40pxtop5pxleft10pxpositionabsolutez-index:3;}
        
        @
    media screen and (min-width1200px) {
            
    header #menu-btn, menu-btn { display:none;}
        

    PHP-Code:
    /*
        jQuery.mmenu CSS
    */
    .mm-page,
    .
    mm-fixed-top,
    .
    mm-fixed-bottom,
    .
    mm-menu.mm-horizontal > .mm-panel {
      -
    webkit-transitionnone 0.4s ease;
      -
    moz-transitionnone 0.4s ease;
      -
    ms-transitionnone 0.4s ease;
      -
    o-transitionnone 0.4s ease;
      
    transitionnone 0.4s ease;
      -
    webkit-transition-propertytoprightbottomleftborder;
      -
    moz-transition-propertytoprightbottomleftborder;
      -
    ms-transition-propertytoprightbottomleftborder;
      -
    o-transition-propertytoprightbottomleftborder;
      
    transition-propertytoprightbottomleftborder; }

    html.mm-opened .mm-page,
    html.mm-opened #mm-blocker {
      
    left0;
      
    top0;
      
    margin0;
      
    border0px solid rgba(0000); }

    html.mm-opening .mm-page,
    html.mm-opening #mm-blocker {
      
    border0px solid rgba(1001001000); }

    .
    mm-menu .mm-hidden {
      
    displaynone; }

    .
    mm-fixed-top,
    .
    mm-fixed-bottom {
      
    positionfixed;
      
    left0; }

    .
    mm-fixed-top {
      
    top0; }

    .
    mm-fixed-bottom {
      
    bottom0; }

    html.mm-opened .mm-page,
    .
    mm-menu > .mm-panel {
      -
    webkit-box-sizingborder-box;
      -
    moz-box-sizingborder-box;
      -
    ms-box-sizingborder-box;
      -
    o-box-sizingborder-box;
      
    box-sizingborder-box; }

    html.mm-opened {
      
    overflow-xhidden;
      
    positionrelative; }

    html.mm-opened .mm-page {
      
    positionrelative; }

    html.mm-background .mm-page {
      
    backgroundinherit; }

    #mm-blocker {
      
    backgroundurl(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==) transparent;
      
    displaynone;
      
    width100%;
      
    height100%;
      
    positionfixed;
      
    z-index999999; }

    html.mm-opened #mm-blocker,
    html.mm-blocking #mm-blocker {
      
    displayblock; }

    .
    mm-menu.mm-current {
      
    displayblock; }

    .
    mm-menu {
      
    backgroundinherit;
      
    displaynone;
      
    overflowhidden;
      
    height100%;
      
    padding0;
      
    positionfixed;
      
    left0;
      
    top0;
      
    z-index0; }
      .
    mm-menu > .mm-panel {
        
    backgroundinherit;
        -
    webkit-overflow-scrollingtouch;
        
    overflowscroll;
        
    overflow-xhidden;
        
    overflow-yauto;
        
    width100%;
        
    height100%;
        
    padding20px;
        
    positionabsolute;
        
    top0;
        
    left100%;
        
    z-index0; }
        .
    mm-menu > .mm-panel.mm-opened {
          
    left0%; }
        .
    mm-menu > .mm-panel.mm-subopened {
          
    left: -40%; }
        .
    mm-menu > .mm-panel.mm-highest {
          
    z-index1; }
        .
    mm-menu > .mm-panel.mm-hidden {
          
    displayblock;
          
    visibilityhidden; }

    .
    mm-menu .mm-list {
      
    padding20px 0; }
    .
    mm-menu > .mm-list {
      
    padding20px 0 40px 0; }

    .
    mm-panel > .mm-list {
      
    margin-left: -20px;
      
    margin-right: -20px; }
      .
    mm-panel > .mm-list:first-child {
        
    padding-top0; }

    .
    mm-list,
    .
    mm-list > li {
      list-
    stylenone;
      
    displayblock;
      
    padding0;
      
    margin0; }

    .
    mm-list {
      
    fontinherit;
      
    font-size14px; }
      .
    mm-list a,
      .
    mm-list a:hover {
        
    text-decorationnone; }
      .
    mm-list > li {
        
    positionrelative; }
        .
    mm-list > li a,
        .
    mm-list > li span {
          
    text-overflowellipsis;
          
    white-spacenowrap;
          
    overflowhidden;
          
    colorinherit;
          
    line-height20px;
          
    displayblock;
          
    padding10px 10px 10px 20px;
          
    margin0; }
      .
    mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-noresults):after {
        
    content'';
        
    border-bottom-width1px;
        
    border-bottom-stylesolid;
        
    displayblock;
        
    width100%;
        
    positionabsolute;
        
    bottom0;
        
    left0; }
      .
    mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-noresults):after {
        
    widthauto;
        
    margin-left20px;
        
    positionrelative;
        
    leftauto; }
      .
    mm-list a.mm-subopen {
        
    width40px;
        
    height100%;
        
    padding0;
        
    positionabsolute;
        
    right0;
        
    top0;
        
    z-index2; }
        .
    mm-list a.mm-subopen:before {
          
    content'';
          
    border-left-width1px;
          
    border-left-stylesolid;
          
    displayblock;
          
    height100%;
          
    positionabsolute;
          
    left0;
          
    top0; }
        .
    mm-list a.mm-subopen.mm-fullsubopen {
          
    width100%; }
          .
    mm-list a.mm-subopen.mm-fullsubopen:before {
            
    border-leftnone; }
        .
    mm-list a.mm-subopen a,
        .
    mm-list a.mm-subopen span {
          
    padding-right5px;
          
    margin-right40px; }
      .
    mm-list > li.mm-selected a.mm-subopen {
        
    backgroundtransparent; }
      .
    mm-list > li.mm-selected a.mm-fullsubopen a,
      .
    mm-list > li.mm-selected a.mm-fullsubopen span {
        
    padding-right45px;
        
    margin-right0; }
      .
    mm-list a.mm-subclose {
        
    text-indent20px;
        
    padding-top30px;
        
    margin-top: -20px; }
      .
    mm-list > li.mm-label {
        
    text-overflowellipsis;
        
    white-spacenowrap;
        
    overflowhidden;
        
    font-size10px;
        
    text-transformuppercase;
        
    text-indent20px;
        
    line-height25px;
        
    padding-right5px; }
      .
    mm-list > li.mm-spacer {
        
    padding-top40px; }
        .
    mm-list > li.mm-spacer.mm-label {
          
    padding-top25px; }
      .
    mm-list a.mm-subopen:after,
      .
    mm-list a.mm-subclose:before {
        
    content'';
        
    border2px solid transparent;
        
    displayblock;
        
    width7px;
        
    height7px;
        
    margin-bottom: -5px;
        
    positionabsolute;
        
    bottom50%;
        -
    webkit-transformrotate(-45deg);
        -
    moz-transformrotate(-45deg);
        -
    ms-transformrotate(-45deg);
        -
    o-transformrotate(-45deg);
        
    transformrotate(-45deg); }
      .
    mm-list a.mm-subopen:after {
        
    border-topnone;
        
    border-leftnone;
        
    right18px; }
      .
    mm-list a.mm-subclose:before {
        
    border-rightnone;
        
    border-bottomnone;
        
    margin-bottom: -15px;
        
    left22px; }

    .
    mm-menu.mm-vertical .mm-list .mm-panel {
      
    displaynone;
      
    padding10px 0 10px 10px; }
      .
    mm-menu.mm-vertical .mm-list .mm-panel li:last-child:after {
        
    border-colortransparent; }
    .
    mm-menu.mm-vertical .mm-list li.mm-opened > .mm-panel {
      
    displayblock; }
    .
    mm-menu.mm-vertical .mm-list > li.mm-opened a.mm-subopen {
      
    height40px; }
      .
    mm-menu.mm-vertical .mm-list > li.mm-opened a.mm-subopen:after {
        -
    webkit-transformrotate(45deg);
        -
    moz-transformrotate(45deg);
        -
    ms-transformrotate(45deg);
        -
    o-transformrotate(45deg);
        
    transformrotate(45deg);
        
    top16px;
        
    right16px; }

    html.mm-opened .mm-page {
      
    box-shadow0 0 20px rgba(0000.5); }

    .
    mm-ismenu {
      
    background#333333;
      
    colorrgba(2552552550.6); }

    .
    mm-menu .mm-list > li:after {
      
    border-colorrgba(0000.15); }
    .
    mm-menu .mm-list > li a.mm-subclose {
      
    backgroundrgba(0000.1);
      
    colorrgba(2552552550.3); }
    .
    mm-menu .mm-list > li a.mm-subopen:after, .mm-menu .mm-list > li a.mm-subclose:before {
      
    border-colorrgba(2552552550.3); }
    .
    mm-menu .mm-list > li a.mm-subopen:before {
      
    border-colorrgba(0000.15); }
    .
    mm-menu .mm-list > li.mm-selected a:not(.mm-subopen),
    .
    mm-menu .mm-list > li.mm-selected span {
      
    backgroundrgba(0000.1); }
    .
    mm-menu .mm-list > li.mm-label {
      
    backgroundrgba(2552552550.05); }
    .
    mm-menu.mm-vertical .mm-list li.mm-opened a.mm-subopen,
    .
    mm-menu.mm-vertical .mm-list li.mm-opened ul {
      
    backgroundrgba(2552552550.05); }

    html.mm-opening .mm-page,
    html.mm-opening #mm-blocker,
    html.mm-opening .mm-fixed-top,
    html.mm-opening .mm-fixed-bottom {
      
    left80%; }

    .
    mm-menu {
      
    width80%; }

    @
    media all and (max-width175px) {
      .
    mm-menu {
        
    width140px; }

      
    html.mm-opening .mm-page,
      
    html.mm-opening #mm-blocker,
      
    html.mm-opening .mm-fixed-top,
      
    html.mm-opening .mm-fixed-bottom {
        
    left140px; } }
    @
    media all and (min-width550px) {
      .
    mm-menu {
        
    width440px; }

      
    html.mm-opening .mm-page,
      
    html.mm-opening #mm-blocker,
      
    html.mm-opening .mm-fixed-top,
      
    html.mm-opening .mm-fixed-bottom {
        
    left440px; } } 
    PHP-Code:
    /*    
     * jQuery mmenu v4.2.7
     * @requires jQuery 1.7.0 or later
     *
     * mmenu.frebsite.nl
     *    
     * Copyright (c) Fred Heusschen
     * www.frebsite.nl
     *
     * Dual licensed under the MIT and GPL licenses.
     * http://en.wikipedia.org/wiki/MIT_License
     * http://en.wikipedia.org/wiki/GNU_General_Public_License
     */


    (function( $ ) {

        var 
    _PLUGIN_    'mmenu',
            
    _VERSION_    '4.2.7';


        
    //    Plugin already excists
        
    if ( $[ _PLUGIN_ ] )
        {
            return;
        }

        
    //    Global variables
        
    var glbl = {
            
    $wndwnull,
            
    $htmlnull,
            
    $bodynull,
            
    $pagenull,
            
    $blcknull,

            
    $allMenusnull
        
    };

        var 
    _c = {}, _d = {}, _e = {},
            
    _serialnr     0,
            
    _strollTop    0;


        $[ 
    _PLUGIN_ ] = function( $menuoptsconf )
        {
            
    glbl.$allMenus glbl.$allMenus.add$menu );

            
    this.$menu $menu;
            
    this.opts  opts
            this
    .conf  conf;

            
    this.opened        false;
            
    this.serialnr    _serialnr++;

            
    this._init();

            return 
    this;
        };

        $[ 
    _PLUGIN_ ].prototype = {

            
    open: function()
            {
                if ( 
    this.opened )
                {
                    return 
    false;
                }
                var 
    that this;

                
    this._openSetup();

                
    //    For some reason, some browsers need a (pretty long) delay before the .mm-opened class sets the needed styles
                //    Without it, the page isn't animated
                
    setTimeout(
                    function()
                    {
                        
    that._openFinish();
                    }, 
    50
                
    );

                return 
    'open';
            },
            
    _openSetup: function()
            {
                
    _strollTop glbl.$wndw.scrollTop() || 0;

                
    //    Set opened
                
    this.$menu.addClass_c.current );

                
    //    Close others
                
    glbl.$allMenus.notthis.$menu ).trigger_e.close );

                
    //    Store style and position
                
    glbl.$page.data_d.styleglbl.$page.attr'style' ) || '' );

                
    //    Trigger window-resize to measure height
                
    glbl.$wndw.trigger_e.resize, [ true ] );

                
    //    Add options
                
    if ( this.opts.modal )
                {
                    
    glbl.$html.addClass_c.modal );
                }
                if ( 
    this.opts.moveBackground )
                {
                    
    glbl.$html.addClass_c.background );
                }
                if ( 
    this.opts.position != 'left' )
                {
                    
    glbl.$html.addClass_c.mmthis.opts.position ) );
                }
                if ( 
    this.opts.zposition != 'back' )
                {
                    
    glbl.$html.addClass_c.mmthis.opts.zposition ) );
                }
                if ( 
    this.opts.classes )
                {
                    
    glbl.$html.addClassthis.opts.classes );
                }

                
    //    Open
                
    glbl.$html.addClass_c.opened );
                
    this.$menu.addClass_c.opened );
            },
            
    _openFinish: function()
            {
                var 
    that this;

                
    //    Callback
                
    transitionendglbl.$page,
                    function()
                    {
                        
    that.opened true;
                        
    that.$menu.trigger_e.opened );
                    }, 
    this.conf.transitionDuration
                
    );

                
    //    Opening
                
    glbl.$html.addClass_c.opening );
                
    this.$menu.trigger_e.opening );
            },
            
    close: function()
            {
                var 
    that this;

                if ( !
    this.opened )
                {
                    return 
    false;
                }

                
    //    Callback
                
    transitionendglbl.$page,
                    function()
                    {
                        
    that.$menu
                            
    .removeClass_c.current )
                            .
    removeClass_c.opened );

                        
    glbl.$html
                            
    .removeClass_c.opened )
                            .
    removeClass_c.modal )
                            .
    removeClass_c.background )
                            .
    removeClass_c.mmthat.opts.position ) )
                            .
    removeClass_c.mmthat.opts.zposition ) );

                        if ( 
    that.opts.classes )
                        {
                            
    glbl.$html.removeClassthat.opts.classes );
                        }

                        
    //    Restore style and position
                        
    glbl.$page.attr'style'glbl.$page.data_d.style ) );

                        
    that.opened false;
                        
    that.$menu.trigger_e.closed );
        
                    }, 
    this.conf.transitionDuration
                
    );

                
    //    Closing
                
    glbl.$html.removeClass_c.opening );
                
    this.$menu.trigger_e.closing );
        
                return 
    'close';
            },
        
            
    _init: function()
            {
                
    this.opts extendOptionsthis.optsthis.confthis.$menu );
                
    this.direction = ( this.opts.slidingSubmenus ) ? 'horizontal' 'vertical';
        
                
    //    INIT PAGE & MENU
                
    this._initPageglbl.$page );
                
    this._initMenu();
                
    this._initBlocker();
                
    this._initPanles();
                
    this._initLinks();
                
    this._initOpenClose();
                
    this._bindCustomEvents();

                if ( $[ 
    _PLUGIN_ ].addons )
                {
                    for ( var 
    0< $[ _PLUGIN_ ].addons.lengtha++ )
                    {
                        if ( 
    typeof this'_addon_' + $[ _PLUGIN_ ].addons] ] == 'function' )
                        {
                            
    this'_addon_' + $[ _PLUGIN_ ].addons] ]();
                        }
                    }
                }
            },

            
    _bindCustomEvents: function()
            {
                var 
    that this;

                
    this.$menu
                    
    .off_e.open ' ' _e.close ' ' _e.setPage' ' _e.update )
                    .
    on_e.open ' ' _e.close ' ' _e.setPage' ' _e.update,
                        function( 
    )
                        {
                            
    e.stopPropagation();
                        }
                    );

                
    //    Menu-events
                
    this.$menu
                    
    .on_e.open,
                        function( 
    )
                        {
                            if ( $(
    this).hasClass_c.current ) )
                            {
                                
    e.stopImmediatePropagation();
                                return 
    false;
                            }
                            return 
    that.open();
                        }
                    )
                    .
    on_e.close,
                        function( 
    )
                        {
                            if ( !$(
    this).hasClass_c.current ) )
                            {
                                
    e.stopImmediatePropagation();
                                return 
    false;
                            }
                            return 
    that.close();
                        }
                    )
                    .
    on_e.setPage,
                        function( 
    e$p )
                        {
                            
    that._initPage$p );
                            
    that._initOpenClose();
                        }
                    );

                
    //    Panel-events
                
    var $panels this.$menu.findthis.opts.isMenu && this.direction != 'horizontal' 'ul, ol' '.' _c.panel );
                
    $panels
                    
    .off_e.toggle ' ' _e.open ' ' _e.close )
                    .
    on_e.toggle ' ' _e.open ' ' _e.close,
                        function( 
    )
                        {
                            
    e.stopPropagation();
                        }
                    );

                if ( 
    this.direction == 'horizontal' )
                {
                    
    $panels
                        
    .on_e.open,
                            function( 
    )
                            {
                                return 
    openSubmenuHorizontal( $(this), that.$menu );
                            }
                        );
                }
                else
                {
                    
    $panels
                        
    .on_e.toggle,
                            function( 
    )
                            {
                                var 
    $t = $(this);
                                return 
    $t.triggerHandler$t.parent().hasClass_c.opened ) ? _e.close _e.open );
                            }
                        )
                        .
    on_e.open,
                            function( 
    )
                            {
                                $(
    this).parent().addClass_c.opened );
                                return 
    'open';
                            }
                        )
                        .
    on_e.close,
                            function( 
    )
                            {
                                $(
    this).parent().removeClass_c.opened );
                                return 
    'close';
                            }
                        );
                }
            },
            
            
    _initBlocker: function()
            {
                var 
    that this;

                if ( !
    glbl.$blck )
                {
                    
    glbl.$blck = $( '<div id="' _c.blocker '" />' )
                        .
    appendToglbl.$body );
                }

                
    glbl.$blck
                    
    .off_e.touchstart )
                    .
    on_e.touchstart,
                        function( 
    )
                        {
                            
    e.preventDefault();
                            
    e.stopPropagation();
                            
    glbl.$blck.trigger_e.mousedown );
                        }
                    )
                    .
    on_e.mousedown,
                        function( 
    )
                        {
                            
    e.preventDefault();
                            if ( !
    glbl.$html.hasClass_c.modal ) )
                            {
                                
    that.$menu.trigger_e.close );
                            }
                        }
                    );
            },
            
    _initPage: function( $p )
            {
                if ( !
    $p )
                {
                    
    $p = $(this.conf.pageSelectorglbl.$body);
                    if ( 
    $p.length )
                    {
                        $[ 
    _PLUGIN_ ].debug'Multiple nodes found for the page-node, all nodes are wrapped in one <' this.conf.pageNodetype '>.' );
                        
    $p $p.wrapAll'<' this.conf.pageNodetype ' />' ).parent();
                    }
                }
        
                
    $p.addClass_c.page );
                
    glbl.$page $p;
            },
            
    _initMenu: function()
            {
                var 
    that this;

                
    //    Clone if needed
                
    if ( this.conf.clone )
                {
                    
    this.$menu this.$menu.clone( true );
                    
    this.$menu.addthis.$menu.find'*' ) ).filter'[id]' ).each(
                        function()
                        {
                            $(
    this).attr'id'_c.mm( $(this).attr'id' ) ) );
                        }
                    );
                }

                
    //    Strip whitespace
                
    this.$menu.contents().each(
                    function()
                    {
                        if ( $(
    this)[ ].nodeType == )
                        {
                            $(
    this).remove();
                        }
                    }
                );

                
    //    Inject to body
                
    this.$menuthis.conf.menuInjectMethod 'To' ]( this.conf.menuWrapperSelector )
                    .
    addClass_c.menu );

                
    //    Add direction class
                
    this.$menu.addClass_c.mmthis.direction ) );

                
    //    Add options classes
                
    if ( this.opts.classes )
                {
                    
    this.$menu.addClassthis.opts.classes );
                }
                if ( 
    this.opts.isMenu )
                {
                    
    this.$menu.addClass_c.ismenu );
                }
                if ( 
    this.opts.position != 'left' )
                {
                    
    this.$menu.addClass_c.mmthis.opts.position ) );
                }
                if ( 
    this.opts.zposition != 'back' )
                {
                    
    this.$menu.addClass_c.mmthis.opts.zposition ) );
                }
            },
            
    _initPanles: function()
            {
                var 
    that this;


                
    //    Refactor List class
                
    this.__refactorClass( $('.' this.conf.listClassthis.$menu), 'list' );

                
    //    Add List class
                
    if ( this.opts.isMenu )
                {
                    $(
    'ul, ol'this.$menu)
                        .
    not'.mm-nolist' )
                        .
    addClass_c.list );
                }

                var 
    $lis = $('.' _c.list + ' > li'this.$menu);

                
    //    Refactor Selected class
                
    this.__refactorClass$lis.filter'.' this.conf.selectedClass ), 'selected' );

                
    //    Refactor Label class
                
    this.__refactorClass$lis.filter'.' this.conf.labelClass ), 'label' );

                
    //    Refactor Spacer class
                
    this.__refactorClass$lis.filter'.' this.conf.spacerClass ), 'spacer' );

                
    //    setSelected-event
                
    $lis
                    
    .off_e.setSelected )
                    .
    on_e.setSelected,
                        function( 
    eselected )
                        {
                            
    e.stopPropagation();
        
                            
    $lis.removeClass_c.selected );
                            if ( 
    typeof selected != 'boolean' )
                            {
                                
    selected true;
                            }
                            if ( 
    selected )
                            {
                                $(
    this).addClass_c.selected );
                            }
                        }
                    );

                
    //    Refactor Panel class
                
    this.__refactorClass( $('.' this.conf.panelClassthis.$menu), 'panel' );

                
    //    Add Panel class
                
    this.$menu
                    
    .children()
                    .
    filterthis.conf.panelNodetype )
                    .
    addthis.$menu.find'.' _c.list ).children().children().filterthis.conf.panelNodetype ) )
                    .
    addClass_c.panel );

                var 
    $panels = $('.' _c.panelthis.$menu);

                
    //    Add an ID to all panels
                
    $panels
                    
    .each(
                        function( 
    )
                        {
                            var 
    $t = $(this),
                                
    id $t.attr'id' ) || _c.mm'm' that.serialnr '-p' );

                            
    $t.attr'id'id );
                        }
                );

                
    //    Add open and close links to menu items
                
    $panels
                    
    .find'.' _c.panel )
                    .
    each(
                        function( 
    )
                        {
                            var 
    $t = $(this),
                                
    $u $t.is'ul, ol' ) ? $t $t.find'ul ,ol' ).first(),
                                
    $l $t.parent(),
                                
    $a $l.find'> a, > span' ),
                                
    $p $l.closest'.' _c.panel );

                            
    $t.data_d.parent$l );

                            if ( 
    $l.parent().is'.' _c.list ) )
                            {
                                var 
    $btn = $( '<a class="' _c.subopen '" href="#' $t.attr'id' ) + '" />' ).insertBefore$a );
                                if ( !
    $a.is'a' ) )
                                {
                                    
    $btn.addClass_c.fullsubopen );
                                }
                                if ( 
    that.direction == 'horizontal' )
                                {
                                    
    $u.prepend'<li class="' _c.subtitle '"><a class="' _c.subclose '" href="#' $p.attr'id' ) + '">' $a.text() + '</a></li>' );
                                }
                            }
                        }
                    );

                
    //    Link anchors to panels
                
    var evt this.direction == 'horizontal' _e.open _e.toggle;
                
    $panels
                    
    .each(
                        function( 
    )
                        {
                            var 
    $opening = $(this),
                                
    id $opening.attr'id' );

                            $(
    'a[href="#' id '"]'that.$menu)
                                .
    off_e.click )
                                .
    on_e.click,
                                    function( 
    )
                                    {
                                        
    e.preventDefault();
                                        
    $opening.triggerevt );
                                    }
                                );
                        }
                );

                if ( 
    this.direction == 'horizontal' )
                {
                    
    //    Add opened-classes
                    
    var $selected = $('.' _c.list + ' > li.' _c.selectedthis.$menu);
                    
    $selected
                        
    .parents'li' )
                        .
    removeClass_c.selected )
                        .
    end()
                        .
    add$selected.parents'li' ) )
                        .
    each(
                            function()
                            {
                                var 
    $t = $(this),
                                    
    $u $t.find'> .' _c.panel );

                                if ( 
    $u.length )
                                {
                                    
    $t.parents'.' _c.panel ).addClass_c.subopened );
                                    
    $u.addClass_c.opened );
                                }
                            }
                        )
                        .
    closest'.' _c.panel )
                        .
    addClass_c.opened )
                        .
    parents'.' _c.panel )
                        .
    addClass_c.subopened );
                }
                else
                {
                    
    //    Replace Selected-class with opened-class in parents from .Selected
                    
    var $selected = $('li.' _c.selectedthis.$menu);
                    
    $selected
                        
    .parents'li' )
                        .
    removeClass_c.selected )
                        .
    end()
                        .
    add$selected.parents'li' ) )
                        .
    addClass_c.opened );
                }

                
    //    Set current opened
                
    var $current $panels.filter'.' _c.opened );
                if ( !
    $current.length )
                {
                    
    $current $panels.first();
                }
                
    $current
                    
    .addClass_c.opened )
                    .
    last()
                    .
    addClass_c.current );

                
    //    Rearrange markup
                
    if ( this.direction == 'horizontal' )
                {
                    
    $panels.find'.' _c.panel ).appendTothis.$menu );
                }
            },
            
    _initLinks: function()
            {
                var 
    that this;
        
                $(
    '.' _c.list + ' > li > a'this.$menu)
                    .
    not'.' _c.subopen )
                    .
    not'.' _c.subclose )
                    .
    not'[rel="external"]' )
                    .
    not'[target="_blank"]' )
                    .
    off_e.click )
                    .
    on_e.click,
                        function( 
    )
                        {
                            var 
    $t = $(this),
                                
    href $t.attr'href' );

                            
    //    Set selected item
                            
    if ( that.__valueOrFnthat.opts.onClick.setSelected$t ) )
                            {
                                
    $t.parent().trigger_e.setSelected );
                            }

                            
    //    Prevent default / don't follow link. Default: false
                            
    var preventDefault that.__valueOrFnthat.opts.onClick.preventDefault$thref.slice0) == '#' );
                            if ( 
    preventDefault )
                            {
                                
    e.preventDefault();
                            }

                            
    //    Block UI. Default: false if preventDefault, true otherwise
                            
    if ( that.__valueOrFnthat.opts.onClick.blockUI$t, !preventDefault ) )
                            {
                                
    glbl.$html.addClass_c.blocking );
                            }

                            
    //    Close menu. Default: true if preventDefault, false otherwise
                            
    if ( that.__valueOrFnthat.opts.onClick.close$tpreventDefault ) )
                            {
                                
    that.$menu.triggerHandler_e.close );
                            }
                        }
                    );
            },
            
    _initOpenClose: function()
            {
                var 
    that this;

                
    //    Open menu
                
    var id this.$menu.attr'id' );
                if ( 
    id && id.length )
                {
                    if ( 
    this.conf.clone )
                    {
                        
    id _c.ummid );
                    }

                    $(
    'a[href="#' id '"]')
                        .
    off_e.click )
                        .
    on_e.click,
                            function( 
    )
                            {
                                
    e.preventDefault();
                                
    that.$menu.trigger_e.open );
                            }
                        );
                }

                
    //    Close menu
                
    var id glbl.$page.attr'id' );
                if ( 
    id && id.length )
                {
                    $(
    'a[href="#' id '"]')
                        .
    on_e.click,
                            function( 
    )
                            {
                                
    e.preventDefault();
                                
    that.$menu.trigger_e.close );
                            }
                        );
                }
            },
            
            
    __valueOrFn: function( o$e)
            {
                if ( 
    typeof o == 'function' )
                {
                    return 
    o.call$e] );
                }
                if ( 
    typeof o == 'undefined' && typeof d != 'undefined' )
                {
                    return 
    d;
                }
                return 
    o;
            },
            
            
    __refactorClass: function( $e)
            {
                
    $e.removeClassthis.conf'Class' ] ).addClass_c] );
            }
        };


        $.
    fn_PLUGIN_ ] = function( optsconf )
        {
            
    //    First time plugin is fired
            
    if ( !glbl.$wndw )
            {
                
    _initPlugin();
            }

            
    //    Extend options
            
    opts extendOptionsoptsconf );
            
    conf extendConfigurationconf );

            return 
    this.each(
                function()
                {
                    var 
    $menu = $(this);
                    if ( 
    $menu.data_PLUGIN_ ) )
                    {
                        return;
                    }
                    
    $menu.data_PLUGIN_, new $[ _PLUGIN_ ]( $menuoptsconf ) );
                }
            );
        };

        $[ 
    _PLUGIN_ ].version _VERSION_;
        
        $[ 
    _PLUGIN_ ].defaults = {
            
    position        'left',
            
    zposition        'back',
            
    moveBackground    true,
            
    slidingSubmenus    true,
            
    modal            false,
            
    classes            '',
            
    onClick            : {
    //            close                : true,
    //            blockUI                : null,
    //            preventDefault        : null,
                
    setSelected            true
            
    }
        };
        $[ 
    _PLUGIN_ ].configuration = {
            
    panelClass            'Panel',
            
    listClass            'List',
            
    selectedClass        'Selected',
            
    labelClass            'Label',
            
    spacerClass            'Spacer',
            
    pageNodetype        'div',
            
    panelNodetype        'ul, ol, div',
            
    pageSelector        null,
            
    menuWrapperSelector    'body',
            
    menuInjectMethod    'prepend',
            
    transitionDuration    400
        
    };



        
    /*
            SUPPORT
        */
        
    (function() {

            var 
    wd window.document,
                
    ua window.navigator.userAgent,
                
    ds document.createElement'div' ).style;

            var 
    _touch                 'ontouchstart' in wd,
                
    _overflowscrolling    'WebkitOverflowScrolling' in wd.documentElement.style,
                
    _oldAndroidBrowser    = (function() {
                    if ( 
    ua.indexOf'Android' ) >= )
                    {
                        return 
    2.4 parseFloatua.sliceua.indexOf'Android' ) +) );
                    }
                    return 
    false;
                })();

            $[ 
    _PLUGIN_ ].support = {

                
    touch_touch,
                
    oldAndroidBrowser_oldAndroidBrowser,
                
    overflowscrolling: (function() {
                    if ( !
    _touch )
                    {
                        return 
    true;
                    }
                    if ( 
    _overflowscrolling )
                    {
                        return 
    true;
                    }
                    if ( 
    _oldAndroidBrowser )
                    {
                        return 
    false;
                    }
                    return 
    true;
                })()
            };
        })();


        
    /*
            DEBUG
        */
        
    $[ _PLUGIN_ ].debug = function( msg ) {};
        $[ 
    _PLUGIN_ ].deprecated = function( deprrepl )
        {
            if ( 
    typeof console != 'undefined' && typeof console.warn != 'undefined' )
            {
                
    console.warn'MMENU: ' depr ' is deprecated, use ' repl ' instead.' );
            }
        };


        function 
    extendOptionsoc$m )
        {

            if ( 
    $m )
            {
                if ( 
    typeof o != 'object' )
                {
                    
    = {};
                }
                if ( 
    typeof o.isMenu != 'boolean' )
                {
                    var 
    $c $m.children();
                    
    o.isMenu = ( $c.length == && $c.isc.panelNodetype ) );
                }
                return 
    o;
            }
            
            
    //    Extend from defaults
            
    = $.extendtrue, {}, $[ _PLUGIN_ ].defaults);


            
    //    DEPRECATED
            
    if ( o.position == 'top' || o.position == 'bottom' )
            {
                if ( 
    o.zposition == 'back' || o.zposition == 'next' )
                {
                    $[ 
    _PLUGIN_ ].deprecated'Using position "' o.position '" in combination with zposition "' o.zposition '"''zposition "front"' );
                    
    o.zposition 'front';
                }
            }
            
    //    /DEPRECATED

            
    return o;
        }
        function 
    extendConfiguration)
        {
            
    = $.extendtrue, {}, $[ _PLUGIN_ ].configuration)

            
    //    Set pageSelector
            
    if ( typeof c.pageSelector != 'string' )
            {
                
    c.pageSelector '> ' c.pageNodetype;
            }

            
    //    Restrict injectMethod
            
    if ( c.menuInjectMethod != 'append' )
            {
                
    c.menuInjectMethod 'prepend';
            }

            return 
    c;
        }

        function 
    _initPlugin()
        {
            
    glbl.$wndw = $(window);
            
    glbl.$html = $('html');
            
    glbl.$body = $('body');
            
            
    glbl.$allMenus = $();


            
    //    Classnames, Datanames, Eventnames
            
    $.each( [ _c_d_e ],
                function( 
    i)
                {
                    
    o.add = function( )
                    {
                        
    c.split' ' );
                        for ( var 
    d in c )
                        {
                            
    oc] ] = o.mmc] );
                        }
                    };
                }
            );

            
    //    Classnames
            
    _c.mm = function( ) { return 'mm-' c; };
            
    _c.add'menu ismenu panel list subtitle selected label spacer current highest hidden page blocker modal background opened opening subopened subopen fullsubopen subclose' );
            
    _c.umm = function( )
            {
                if ( 
    c.slice0) == 'mm-' )
                {
                    
    c.slice);
                }
                return 
    c;
            };

            
    //    Datanames
            
    _d.mm = function( ) { return 'mm-' d; };
            
    _d.add'parent style' );

            
    //    Eventnames
            
    _e.mm = function( ) { return '.mm'; };
            
    _e.add'toggle open opening opened close closing closed update setPage setSelected transitionend webkitTransitionEnd mousedown touchstart mouseup touchend scroll touchmove click keydown keyup resize' );


            
    //    Prevent tabbing
            
    glbl.$wndw
                
    .on_e.keydown,
                    function( 
    )
                    {
                        if ( 
    glbl.$html.hasClass_c.opened ) )
                        {
                            if ( 
    e.keyCode == )
                            {
                                
    e.preventDefault();
                                return 
    false;
                            }
                        }
                    }
                );

            
    //    Set page min-height to window height
            
    var _h 0;
            
    glbl.$wndw
                
    .on_e.resize,
                    function( 
    eforce )
                    {
                        if ( 
    force || glbl.$html.hasClass_c.opened ) )
                        {
                            var 
    nh glbl.$wndw.height();
                            if ( 
    force || nh != _h )
                            {
                                
    _h nh;
                                
    glbl.$page.css'minHeight'nh );
                            }
                        }
                    }
                );


            $[ 
    _PLUGIN_ ]._c _c;
            $[ 
    _PLUGIN_ ]._d _d;
            $[ 
    _PLUGIN_ ]._e _e;

            $[ 
    _PLUGIN_ ].glbl glbl;
        }

        function 
    openSubmenuHorizontal$opening$m )
        {
            if ( 
    $opening.hasClass_c.current ) )
            {
                return 
    false;
            } 

            var 
    $panels = $('.' _c.panel$m),
                
    $current $panels.filter'.' _c.current );
            
            
    $panels
                
    .removeClass_c.highest )
                .
    removeClass_c.current )
                .
    not$opening )
                .
    not$current )
                .
    addClass_c.hidden );

            if ( 
    $opening.hasClass_c.opened ) )
            {
                
    $current
                    
    .addClass_c.highest )
                    .
    removeClass_c.opened )
                    .
    removeClass_c.subopened );
            }
            else
            {
                
    $opening
                    
    .addClass_c.highest );

                
    $current
                    
    .addClass_c.subopened );
            }

            
    $opening
                
    .removeClass_c.hidden )
                .
    removeClass_c.subopened )
                .
    addClass_c.current )
                .
    addClass_c.opened );

            return 
    'open';
        }

        function 
    transitionend$efnduration )
        {
            var 
    _ended false,
                
    _fn = function()
                {
                    if ( !
    _ended )
                    {
                        
    fn.call$e] );
                    }
                    
    _ended true;
                };

            
    $e.one_e.transitionend_fn );
            
    $e.one_e.webkitTransitionEnd_fn );
            
    setTimeout_fnduration 1.1 );
        }

    })( 
    jQuery ); 
    Die Daten könnt ihr euch oben ziehen. Ziel ist wie gesagt einen Header mit HTML <header>-Tag welcher fixed ist. Der Button natürlich darin und einwandfreie Funktion. Jemand eine Idee?

    Später soll es etwa aussehen wie hier (Browserfenster verkleinern). Vielleicht kann es jemand auch von dort extrahieren, denn dort scheint es ja zu funktionieren. Würde auch gerne etwas im Tausch für den Aufwand anbieten!

    UPDATE:
    Ich habe es inzwischen geschafft, dass überhaupt etwas funktioniert wenn es sich im <header>-Tag befindet. Fehler sind nun noch folgende:
    -Icon verschiebt sich nicht mit und wird aus unbekannten Gründen ausgeblendet wenn die Navi offen ist.
    -Navi öffnet sich sofort und ohne sanftes einschieben (in der Standard Version funktioniert dies)
    -Content verschied sich nicht nach rechts, sondern Navi steht darüber. Content ist auch nicht anwählbar.

    Durch Experimente mit "z-index" konnte ich bis hier her kommen, aber weiter funktioniert es leider nicht. Wäre nett wenn sich jemand das näher ansieht.

Lädt...
X