تبلیغات
تبلیغات متنی
محبوبترینها
معرفی و فروش بوته گرافیتی ریخته گری
بهترین بروکر برای معاملات فارکس در سال 2024
تجربه رانندگی با لندکروز در جزیره قشم؛ لوکس‌ترین انتخاب
اکسپرتاپ: 10 شغل پردرآمد برای مهاجران کاری در کانادا
بهترین سایتهای خرید تیک آبی رسمی اینستاگرام در ایران
کدام رنگ کاغذ دیواری مناسب فضای شماست؟
چه چیزهایی دیگر در دکوراسیون مد نیست؟!
بررسی قیمت تیرچه + قیمت تیرچه کرومیت + قیمت یونولیت
خرید و قیمت ورق در مشاوران آهن + [مشاوره رایگان]
تی‌وی وال: ایده‌ای نوین برای دکوراسیون داخلی
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1812816794
چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟!
واضح آرشیو وب فارسی:سایت ریسک: rtech9th October 2008, 07:17 PMبرای ایجاد منوهای زیرمنودار (منوهای پایین افتادنی) در صفحات وب، راه های مختلفی وجود دارد که هرکدام مزایا و معایب خاص خود را دارند. به طور کلی سه روش برای ایجاد منوهای زیرمنودار وجود دارد: 1. فلش 2. جاوا اسکریپت 3. سی اس اس ابتدا اجازه بدید هرکدام از این روش ها را بررسی کنیم و ببینیم کدام روش اصولی تر و کاربردی تر می باشد. 1. فلش: لازمه ی استفاده از این روش در مرحله ی اول تسلط کافی بر فلش است و باید کار با فلش (کاربران ثبت نام کرده قادر به مشاهده لینک می باشند) را بلد بود تا بتوان منوهای جالب ایجاد نمود. البته نرم افزارهایی مانند “123 flash menu (کاربران ثبت نام کرده قادر به مشاهده لینک می باشند)” در این زمینه ارائه شده اند که منوهایی از پیش طراحی شده را در اختیار کاربر قرار میدهند و با استفاده از ابزارهایی که در خود گنجانده اند، امکان ویرایش منوها را به کاربر میدهند. یکی از معایبی که منوهای فلش دارند، ایندکس نشدن محتوای آن ها در موتورهای جستجوگر میباشد که البته اخیرا گوگل این مشکل را برطرف کرده (کاربران ثبت نام کرده قادر به مشاهده لینک می باشند) و محتوای فایل های فلش اعم از همین منوها را نیز ایندکس می کند (کاربران ثبت نام کرده قادر به مشاهده لینک می باشند********.com/2008/06/improved-flash-indexing.html) و این مورد تا حدودی مشکلات سئو را برطرف میکند. 2. جاوا اسکریپت: بگذارید یک چیزی را همینجا بگویم! اگر میخواهید منوهای سایتتان با جاوا اسکریپت باشد، تاکید می کنم که اگر می توانید، خودتان آن را کدنویسی کنید وگرنه از کدهای آماده بپرهیزید، چرا که اگر با مشکلی رو به رو شوید، هرگز نمیتوانید مشکلتان را برطرف کنید، مگر اینکه از کسی کمک بگیرید! 3. سی اس اس: در این بین، تنها منوهایی که با استفاده از سی اس اس (کاربران ثبت نام کرده قادر به مشاهده لینک می باشند) ایجاد میشوند، از نظر سئو و ایندکس شدن کاملا بهینه و اصولی می باشند! چرا که محتوای این منوها در پرونده ی اکس اچ تی ام ال موجود است. و البته ایجاد و کدنویسی آن در مقایسه با فلش و جاوا اسکریپت، به نسبت راحت تر می باشد. اما خب مشکل دیگری که سر راه مان قرار می گیرد، عدم پشتیبانی مرورگری مثل IE (نسخه ی 6 به پایین) از این روش است! در ادامه توضیحات بیشتری در این زمینه می دهم و البته راه حل این مشکل را هم به زودی و در مقاله ای جداگانه منتشر خواهم کرد! چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟! کاربران ثبت نام کرده قادر به مشاهده لینک می باشند خب، چیزهایی که لازم داریم، اینها هستند: یک فایل سی اس اس، یک فایل اکس اچ تی ام ال و یک ویرایشگر متن، مثلا نوت پد ویندوز. برای ساختن فایل سی اس اس، می توانید یک فایل متنی ایجاد کنید و پسوند آن را به css تغییر دهید و ترجیحا نام فایل را style بگذارید. یعنی در نهایت بشود: style.css ساختید فایل رو؟! خب، حالا بریم سراغ کدنویسی… فایل سی اس اسی رو که ساختید، با کمک یک برنامه ی ویرایشگر متن، باز کنید. ما باید با کمک لیست ها این منو را طراحی کنیم. فقط کافیست کمی با تگ های ul و li، بازی کنیم. پس در ابتدا یک سلکتور با نام nav می نویسیم و پدینگ و مارجین ِش رو صفر میکنیم و به list-styleش هم مقدار none می دیم: #nav, #nav ul { padding: 0; margin: 0; list-style: none; } حالا یک اینتر بزنید و برید خط بعدی… اینبار باید به تگ li ای که در nav قرار می گیرد، دستورات زیر را بدهیم: #nav li { float: right; position: relative; width: 90px; height: 20px; background-color: #f6f6f6; color: #f75801; font: bold 70% Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; direction: rtl; border: 1px solid #e1e1e1; text-align: center; padding-top: 5px; } به خاصیت float مقدار right دادیم، چون می خواهیم منو در قسمت راست صفحه و به صورت شناور قرار بگیره. دوباره اینتر بزنید و برید خط پایین. این دستوری که می خواهیم بنویسیم، برای این هست که وقتی کرسر موس رفت روی عناوین منو، رنگ زمینه اش تغییر کند: #nav li:hover { background-color: #f1ff96; } باز هم اینتر بزنید. دو سلکتور زیر هم وضعیت ظاهری لینک ها را تعیین می کنند: #nav a:link, #nav a:visited { display: block; text-decoration: none; color: #868584; } #nav a:hover, #nav a:active { display: block; text-decoration: none; color: #f75801; } اینتر لطفا! قسمت مهم اینجاست. باید محتوای منو (یعنی همان زیرمنو) را مخفی نگه داریم تا زمانی که کرسر موس رفت روی عناوین منو: #nav ul { display: none; position: absolute; padding-top: 7px; } خاصیت display که با none مقداردهی شده، درواقع دستور میدهد که قسمت زیر منو، مخفی و غیر قابل نمایش بماند! اینتر بزنید باز هم! خب، حالا باید کمی ظاهر زیرمنو را سبک دهی کنیم. به زمینه و حاشیه اش رنگی بدهیم و موقعیتش را جمع و جور کنیم: #nav ul li { float: none; border: 1px solid #dded 6f; background-color: #f1ff96; font-size: 100%; margin: 0; padding: 0; padding-top: 5px; } اینتر فراموش نشه! باز هم با دستور زیر، رنگ زمینه ی گزینه های زیر منو ها را در زمان حرکت کرسر موس روی آن ها، تعیین می کینم: #nav ul li:hover { background-color: #f9ffcf; } آخرین اینتر را بزنید که می خواهیم یک کار قشنگ بکنیم:) یادتان که هست چند خط بالاتر، دستور مخفی کردن زیرمنوها را دادیم؟! حالا باید دستور بدهیم که هر زمان کرسر موس روی یکی از عناوین منو رفت، بی چون و چرا زیرمنوی آن نمایش یابد! فقط کافیست بگوییم: #nav li:hover ul { display: block; } زیبا نیست؟! خب، فایل سی اس اس تان تکمیل شد. حالا برویم سراغ فایل اکس اچ تی ام ال! خسته که نشدید خدای ناکرده؟! فایل اکس اچ تی ام ال را بسازید. برای ساختن آن مانند ساختن فایل سی اس اس عمل کنید و نام فایل را بگذارید menu. یعنی باید بشود: menu.htm یا menu.html خب. اول کدهای مربوط به هدر را می نویسیم: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “کاربران ثبت نام کرده قادر به مشاهده لینک می باشند”> <html xmlns=”کاربران ثبت نام کرده قادر به مشاهده لینک می باشند”> <head> <title>creating menus with CSS | Demo!</title> <meta کاربران ثبت نام کرده قادر به مشاهده لینک می باشند”Content-Type” content=”text/html; charset=utf-8″ /> <link rel=”stylesheet” type=”text/css” href=”style.css” /> </head> حالا تگ بدنه رو باز می کنیم و لیست مورد نظر رو ایجاد می کنیم و سلکتور nav رو بهش نسبت می دهیم و بعد از اون، عناوین و زیرمنوها رو اضافه می کنیم: <body> <ul id=”nav”> <li><a href=”#”>رنگ ها</a> <ul> <li><a href=”#”>آبی</a></li> <li><a href=”#”>سبز</a></li> <li><a href=”#”>نارنجی</a></li> </ul> </li> <li><a href=”#”>آموزش ها</a> <ul> <li><a href=”#”>سی اس اس</a></li> <li><a href=”#”>پی اچ پی</a></li> <li><a href=”#”>جی کوئری</a></li> </ul> </li> </ul> </body> واضح هست دیگه؟! در اینجا ما یک منو، دو عنوان به نام های “رنگ” و “آموزش ها” و برای هر عنوان، سه زیرمنو داریم. در آخر هم تگ html را ببندید! پشتیبانی از این روش همون طور که در ابتدا هم گفتم، این روش در نسخه ها ی 6 و پایین تر ِ مرورگر IE پشتیبانی نمی شود و کار نمی کند! دلیلش هم روشن است. ما برای این کار از خاصیت hover استفاده کرده ایم که این نسخه ها از مرورگر IE (یعنی نسخه های 6 به پایین) خاصیت hover را فقط برای لینک ها می شناسند و برایشان جای تعجب دارد که بخواهید با استفاده از خاصیت hover، مثلا متنی را ظاهر و یا مخفی کنید! اما از IE7 به بعد این مشکل رفع شده و این منویی که ایجاد کردیم به درستی کار خواهد کرد. سعی می کنم به زودی مقاله ای را در این رابطه منتشر کنم و در آن به حل این مشکل پردازم. یعنی این منو بتواند در IE6 و حتی پایین تر هم کار کند! اگر انجام مراحل بالا برایتان مشکل است، می توانید فایل اکس اچ تی ام ال و سی اس اس آماده ی این منو را از اینجا (کاربران ثبت نام کرده قادر به مشاهده لینک می باشند) دریافت نمایید. برای دیدن دموی این منو نیز به این صفحه (کاربران ثبت نام کرده قادر به مشاهده لینک می باشند) مراجعه فرمایید. سایت ما را در گوگل محبوب کنید با کلیک روی دکمه ای که در سمت چپ این منو با عنوان +1 قرار داده شده شما به این سایت مهر تأیید میزنید و به دوستانتان در صفحه جستجوی گوگل دیدن این سایت را پیشنهاد میکنید که این امر خود باعث افزایش رتبه سایت در گوگل میشود
این صفحه را در گوگل محبوب کنید
[ارسال شده از: سایت ریسک]
[مشاهده در: www.ri3k.eu]
[تعداد بازديد از اين مطلب: 607]
-
گوناگون
پربازدیدترینها