منوی سه بُعدی برای انجمن ساز مای بی بی

[میدوری]

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

ابتدا تصویر ها و فیلم نمایشی را ببینید درصورت علاقه مند شدن انجام دهید .

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

کد 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
===============

  3d_menu_parsi.zip (اندازه: 6.22 KB / تعداد دفعات دریافت: 10)
               

[hamidkag]

درود بر سوئد

[Hojjat70]

سلام یه سوال مبتدیانه دارم
می خواستم بدونم این روت که میگی چیه؟کجاست؟

[adnan]

سلام یه سوال مبتدیانه دارم
می خواستم بدونم این روت که میگی چیه؟کجاست؟

درود!
روت یعنی جایی که فایل های مای بی بی رو ریختید.