آموزش درست کردن یک منوی سه بُعدی را برای انجمن ساز مای بی بی قرار میدهم . امید که بکار بیاید .
ابتدا تصویر ها و فیلم نمایشی را ببینید درصورت علاقه مند شدن انجام دهید .
خوب , روش اجرا بصورت گام به گام
نخست به بخش قالب ها -----> قالب مورد نظر ( من در دیفالت اجرا کرده ام ) ---> هدر قالب ---> هدر بروید و تمام کدهای هدر را با کد های زیر جایگزین کنید .
کد PHP:
<div id="container"><a name="top" id="top"></a><div id="header"><div><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div><div><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 /><div id="panel">{$welcomeblock}</div></div><navigation><br /><link rel="stylesheet" href="{$mybb->settings['bburl']}/css/3d_menu.css"><div><h2>منوي انجمن</h2><ul><li><a href="{$mybb->settings['bburl']}/search.php">جستجو</a></li><li><a href="{$mybb->settings['bburl']}/memberlist.php">ليست کاربران</a></li><li><a href="{$mybb->settings['bburl']}/calendar.php">سال نامه</a></li><li><a href="{$mybb->settings['bburl']}/misc.php?action=help">راهنما</a></li><li><a href="{$mybb->settings['bburl']}/usercp.php">کنترل پنل کاربري</a></li></ul></div><div></div><div>{$pm_notice}{$bannedwarning}{$bbclosedwarning}{$unreadreports}{$pending_joinrequests}<div><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></div><iframe src="'+ Meny.getQuery().u +'" style="width: 100%;
height: 100%; border: 0; position: absolute;"></iframe>';}</script></div>
سپس پوشه های js و css را در روت سایت آپلود کنید ( اگر با همین نام ها پوشه دارید محتویات این دو پوشه را در پوشه های خودتان بریزید ) تصویر نشانه گر مشکی در فایل 3d_menu.css بصورت کُد بندی شده موجود است در صورتی که با این موضوع مشکل دارید کُد مربوط به تصویر را در فایل 3d_menu.css پاک کنید ونام تصویر ضمیمه را وارد کنید و تصویری که در پوشه images هست را در محل دلخواه آپلود کنید .
کار تمام است .
توجه کلی : قبل از هر دستکاری لطفا در یک فایل متنی ( نوت پد ) از کدهای موجود خودتان بک آپ بگیرید که کارتان قابل برگشت هم باشد
این پروژه برگرفته از سایت Hakim El Hattab است و برای دستکاری در اصل کار به آدرس https://github.com/hakimel/meny در github بروید .
منبع :http://lab.hakim.se
برای دیدن اصل این پروژه و نسخه نمایشی هم به آدرس http://lab.hakim.se/meny بروید . در ضمن از پروژه های این نابغه هم دیداری داشته باشید و می توانید از آنها استفاده بکنید .