نماد الکترونیک سئوخانه

Seyyed Amir Tekyeh

اضافه کردن قابلیت Focus کردن زیر منوها در سایت

همانطور که در مرحله قبل توضیح داده شد ممکن است که کاربران به دلایل خاص یا نبودن موس نتوانند با سایت شما به خوبی کار کنند که برای رفع این مشکل ما قابلیت Focus را به object های سایت اضافه کردیم. هم اکنون مرحله ی اضافه کردن قابلیت Focus به زیر منوهای سایت می باشد.

در سایت زیر یک نمونه کد برای Drop Down کردن منوها قرار داده شده است:

http://www.alistapart.com/articles/dropdowns

پلاگین JQuery زیر برای منوها به نام SuperFish می باشد که قابلیت Focus را به زیر منوها اضافه می کند:

http://users.tpg.com.au/j_birch/plugins/superfish

در سایت به قسمت Download رفته و آخرین ورژن پلاگین را دانلود و آنرا Extract کنید. فایل نمونه را باز کرده و رشته کدهای مربوط به script و jquery آنرا در فایل خود کپی نمایید.

همچنین فایل های js آمده شده در رشته کد را به شاخه ی فایل خود کپی نمایید. سپس در رشته کد کپی شده قسمت jquery آن، id مربوط به main menu یا همان منوی اصلی خود را وارد کنید. می توانید در رشته کد زیر تماشا کنید:

JQuery (function(){ JQuery(‘ul#main-menu’).superfish();});

بجای #main-menu، id منوی اصلی خود را می گذاریم.

 

اضافه کردن قابلیت Focus کردن زیر منوها در سایت

اضافه کردن قابلیت Focus به object های درون سایت

برای زمانی که کاربران به دلایل خاص یا نبودن موس بتوانند به راحتی بین object های درون سایت حرکت کنند از این قابلیت استفاده می کنیم.

برای این کار بهتر است از tag<a> استفاده کنیم. برای نمونه در فایل CSS می نویسیم:

a { color: #3389a9;

      text-decoration: none; }

a: active,

a: hover { color: #25637A;

                 border-bottom: 1px dotted; }

a: visited { color: #6AB6D2; }

a: focus { outline: #3389a9 solid 2px; }

دستور a: focus در رشته کد بالا باعث می شود که با انتخاب object یک box به رنگ آبی دور آن نمایش داده شود.

 

اضافه کردن قابلیت Focus به object های درون سایت

قرارگذاری دکمه های skip-button به صورت مخفی

عموماً از این کار برای زمانی استفاده می شود که CSS در آن مرورگر غیر فعال باشد. برای این کار به صورت نمونه در قسمت منو یک دکمه skip می گذاریم:

<nav>

    <div class=”skip-button”><a href=”#content” title=”skip to content”>skip to content</a>

</nav>

 

و در فایل CSS می نویسیم:

.skip-button {  position: absolute;

                        text-indent: -9999px;}

 

قرارگذاری دکمه های skip-button به صورت مخفی

تماس با سئوخانه

تیم فنی سئوخانه افتخار دارد تا در زمینه های آموزش سئو و بهینه سازی سایت - طراحی سایت - ارائه هاست و میزبانی وب درخدمت شما سروران گرامی باشد.

مدیر تیم سئوخانه: سید امیر تکیه

تلفن تماس: 02144764277 -- 02146055795

ایمیل: Info[at]SeoKhane.Com

آدرس: تهران - دهکده المپیک - ضلع جنوب غربی میدان المپیک - خیابان ساحل - کوچه 51 - پلاک 39 - طبقه اول - شرکت ایده پرداز داده های ابری آریا

(قرار ملاقات با هماهنگی قبلی)

کدپستی: 1485844111

تگ آموزش سئو - سئو سایت

آموزش سئو - آموزش سئو و بهینه سازی سایت - سئو سایت - سئو - آموزش بهینه سازی - آموزش سئو سایت - آموزش رایگان سئو و بهینه سازی - آموزش سیو - آموزش SEO - سئو چیست - معرفی سایت به موتور جستجو - سئو سازی - سئوخانه - کلمات کلیدی در گوگل - اموزش سئو

میزبانی وب و هاستینگ

Top of Page