تالار میدوری

نسخه کامل: منوی سه بُعدی برای انجمن ساز مای بی بی
شما در حال مشاهده نسخه تکمیل نشده می باشید. مشاهده نسخه کامل با قالب بندی مناسب.
منوی سه بُعدی برای انجمن ساز مای بی بی

آموزش درست کردن یک منوی سه بُعدی را برای انجمن ساز مای بی بی قرار میدهم . امید که بکار بیاید .
توجه
متن پیام :
یکم : این کار با کوئری انجام می شود و ممکن است با اسکریپت های دیگر شما تداخل پیدا کند
دوم : این پروژه برای مرورگرهایی است که قابلیت نمایش صفحات سه بُعدی رادارند ( در اکسپلورر بصورت کشویی نمایش داده می شود ) .
سوم : این پروژه روی قالب دیفالت اجرا شده و در قالب های دیگر نیاز به کار دیگر است که بسته به وضعیت قالب باید کدها اعمال شوند .




ابتدا تصویر ها و فیلم نمایشی را ببینید درصورت علاقه مند شدن انجام دهید .
خوب , روش اجرا بصورت گام به گام
نخست به بخش قالب ها -----> قالب مورد نظر ( من در دیفالت اجرا کرده ام ) ---> هدر قالب ---> هدر بروید و تمام کدهای هدر را با کد های زیر جایگزین کنید .

کد 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 بروید .

[تصویر: house_link.png] منبع : http://lab.hakim.se

برای دیدن اصل این پروژه و نسخه نمایشی هم به آدرس http://lab.hakim.se/meny بروید . در ضمن از پروژه های این نابغه هم دیداری داشته باشید و می توانید از آنها استفاده بکنید .
===============
کدها در فایل متنی
[attachment=1317]
==============
فیلم نمایشی از طرز کار ترفند
لینک مرجع