ایجاد ساید بار کنار سایت یا کلیک کردن

[dozanani]

سلام به همه ی دوستان و سال نو رو هم به همه تبریک میگم


واقعیتش من یه ساید بار دیدم توی یکی از سایت ها کل با کلیک کردن میومد بیرون و با کلیک کردن میرفت تو و خیلی هم جالب بود
از مدیر سایت هم خواستم کمکم نکرد

توی اینترنت هم نمونه هایی هست ولی همشون بدون کلیک کردن هستند که مورد نیاز من نیست

حالا میخواستم ببینم کسی میتونه کمکم کنه



نمونه مورد نطر

[میدوری]

با درود و شادباش برای سال نو و جشن نوروز 1393
این کارها را با کمی جستجو در نت می توان پیدا کرد و با خارجی ها بهتر میشه کنار اومد . هم میهنان , زیاد اهل اشتراک گذاری نیستند چون تعداد کمی از دوستان با زحمت زیاد و پس از مونتاژ کاری به نتیجه می رسند و فکرشان این است که آی دنیا من اختراع کردم ( چون در جاهای دیگر هم مطلب شما را دیدم و کسی مایل به راهنمایی شما نبود عرض کردم ) به هر حال این کار را می توانید از اینجا دریافت کنید ولی کارهای بهتری می توانید درست کنید و بهتر است از دیگران ایده گرفته و نو کاری کنید و نه دوباره کاری (کارهای زیبا جای خود را دارند) . سال خوبی داشته باشید

[صالح غلامیان]

درود

با تشکر از میدوی عزیز برای این که قابلیت باز و بسته شدن با کلیک را ایجاد کنید نیاز به کمی جاوا اسکریپت دارید

خوب من برای تکمیل کردنش نحوه ی کلی قرار دادنش رو براتون میگم البته هنوز خودم این کد را تست نکردم و نمیدونم آخرش چه شکلی میشه

به قالب مورد نظر و سپس قالب های گروه بندی نشده برید سپس به هدر اینکلود
کد زیر را آخر کد ها کپی کنید و ذخیره

کد:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

    <script type="text/javascript">
    $(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     //class of the element that will become your tab
            pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
            imageHeight: '122px',                     //height of tab image           //Optionally can be set using css
            imageWidth: '40px',                       //width of tab image            //Optionally can be set using css
            tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
            speed: 300,                               //speed of animation
            action: 'click',                          //options: 'click' or 'hover', action to trigger animation
            topPos: '200px',                          //position from the top/ use if tabLocation is left or right
            leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
            fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
        });

    });

    </script>

سپس به قالب هدر یا جایی که که میخواهید باکس اونجا رویت بشه برید و کد زیر را در جای مناسب قرار بدید ( تست کنید ببینید کجا بهتره)

کد:

<div class="slide-out-div">
            <a class="handle" href="http://link-for-non-js-users.html">Content</a>
            <h3>Contact me</h3>
            <p>Thanks for checking out my jQuery plugin, I hope you find this useful.
            </p>
            <p>This can be a form to submit feedback, or contact info</p>
        </div>

سپس بیرد به پوسته ها و پوسته ی مورد نظر و سپس global.css

حالا کد زیر را آخر کد ها کپی کنید

کد php:

.slide-out-div {
          padding: 20px;
          width: 250px;
          background: #ccc;
          border: 1px solid #29216d;
      } 


خوب حالا یک شات بزارید ببینیم چه شد

ضمنا با جست و جو در گوگل برای مثلا : باکس جی کوری باز باز شونده مطلب و کد های آماده پیدا خواهید کرد.

نکته خط اول در کد اول

کد:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

که گذاشتیم برای فراخوانی کتاب خانه جی کوئری هستش اگه این بانک قبلا در قالب شما برای قابلیتی دیگر فراخوانی شده نیازی نیست دوباره تکرار شود.
و خط های بعدی نیز برای دستوراتی هست که به کتابخانه داده میشه

منظور کد های زیر است

کد:

<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

    <script type="text/javascript">
    $(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     //class of the element that will become your tab
            pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
            imageHeight: '122px',                     //height of tab image           //Optionally can be set using css
            imageWidth: '40px',                       //width of tab image            //Optionally can be set using css
            tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
            speed: 300,                               //speed of animation
            action: 'click',                          //options: 'click' or 'hover', action to trigger animation
            topPos: '200px',                          //position from the top/ use if tabLocation is left or right
            leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
            fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
        });

    });

    </script>

موفق باشید