با درود خدمت دوستان
آموزش درست کردن یک منوی سه بُعدی را برای انجمن ساز مای بی بی قرار میدهم . امید که بکار بیاید .
توجه یکم : این کار با کوئری انجام می شود و ممکن است با اسکریپت های دیگر شما تداخل پیدا کند .
توجه دوم : این پروژه برای مرورگرهایی است که قابلیت نمایش صفحات سه بُعدی رادارند ( در اکسپلورر بصورت کشویی نمایش داده می شود ) .
توجه سوم : این پروژه روی قالب دیفالت اجرا شده و در قالب های دیگر نیاز به کار دیگر است که بسته به وضعیت قالب باید کدها اعمال شوند .
ابتدا تصویر ها و فیلم نمایشی را ببینید درصورت علاقه مند شدن انجام دهید .
خوب , روش اجرا بصورت گام به گام
نخست به بخش قالب ها -----> قالب مورد نظر ( من در دیفالت اجرا کرده ام ) ---> هدر قالب ---> هدر بروید و تمام کدهای هدر را با کد های زیر جایگزین کنید .
سپس پوشه های 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 بروید . در ضمن از پروژه های این نابغه هم دیداری داشته باشید و می توانید از آنها استفاده بکنید .
این مطلب را در سایت انگلیسی مای بی بی در اینجا هم به اشتراک گذاشته ام .
3d_menu_parsi.zip (اندازه: 6.22 KB / تعداد دفعات دریافت: 10)
آموزش درست کردن یک منوی سه بُعدی را برای انجمن ساز مای بی بی قرار میدهم . امید که بکار بیاید .
توجه یکم : این کار با کوئری انجام می شود و ممکن است با اسکریپت های دیگر شما تداخل پیدا کند .
توجه دوم : این پروژه برای مرورگرهایی است که قابلیت نمایش صفحات سه بُعدی رادارند ( در اکسپلورر بصورت کشویی نمایش داده می شود ) .
توجه سوم : این پروژه روی قالب دیفالت اجرا شده و در قالب های دیگر نیاز به کار دیگر است که بسته به وضعیت قالب باید کدها اعمال شوند .
ابتدا تصویر ها و فیلم نمایشی را ببینید درصورت علاقه مند شدن انجام دهید .
خوب , روش اجرا بصورت گام به گام
نخست به بخش قالب ها -----> قالب مورد نظر ( من در دیفالت اجرا کرده ام ) ---> هدر قالب ---> هدر بروید و تمام کدهای هدر را با کد های زیر جایگزین کنید .
کد 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 بروید . در ضمن از پروژه های این نابغه هم دیداری داشته باشید و می توانید از آنها استفاده بکنید .
این مطلب را در سایت انگلیسی مای بی بی در اینجا هم به اشتراک گذاشته ام .
فیلم نمایشی از طرز کار ترفند با حجم 2.98 مگابایت
http://dl.midori.elementfx.com/video/01/...fa-wmv.zip
===============
http://dl.midori.elementfx.com/video/01/...fa-wmv.zip
===============
3d_menu_parsi.zip (اندازه: 6.22 KB / تعداد دفعات دریافت: 10)