MyBB

Midori · (This post was last modified: 2013-09-19, 12:48 PM by Midori.)

An experimental CSS 3D fold-in menu. Works in any browser that supports CSS 3D transforms,
So , first see pictures ( and also demo site ).
This work is adapted from Hakim (meny project).
If you like it and want it , I teach How to setting in forum ( I did it in default template ) step by step .

1 - Upload js & css folders in root
2 - Go to Template ---> default template ( you can edit for your template ) ----> Edit template ---> header template ---> header ---- > replace all with below code

<div id="container">
		<a name="top" id="top"></a>
		<div id="header">
			<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
			<div class="menu">
				<ul>
					<li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
					<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
					<li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
					<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
				</ul>
			</div>
			<hr class="hidden" />
			<div id="panel">
				{$welcomeblock}
			</div>
		</div>
                <navigation>
			<br />
<link rel="stylesheet" href="{$mybb->settings['bburl']}/css/3d_menu.css">
		<div class="meny">
			<h2>Menu</h2>
			<ul>
				<li><a href="{$mybb->settings['bburl']}/search.php">Search</a></li>
				<li><a href="{$mybb->settings['bburl']}/memberlist.php">Memberlist</a></li>
				<li><a href="{$mybb->settings['bburl']}/calendar.php">Calendar</a></li>
				<li><a href="{$mybb->settings['bburl']}/misc.php?action=help">Help</a></li>
				<li><a href="{$mybb->settings['bburl']}/usercp.php">CP</a></li>				
			</ul>
		</div>
<div class="meny-arrow"></div>
		<div class="contents"><article>			
                        {$pm_notice}
			{$bannedwarning}
			{$bbclosedwarning}
			{$unreadreports}
			{$pending_joinrequests}</article>
		<script src="{$mybb->settings['bburl']}/js/meny.js"></script>
		<script>
			// Create an instance of Meny
			var meny = Meny.create({
				// The element that will be animated in from off screen
				menuElement: document.querySelector( '.meny' ),
				// The contents that gets pushed aside while Meny is active
				contentsElement: document.querySelector( '.contents' ),
				// [optional] The alignment of the menu (top/right/bottom/left)
				position: Meny.getQuery().p || 'right',
				// [optional] The height of the menu (when using top/bottom position)
				height: 200,
				// [optional] The width of the menu (when using left/right position)
				width: 260,
				// [optional] Distance from mouse (in pixels) when menu should open
				threshold: 40
			});
			// API Methods:
			// meny.open();
			// meny.close();
			// meny.isOpen();
			// Events:
			// meny.addEventListener( 'open', function(){ console.log( 'open' ); } );
			// meny.addEventListener( 'close', function(){ console.log( 'close' ); } );
			// Embed an iframe if a URL is passed in
			if( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
				var contents = document.querySelector( '.contents' );
				contents.style.padding = '0px';
				contents.innerHTML = '<div class="cover"></div><iframe src="'+ Meny.getQuery().u +'" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
			}
		</script>

Complete . Big Grin