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:
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.
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 */
/* #################################################################### */
html, body { width:100%; height:100%; padding:0; margin:0; font-family: 'Lato', sans-serif; font-weight: 300;
background:url(../images/header_bg.png) no-repeat center center; position:relative; -webkit-text-size-adjust: none;}
/* #################################################################### */
/* Navigation */
/* #################################################################### */
header { width:100%; height:50px; background:#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;
width: 40px; height: 40px; top: 5px; left: 10px; position: absolute; z-index:3;}
@media screen and (min-width: 1200px) {
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-transition: none 0.4s ease;
-moz-transition: none 0.4s ease;
-ms-transition: none 0.4s ease;
-o-transition: none 0.4s ease;
transition: none 0.4s ease;
-webkit-transition-property: top, right, bottom, left, border;
-moz-transition-property: top, right, bottom, left, border;
-ms-transition-property: top, right, bottom, left, border;
-o-transition-property: top, right, bottom, left, border;
transition-property: top, right, bottom, left, border; }
html.mm-opened .mm-page,
html.mm-opened #mm-blocker {
left: 0;
top: 0;
margin: 0;
border: 0px solid rgba(0, 0, 0, 0); }
html.mm-opening .mm-page,
html.mm-opening #mm-blocker {
border: 0px solid rgba(100, 100, 100, 0); }
.mm-menu .mm-hidden {
display: none; }
.mm-fixed-top,
.mm-fixed-bottom {
position: fixed;
left: 0; }
.mm-fixed-top {
top: 0; }
.mm-fixed-bottom {
bottom: 0; }
html.mm-opened .mm-page,
.mm-menu > .mm-panel {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box; }
html.mm-opened {
overflow-x: hidden;
position: relative; }
html.mm-opened .mm-page {
position: relative; }
html.mm-background .mm-page {
background: inherit; }
#mm-blocker {
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==) transparent;
display: none;
width: 100%;
height: 100%;
position: fixed;
z-index: 999999; }
html.mm-opened #mm-blocker,
html.mm-blocking #mm-blocker {
display: block; }
.mm-menu.mm-current {
display: block; }
.mm-menu {
background: inherit;
display: none;
overflow: hidden;
height: 100%;
padding: 0;
position: fixed;
left: 0;
top: 0;
z-index: 0; }
.mm-menu > .mm-panel {
background: inherit;
-webkit-overflow-scrolling: touch;
overflow: scroll;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
height: 100%;
padding: 20px;
position: absolute;
top: 0;
left: 100%;
z-index: 0; }
.mm-menu > .mm-panel.mm-opened {
left: 0%; }
.mm-menu > .mm-panel.mm-subopened {
left: -40%; }
.mm-menu > .mm-panel.mm-highest {
z-index: 1; }
.mm-menu > .mm-panel.mm-hidden {
display: block;
visibility: hidden; }
.mm-menu .mm-list {
padding: 20px 0; }
.mm-menu > .mm-list {
padding: 20px 0 40px 0; }
.mm-panel > .mm-list {
margin-left: -20px;
margin-right: -20px; }
.mm-panel > .mm-list:first-child {
padding-top: 0; }
.mm-list,
.mm-list > li {
list-style: none;
display: block;
padding: 0;
margin: 0; }
.mm-list {
font: inherit;
font-size: 14px; }
.mm-list a,
.mm-list a:hover {
text-decoration: none; }
.mm-list > li {
position: relative; }
.mm-list > li > a,
.mm-list > li > span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: inherit;
line-height: 20px;
display: block;
padding: 10px 10px 10px 20px;
margin: 0; }
.mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-noresults):after {
content: '';
border-bottom-width: 1px;
border-bottom-style: solid;
display: block;
width: 100%;
position: absolute;
bottom: 0;
left: 0; }
.mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-noresults):after {
width: auto;
margin-left: 20px;
position: relative;
left: auto; }
.mm-list a.mm-subopen {
width: 40px;
height: 100%;
padding: 0;
position: absolute;
right: 0;
top: 0;
z-index: 2; }
.mm-list a.mm-subopen:before {
content: '';
border-left-width: 1px;
border-left-style: solid;
display: block;
height: 100%;
position: absolute;
left: 0;
top: 0; }
.mm-list a.mm-subopen.mm-fullsubopen {
width: 100%; }
.mm-list a.mm-subopen.mm-fullsubopen:before {
border-left: none; }
.mm-list a.mm-subopen + a,
.mm-list a.mm-subopen + span {
padding-right: 5px;
margin-right: 40px; }
.mm-list > li.mm-selected > a.mm-subopen {
background: transparent; }
.mm-list > li.mm-selected > a.mm-fullsubopen + a,
.mm-list > li.mm-selected > a.mm-fullsubopen + span {
padding-right: 45px;
margin-right: 0; }
.mm-list a.mm-subclose {
text-indent: 20px;
padding-top: 30px;
margin-top: -20px; }
.mm-list > li.mm-label {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 10px;
text-transform: uppercase;
text-indent: 20px;
line-height: 25px;
padding-right: 5px; }
.mm-list > li.mm-spacer {
padding-top: 40px; }
.mm-list > li.mm-spacer.mm-label {
padding-top: 25px; }
.mm-list a.mm-subopen:after,
.mm-list a.mm-subclose:before {
content: '';
border: 2px solid transparent;
display: block;
width: 7px;
height: 7px;
margin-bottom: -5px;
position: absolute;
bottom: 50%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg); }
.mm-list a.mm-subopen:after {
border-top: none;
border-left: none;
right: 18px; }
.mm-list a.mm-subclose:before {
border-right: none;
border-bottom: none;
margin-bottom: -15px;
left: 22px; }
.mm-menu.mm-vertical .mm-list .mm-panel {
display: none;
padding: 10px 0 10px 10px; }
.mm-menu.mm-vertical .mm-list .mm-panel li:last-child:after {
border-color: transparent; }
.mm-menu.mm-vertical .mm-list li.mm-opened > .mm-panel {
display: block; }
.mm-menu.mm-vertical .mm-list > li.mm-opened > a.mm-subopen {
height: 40px; }
.mm-menu.mm-vertical .mm-list > li.mm-opened > a.mm-subopen:after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 16px;
right: 16px; }
html.mm-opened .mm-page {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); }
.mm-ismenu {
background: #333333;
color: rgba(255, 255, 255, 0.6); }
.mm-menu .mm-list > li:after {
border-color: rgba(0, 0, 0, 0.15); }
.mm-menu .mm-list > li > a.mm-subclose {
background: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 0.3); }
.mm-menu .mm-list > li > a.mm-subopen:after, .mm-menu .mm-list > li > a.mm-subclose:before {
border-color: rgba(255, 255, 255, 0.3); }
.mm-menu .mm-list > li > a.mm-subopen:before {
border-color: rgba(0, 0, 0, 0.15); }
.mm-menu .mm-list > li.mm-selected > a:not(.mm-subopen),
.mm-menu .mm-list > li.mm-selected > span {
background: rgba(0, 0, 0, 0.1); }
.mm-menu .mm-list > li.mm-label {
background: rgba(255, 255, 255, 0.05); }
.mm-menu.mm-vertical .mm-list li.mm-opened > a.mm-subopen,
.mm-menu.mm-vertical .mm-list li.mm-opened > ul {
background: rgba(255, 255, 255, 0.05); }
html.mm-opening .mm-page,
html.mm-opening #mm-blocker,
html.mm-opening .mm-fixed-top,
html.mm-opening .mm-fixed-bottom {
left: 80%; }
.mm-menu {
width: 80%; }
@media all and (max-width: 175px) {
.mm-menu {
width: 140px; }
html.mm-opening .mm-page,
html.mm-opening #mm-blocker,
html.mm-opening .mm-fixed-top,
html.mm-opening .mm-fixed-bottom {
left: 140px; } }
@media all and (min-width: 550px) {
.mm-menu {
width: 440px; }
html.mm-opening .mm-page,
html.mm-opening #mm-blocker,
html.mm-opening .mm-fixed-top,
html.mm-opening .mm-fixed-bottom {
left: 440px; } }
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 = {
$wndw: null,
$html: null,
$body: null,
$page: null,
$blck: null,
$allMenus: null
};
var _c = {}, _d = {}, _e = {},
_serialnr = 0,
_strollTop = 0;
$[ _PLUGIN_ ] = function( $menu, opts, conf )
{
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.not( this.$menu ).trigger( _e.close );
// Store style and position
glbl.$page.data( _d.style, glbl.$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.mm( this.opts.position ) );
}
if ( this.opts.zposition != 'back' )
{
glbl.$html.addClass( _c.mm( this.opts.zposition ) );
}
if ( this.opts.classes )
{
glbl.$html.addClass( this.opts.classes );
}
// Open
glbl.$html.addClass( _c.opened );
this.$menu.addClass( _c.opened );
},
_openFinish: function()
{
var that = this;
// Callback
transitionend( glbl.$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
transitionend( glbl.$page,
function()
{
that.$menu
.removeClass( _c.current )
.removeClass( _c.opened );
glbl.$html
.removeClass( _c.opened )
.removeClass( _c.modal )
.removeClass( _c.background )
.removeClass( _c.mm( that.opts.position ) )
.removeClass( _c.mm( that.opts.zposition ) );
if ( that.opts.classes )
{
glbl.$html.removeClass( that.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 = extendOptions( this.opts, this.conf, this.$menu );
this.direction = ( this.opts.slidingSubmenus ) ? 'horizontal' : 'vertical';
// INIT PAGE & MENU
this._initPage( glbl.$page );
this._initMenu();
this._initBlocker();
this._initPanles();
this._initLinks();
this._initOpenClose();
this._bindCustomEvents();
if ( $[ _PLUGIN_ ].addons )
{
for ( var a = 0; a < $[ _PLUGIN_ ].addons.length; a++ )
{
if ( typeof this[ '_addon_' + $[ _PLUGIN_ ].addons[ a ] ] == 'function' )
{
this[ '_addon_' + $[ _PLUGIN_ ].addons[ a ] ]();
}
}
}
},
_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 )
{
e.stopPropagation();
}
);
// Menu-events
this.$menu
.on( _e.open,
function( e )
{
if ( $(this).hasClass( _c.current ) )
{
e.stopImmediatePropagation();
return false;
}
return that.open();
}
)
.on( _e.close,
function( e )
{
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.find( this.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 )
{
e.stopPropagation();
}
);
if ( this.direction == 'horizontal' )
{
$panels
.on( _e.open,
function( e )
{
return openSubmenuHorizontal( $(this), that.$menu );
}
);
}
else
{
$panels
.on( _e.toggle,
function( e )
{
var $t = $(this);
return $t.triggerHandler( $t.parent().hasClass( _c.opened ) ? _e.close : _e.open );
}
)
.on( _e.open,
function( e )
{
$(this).parent().addClass( _c.opened );
return 'open';
}
)
.on( _e.close,
function( e )
{
$(this).parent().removeClass( _c.opened );
return 'close';
}
);
}
},
_initBlocker: function()
{
var that = this;
if ( !glbl.$blck )
{
glbl.$blck = $( '<div id="' + _c.blocker + '" />' )
.appendTo( glbl.$body );
}
glbl.$blck
.off( _e.touchstart )
.on( _e.touchstart,
function( e )
{
e.preventDefault();
e.stopPropagation();
glbl.$blck.trigger( _e.mousedown );
}
)
.on( _e.mousedown,
function( e )
{
e.preventDefault();
if ( !glbl.$html.hasClass( _c.modal ) )
{
that.$menu.trigger( _e.close );
}
}
);
},
_initPage: function( $p )
{
if ( !$p )
{
$p = $(this.conf.pageSelector, glbl.$body);
if ( $p.length > 1 )
{
$[ _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.add( this.$menu.find( '*' ) ).filter( '[id]' ).each(
function()
{
$(this).attr( 'id', _c.mm( $(this).attr( 'id' ) ) );
}
);
}
// Strip whitespace
this.$menu.contents().each(
function()
{
if ( $(this)[ 0 ].nodeType == 3 )
{
$(this).remove();
}
}
);
// Inject to body
this.$menu[ this.conf.menuInjectMethod + 'To' ]( this.conf.menuWrapperSelector )
.addClass( _c.menu );
// Add direction class
this.$menu.addClass( _c.mm( this.direction ) );
// Add options classes
if ( this.opts.classes )
{
this.$menu.addClass( this.opts.classes );
}
if ( this.opts.isMenu )
{
this.$menu.addClass( _c.ismenu );
}
if ( this.opts.position != 'left' )
{
this.$menu.addClass( _c.mm( this.opts.position ) );
}
if ( this.opts.zposition != 'back' )
{
this.$menu.addClass( _c.mm( this.opts.zposition ) );
}
},
_initPanles: function()
{
var that = this;
// Refactor List class
this.__refactorClass( $('.' + this.conf.listClass, this.$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( e, selected )
{
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.panelClass, this.$menu), 'panel' );
// Add Panel class
this.$menu
.children()
.filter( this.conf.panelNodetype )
.add( this.$menu.find( '.' + _c.list ).children().children().filter( this.conf.panelNodetype ) )
.addClass( _c.panel );
var $panels = $('.' + _c.panel, this.$menu);
// Add an ID to all panels
$panels
.each(
function( i )
{
var $t = $(this),
id = $t.attr( 'id' ) || _c.mm( 'm' + that.serialnr + '-p' + i );
$t.attr( 'id', id );
}
);
// Add open and close links to menu items
$panels
.find( '.' + _c.panel )
.each(
function( i )
{
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( i )
{
var $opening = $(this),
id = $opening.attr( 'id' );
$('a[href="#' + id + '"]', that.$menu)
.off( _e.click )
.on( _e.click,
function( e )
{
e.preventDefault();
$opening.trigger( evt );
}
);
}
);
if ( this.direction == 'horizontal' )
{
// Add opened-classes
var $selected = $('.' + _c.list + ' > li.' + _c.selected, this.$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.selected, this.$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 ).appendTo( this.$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( e )
{
var $t = $(this),
href = $t.attr( 'href' );
// Set selected item
if ( that.__valueOrFn( that.opts.onClick.setSelected, $t ) )
{
$t.parent().trigger( _e.setSelected );
}
// Prevent default / don't follow link. Default: false
var preventDefault = that.__valueOrFn( that.opts.onClick.preventDefault, $t, href.slice( 0, 1 ) == '#' );
if ( preventDefault )
{
e.preventDefault();
}
// Block UI. Default: false if preventDefault, true otherwise
if ( that.__valueOrFn( that.opts.onClick.blockUI, $t, !preventDefault ) )
{
glbl.$html.addClass( _c.blocking );
}
// Close menu. Default: true if preventDefault, false otherwise
if ( that.__valueOrFn( that.opts.onClick.close, $t, preventDefault ) )
{
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.umm( id );
}
$('a[href="#' + id + '"]')
.off( _e.click )
.on( _e.click,
function( e )
{
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 )
{
e.preventDefault();
that.$menu.trigger( _e.close );
}
);
}
},
__valueOrFn: function( o, $e, d )
{
if ( typeof o == 'function' )
{
return o.call( $e[ 0 ] );
}
if ( typeof o == 'undefined' && typeof d != 'undefined' )
{
return d;
}
return o;
},
__refactorClass: function( $e, c )
{
$e.removeClass( this.conf[ c + 'Class' ] ).addClass( _c[ c ] );
}
};
$.fn[ _PLUGIN_ ] = function( opts, conf )
{
// First time plugin is fired
if ( !glbl.$wndw )
{
_initPlugin();
}
// Extend options
opts = extendOptions( opts, conf );
conf = extendConfiguration( conf );
return this.each(
function()
{
var $menu = $(this);
if ( $menu.data( _PLUGIN_ ) )
{
return;
}
$menu.data( _PLUGIN_, new $[ _PLUGIN_ ]( $menu, opts, conf ) );
}
);
};
$[ _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' ) >= 0 )
{
return 2.4 > parseFloat( ua.slice( ua.indexOf( 'Android' ) +8 ) );
}
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( depr, repl )
{
if ( typeof console != 'undefined' && typeof console.warn != 'undefined' )
{
console.warn( 'MMENU: ' + depr + ' is deprecated, use ' + repl + ' instead.' );
}
};
function extendOptions( o, c, $m )
{
if ( $m )
{
if ( typeof o != 'object' )
{
o = {};
}
if ( typeof o.isMenu != 'boolean' )
{
var $c = $m.children();
o.isMenu = ( $c.length == 1 && $c.is( c.panelNodetype ) );
}
return o;
}
// Extend from defaults
o = $.extend( true, {}, $[ _PLUGIN_ ].defaults, o );
// 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( c )
{
c = $.extend( true, {}, $[ _PLUGIN_ ].configuration, c )
// 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 )
{
o.add = function( c )
{
c = c.split( ' ' );
for ( var d in c )
{
o[ c[ d ] ] = o.mm( c[ d ] );
}
};
}
);
// Classnames
_c.mm = function( c ) { 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( c )
{
if ( c.slice( 0, 3 ) == 'mm-' )
{
c = c.slice( 3 );
}
return c;
};
// Datanames
_d.mm = function( d ) { return 'mm-' + d; };
_d.add( 'parent style' );
// Eventnames
_e.mm = function( e ) { return e + '.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( e )
{
if ( glbl.$html.hasClass( _c.opened ) )
{
if ( e.keyCode == 9 )
{
e.preventDefault();
return false;
}
}
}
);
// Set page min-height to window height
var _h = 0;
glbl.$wndw
.on( _e.resize,
function( e, force )
{
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( $e, fn, duration )
{
var _ended = false,
_fn = function()
{
if ( !_ended )
{
fn.call( $e[ 0 ] );
}
_ended = true;
};
$e.one( _e.transitionend, _fn );
$e.one( _e.webkitTransitionEnd, _fn );
setTimeout( _fn, duration * 1.1 );
}
})( jQuery );
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.