رفتن به مطلب

جستجو در تالارهای گفتگو

در حال نمایش نتایج برای برچسب های 'منو واکنشگرا سایت'.

  • جستجو بر اساس برچسب

    برچسب ها را با , از یکدیگر جدا نمایید.
  • جستجو بر اساس نویسنده

نوع محتوا


تالارهای گفتگو

  • تالار اصلی
    • قوانین و مقررات
    • اطلاعیه ها
    • انتقادات و پیشنهادات
  • بخش پشتیبانی ( جهت رفع مشکلات )
    • پرسش و پاسخ ها
  • بازارچه محصولات اینترنتی
    • خرید و فروش دامین
    • خرید و فروش وب سایت
    • عمومی
  • اسکریپت
    • آموزش
    • اسکریپت ها
  • مدیریت محتوای سایت
    • وردپرس
    • وی بولتین
    • نیوک
    • جوملا
    • دیتالایف انجین
    • Whmcs
    • دیگر سیستم های مدیریت محتوا
  • ووکامرس فارسی
    • نسخه ها و اخبار
    • معرفی افزونه های ووکامرس
    • معرفی قالب های ووکامرس فارسی
    • آموزش های مرتبط با ووکامرس
    • پرسش و پاسخ / پشتیبانی ووکامرس فارسی
  • هاست و دامنه
    • دامنه
    • هاست
  • سئو
    • آموزشها
    • درخواست آنالیز سایت
  • کدنویسی
    • Html
    • CSS
    • PHP
    • jQuery
    • XML
    • کدنویسی قالب
  • قالب آماده
    • قالبهاي Html
    • قالبهاي Flash
  • گرافیک
    • بنر , هدر , لوگو و...
    • فتوشاپ
    • پی اس دی
  • نرم افزار و سخت افزار
    • مطالب عمومی نرم افزار
    • مطالب عمومی سخت افزار
  • تکنولوژی
    • اخبار
    • اینترنت و شبکه
    • امنیت
    • سیستم عامل
    • عکاسی
  • موبایل
    • آندروید
    • ویندوز فون
    • ای او اس
    • کلوپ هواداران
  • عمومی
    • گفتگوی آزاد
    • معرفی وب سایت
    • صندلی داغ بیست اسکریپت

جستجو در ...

نمایش نتایجی که شامل ...


تاریخ ایجاد

  • شروع

    پایان


آخرین بروزرسانی

  • شروع

    پایان


فیلتر بر اساس تعداد ...

تاریخ عضویت

  • شروع

    پایان


گروه


درباره من


آیدی تلگرام


سیستم مدیریت محتوای مورد علاقه


زبان برنامه نویسی و تخصص ها


انجمن ساز مورد علاقه


آدرس سایت


سن


AIM


ICQ


یاهو


اسکایپ


فیسبوک


توییتر


صفحه خانگی


محل سکونت


علایق شما


درباره من


