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
Complete .![Big Grin]( "Big Grin")
Now you have a 3d fold-in menu .
For more information about customize setting
https://github.com/hakimel/meny
demo http://lab.hakim.se/meny/
![.png]()
2013-03-03_122305.png (Size: 149.71 KB / Downloads: 44)
![.png]()
2013-03-03_122249.png (Size: 153.14 KB / Downloads: 46)
![.png]()
2013-03-03_122434.png (Size: 138.9 KB / Downloads: 48)
![.zip]()
3d_fold-in_menu.zip (Size: 5.91 KB / Downloads: 5)
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
PHP 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 .
Now you have a 3d fold-in menu .
For more information about customize setting
https://github.com/hakimel/meny
demo http://lab.hakim.se/meny/
2013-03-03_122305.png (Size: 149.71 KB / Downloads: 44)
2013-03-03_122249.png (Size: 153.14 KB / Downloads: 46)
2013-03-03_122434.png (Size: 138.9 KB / Downloads: 48)
3d_fold-in_menu.zip (Size: 5.91 KB / Downloads: 5)