جنسیت

  1. اگر از وبمستر های با تجربه و یا آگاه به فضای مجازی هستید حتما می دانید که امروزه واکنش گرا بودن سایت ها بسیار حائز اهمیت است ، چرا که علم پیشرفت کرده است و سیستم عامل های متفاوتی هر روز روانه بازار می شوند که دارای صفحه نمایش های متفاوتی هستند پس از همین رو باید به فکر چاره ای باشید که سایت با هر سیستم عاملی و با هر سایز صفحه نمایشی به درستی لود شود که در اینجا چند سالیست موضوع ریسپانسیو به کمک مدیران سایت ها آمده است . بسیار خب ما در این آموزش تصمیم داریم به شما نحوه ی ساخت منوی مینیمال برای وبسایتتان را آموزش دهیم که وقتی کاربر با استفاده از گوشی موبایل اقدام به ورود به وبسایتتان کرد دیگر منوی سایت شما بهم ریخته به نمایش در نیاید ، بلکه بصورت کاملا منظم و جمع و جور برای بازدیدکننده به نمایش در آید . پس پیشنهاد میکنم اگر این مورد برای شما اهمیت دارد این مطلب را تا انتها همراه ما باشید . (منویی که آموزش خواهیم داد در گوشی های موبایل در حالت پیش فرض به صورت زیر به بازدیدکنندگان نمایش داده خواهد شد .) منوی مینیمال برای موبایل : در همین ابتدای آموزش لازم است بگوییم که این منو با استفاده از html و css طراحی خواهد شد ، پس اگر به دنبال اینچنین منویی هستید مطلب را دنبال کنید . شروع : اولین کاری که باید انجام دهید کپی کردن کد زیر و ریختن آن در فایل functions.php قالب وبسایتتان است ، میتوانید این کد را به انتهای کد ها اضافه نمایید . add_action( 'init', 'register_my_menu' ); function register_my_menu() { register_nav_menu( 'mobile_menu', __( 'Mobile Menu' ) ); } توجه داشته باشید که اگر قالب سایت شما دارای یک یا چند مکان منو هست باید از تابع زیر استفاده کنید register_nav_menus() این تابع مشابع همان تابع register_nav_menu() عمل می کند ، با این تفاوت که اجازه ی ایجاد منو های متعدد را به شما خواهد داد . برای نمونه به مثال زیر توجه فرمایید : register_nav_menus( array( 'main_menu' => 'Main Navigation Menu', 'mobile_menu' => 'Mobile Menu', ) ); بعد از قرار دادن کد فوق در مکان مربوطه (یا همان مکان مناسب) شما باید اقدام به بازکردن فایل header.php قالب سایت خود کنید و قطعه کد زیر را در مکانی که می خواهید منوی موبایل نمایش داده شود وارد کنید . <nav id="mobile-menu"> <a href="#" id="menu-icon"></a> <?php wp_nav_menu( array( 'theme_location' => 'mobile-menu' ) ); ?> </nav> اکنون مطابق با تصویر زیر از پیشخوان وردپرس وارد مسیر ” نمایش > منوها شوید و در آنجا اقدام به ایجاد چند منو کنید و برای آنها نیز لینک هایی در نظر بگیرید . بخش مربوط به استایل منو (همان css) : ما در حالت پیش فرض نمیخواهیم منوی ما نمایش داده شود (یعنی در مانیتور های غیر از موبایل ، مانیتور های با عرض بزرگ) ، بلکه هدف ما نمایش این منو فقط برای دستگاه های موبایل است پس کاری که باید انجام دهیم ساده است و آن مخفی کردن منو در حالت پیش فرض است که اینکار با استفاده از عناصر css قابل انجا م خواهد بود . حالا وقت آن شده است که کد زیر را بصورت کامل به فایل css قالب سایت خود اضافه کنید (میتوانید این کد را به انتهای کد های موجود در این فایل اضافه کنید) /* body{ font-family: Arial; font-size:15px; color:#555} */ /* header, main{ width:900px;margin:0 auto;} */ /* header { position:relative } */ #mobile-menu{ display: none } همانطور که هدف ما نمایش این منو برای دستگاه هایی با صفحه نمایش کم عرض است ، پس ما باید کد زیر را هم به فایل استایل اضافه کنیم که تعیین کننده ی این است که : هر زمان دستگاه دارای صفحه نمایشی با عرض کمتر از 767 پیکسل بود این منوی مینیمال برای بازدیدکننده به نمایش در آید (در غیر اینصورت منوی پیش فرض سایت یا درواقع همان منوی اصلی سایت نمایش داده میشود) @media only screen and (max-width: 767px) { header, main{ width:90%} /* mobile menu */ #mobile-menu{ display: block } #menu-icon { width: 40px; height: 40px; display: block; background: #7AD03A ; float: right; margin-top: 10px; text-indent:-9999px } nav ul, nav:active ul { display: none; position: absolute; padding: 20px; background: #7AD03A; right: 0px; top: 35px; width: 50%; border-radius: 4px 0 4px 4px; } nav li { list-style-type:none; text-align: center; width: 100%; padding: 10px 0; margin: 0; } nav li a{ color:#fff !important; text-decoration:none !important; display:block} nav:hover ul { display: block; } } } حالا اگر این فایل های اصلاح شده را ذخیره کنید و اقدام به چک کردن منو نمایید شاهد خواهید بود که منو به درستی اجرا می شود . اما هنوز کار ما با این منو تمام نشده است و می خواهیم آن را کمی گسترش دهیم ، پس باز هم اموزش را دنبال کنید . اکنون می خواهیم با استفاده از فونت آیکون تصویری را برای منو قرار دهیم (لازم به ذکر است فونت آیکون بجای استفاده از تصاویر گرافیکی مورد استفاده قرار میگیرد که بسیار حرفه ای می باشد و مزایای بسیاری دارد ، پس قبل از اینکه به ادامه اموزش بپردازیم بهتر است ” اینجا ” کلیک کنید و فایل مربوط به فونت مآیکون مد نظر خود را دانلود کنید و سپس فایل مربوطه را روی هاست خود در مسیر فونت های قالب سایتتان آپلود نمایید) حالا مجددا وارد فایل header.php بشوید و کد زیر را کپی کنید و در جایی که کد قبلی را در این فایل قرار داده بودید بروید . <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/mfglabs_iconset.css"> این کد باید جایگزین کد زیر شود . <a href="#" id="menu-icon"></a> و آخرین کاری که باید انجام دهیم ویرایش مجدد فایل style.css یا همان css است و کد زیر را باید به آن اضافه کنیم . #menu-icon { width: 40px; height: 40px; display: block; background: #7AD03A ; float: right; margin-top: 10px; } و همچنین سه دستور زیر را هم در css اضافه کنید text-align: center; color: #fff; text-decoration:none; اکنون فایل ها را ذخیره کنید ، کار تمام است و همه چیز اماده اجراست . امیدوارم از این آموزش لذت برده باشید . موفق باشید .
×
×
  • اضافه کردن...