همچنین در صورت علاقه می توانید به روش قبلی با نگاه کنید با استفاده از CSSکه در مقاله توضیح داده شده است -
حالا به تجارت. مانند مقاله قبلی، اول از همه، بیایید بنویسیم HTMLکد منوی ما کد هم مثل اون مقاله هست که ابهام نداشته باشه و بیشتر قابل درک باشه. منویی با دو آیتم و هر دو دارای منوهای فرعی هستند.
اگر چنین خطی یا مشابهی دارید که قبلاً کتابخانه را متصل کرده است، دیگر نباید این کار را انجام دهید.
در خط دوم اسکریپت، id منوی خود را مشخص می کنیم. اگر درخواست بدهید این روشبه من منوی شخصی، سپس به طور طبیعی نام را به نام خود تغییر دهید. در این مورد، این است #ناو_آهسته.
همچنین می توانید زمان انیمیشن را تنظیم کنید. در این اسکریپت باز و بسته شدن روی 400 میلی ثانیه تنظیم شده است که 0.4 ثانیه است. در صورت تمایل می توانید آن را به مقدار بزرگتر یا کوچکتر تغییر دهید.
مرحله آخر، اضافه کردن سبک ها. آنها بسیار شبیه به سبک های مقاله گذشته هستند، فقط فاقد ویژگی های انیمیشن CSS هستند.
#slow_nav > ul(عرض: 500 پیکسل؛ حاشیه: 25 پیکسل خودکار 0؛ ) #slow_nav > ul > li (لیست-سبک: هیچکدام؛ نمایش: بلوک درون خطی؛ موقعیت: نسبی؛ padding: 0؛ ) #slow_nav a(text- دکوراسیون: هیچکدام؛) #slow_nav > ul > li > a( اندازه قلم: 18 پیکسل؛ padding: 5px؛ پس‌زمینه رنگ:#333؛ رنگ:#fff; ) #slow_nav li ul( موقعیت: مطلق؛ سبک فهرست: هیچ؛ متن-تراز: مرکز؛ بالا: 15 پیکسل؛ اندازه قلم: 15 پیکسل؛ چپ: 0؛ حاشیه: 0؛ پد: 0؛ نمایش: هیچ؛ bottom:1px solid #888; ) #slow_nav li ul li:last-child( border-bottom:none; ) #slow_nav li ul li a(padding:5px 12px; color:#fff; display:block; ) #slow_nav li ul li:hover( background-color:#444; ) #slow_nav li ul li:first-child( margin-top:25px; position:relative; ) #slow_nav li ul li:first-child:before( content:"" ؛ موقعیت: مطلق؛ عرض: 1 پیکسل؛ ارتفاع: 1 پیکسل؛ حاشیه: 5 پیکسل شفاف؛ رنگ حاشیه پایین: # 333؛ سمت چپ: 10 پیکسل؛ بالا: - 10 پیکسل؛ )
همچنین به سبک های یک اضافه شده است خط جدید، که اسکریپت به درستی با آن کار می کند. برای عنصر - #slow_nav li ulدارایی تنظیم شده است نمایش: هیچ. اگر آن را اضافه نکنید، در ابتدا منوی کشویی قابل مشاهده خواهد بود و تنها پس از نگه داشتن نشانگر روی آن ناپدید می شود. همه سبک های دیگر مانند مقاله قبلی هستند.
مانند روش قبلی، این روش را می توان نه تنها برای منوهای خودنویس، بلکه برای همان منوهای پویا که توسط سیستم های مدیریت محتوا ایجاد می شود، اعمال کرد. وردپرس. برای این کار باید استایل ها را کمی اصلاح کنید و تمام. یعنی نیازی به استفاده از اولین کد HTML نیست، فقط از استایل ها استفاده می شود. در استایل ها باید نام شناسه #slow_nav را با چیزی که خواهید داشت جایگزین کنید و امکان اصلاح جزییات چیز دیگری وجود دارد. من وارد جزئیات نمی شوم. هر مورد نیاز به یک رویکرد شخصی دارد، بنابراین متاسفم 🙂
همین، از توجه شما متشکرم. 🙂
اغلب در قالب ها می توانید عناصر ناوبری کشویی را پیدا کنید. توسعه دهندگان استفاده می کنند نوع داده شدهمنوهای مخفی برای نمایش پیوندهای مخفی اضافی که به صورت موضوعی مرتبط با آیتم اصلی هستند. می توانید نمونه هایی از پانل های کشویی یا منوهای مختلف به سبک آکاردئونی را بیابید که این اصل ناوبری را اجرا می کنند.
ولی در این درسما یک منوی کشویی ساده می سازیم با استفاده از jQuery. این با یک روش انیمیشن برای ایجاد جلوه های تاخیری کار می کند. جلوه های انتقال CSS3 نیز همراه با کد جاوا اسکریپت اعمال می شود. نتیجه یک فضای خالی برای ناوبری سایت است.
HTML
بیایید ابتدا یک قالب اولیه HTML5 بسازیم. نیاز است آخرین نسخه jQuery، که ما از API گوگل دریافت می کنیم. فایل استایل را نیز اضافه کنید styles.cssکه در زیر نشان داده خواهد شد:
اکنون ساختاری را در نظر بگیرید که در بالای لیست نامرتب بالای صفحه ساخته شده است. کل لیست در یک عنصر HTML5 پیچیده شده است برای نتایج بهتر سئو
ساختار کد بسیار ساده است. هر آیتم لیست دارای یک افکت برجسته زمانی است که نشانگر ماوس در آن قرار دارد. تمام عناصر UL داخلی در آیتم فهرست اصلی قرار دارند، بنابراین هنگام انتقال به آیتم های منوی کشویی، تمرکز ورودی از بین نمی رود.
سبک های ناوبری
شیوه نامه حاوی کدی برای بازنشانی مقادیر ویژگی به پیش فرض است. بسیاری از توسعه دهندگان فایلی از Eric Meye را شامل می شوند، اما برای مورد ما این فایل بسیار سخت است. علاوه بر این، کد روی سرور دیگری ذخیره می شود که به خودی خود تصمیم بدی در این مورد است.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, مخفف, آدرس, big, cite, code, del, dfn, em، img، ins، kbd، q، s، samp، کوچک، ضربه، قوی، زیر، sup، tt، var، b، u، i، مرکز، dl، dt، dd، ol، ul، li، مجموعه فیلدها، فرم، برچسب، افسانه، جدول، عنوان، tbody، tfoot، thead، tr، th، td، مقاله، کنار، بوم، جزئیات، جاسازی، شکل، عنوان شکل، پاورقی، سرصفحه، hgroup، منو، ناوبری، خروجی، یاقوت، بخش، خلاصه، زمان، علامت، صدا، ویدئو (حاشیه: 0؛ بالشتک: 0؛ حاشیه: 0؛ اندازه قلم: 100%؛ فونت: ارث بری؛ تراز عمودی: خط پایه؛ طرح کلی: هیچ؛ -webkit-font- صاف کردن: antialiased؛ -webkit-text-size-adjust: 100%؛ -webkit-box-sizing: border-box؛ -moz-box-sizing: border-box; box-sizing: border-box;) html ( ارتفاع : 101٪؛ ) بدن ( پس زمینه: #eaeaea url ("images/bg.png")؛ اندازه قلم: 62.5٪؛ ارتفاع خط: 1؛ فونت خانواده: Arial، Tahoma، sans-serif؛ padding-bottom : 60 پیکسل؛ ) مقاله، کنار، جزئیات، شکل، شکل، پاورقی، سرصفحه، h گروه، منو، ناوبری، بخش (نمایش: بلوک؛ ) ol، ul (لیست-سبک: هیچکدام؛ ) نقل قول، q ( نقل قول: هیچکدام؛ ) بلوک نقل قول:قبل، بلوک نقل قول:بعد، q:قبل، q:افتر ( محتوا: ""؛ محتوا: هیچکدام؛ ) قوی ( فونت -وزن: پررنگ؛ ) جدول (حاشیه-جمع کردن: جمع کردن؛ فاصله حاشیه: 0؛ ) img (حاشیه: 0؛ حداکثر عرض: 100%؛ )
یک ویژگی جالب در کد وجود دارد وب کیت-فونت-صاف کردن. این برنامه برای صاف کردن فونت ها هنگام اجرای کد در مرورگرهای زیر طراحی شده است کنترل مک OSX یا iOS.
حالا بیایید به منوی خود برویم.
#ddmenu (نمایش: بلوک؛ عرض: 100%؛ ارتفاع: 80 پیکسل؛ حاشیه: 0 خودکار؛ بالشتک: 0 15 پیکسل؛ پس‌زمینه: #fff؛ شعاع حاشیه: 6 پیکسل؛ حاشیه: 1 پیکسل rgba جامد (0، 0، 0، 0.15 ؛ box-shadow: 0 1px 1px rgba(20, 20, 20, 0.2)؛ مکان نما: اشاره گر؛ طرح کلی: هیچ؛ وزن قلم: پررنگ؛ رنگ: #8aa8bd؛ ) #ddmenu li (نمایش: بلوک؛ موقعیت: نسبی؛ شناور: سمت چپ؛ اندازه قلم: 1.45em؛ متن-سایه: 1px 1px 0 #fff؛ حاشیه سمت راست: 1px جامد #dae0e5; ) #ddmenu li a (نمایش: بلوک؛ شناور: چپ؛ بالشتک: 0 12px ؛ ارتفاع خط: 78 پیکسل؛ وزن قلم: پررنگ؛ متن تزئینی: هیچکدام؛ رنگ: #6c87c0؛ -webkit-transition: همه 0.2 ثانیه خطی؛ -moz-transition: همه 0.2 ثانیه خطی؛ -o-transition: همه 0.2 ثانیه خطی؛ انتقال: همه 0.2 ثانیه خطی؛ ) #ddmenu li:hover > a ( رنگ: #7180a0؛ پس‌زمینه: #d9e2ee؛ ) #ddmenu ul (موقعیت: مطلق؛ بالا: 88 پیکسل؛ عرض: 130 پیکسل؛ پس‌زمینه: # fff؛ نمایش: هیچکدام؛ حاشیه: 0؛ بالشتک: 7 پیکسل 0؛ سبک فهرست: هیچکدام؛ شعاع حاشیه: 3 پیکسل؛ حاشیه: 1 پیکسل rgba جامد (0، 0، 0، 0.2)، کادر سایه: 0 0 5px rgba(0، 0، 0، 0.2)؛ )
افزودن انتخابگر #ddmenuulبرای برجسته کردن تمام عناصر داخلی در هر آیتم لیست، زیرا تعیین فاصله برای آنها با استفاده از موقعیت مطلق مهم است. ما همچنین یک انتقال خطی را برای همه پیوندها اضافه می کنیم، که وقتی ماوس را روی آنها نگه دارید ظاهر می شود.
حالا بیایید به ایجاد نشانگر عنصر بالا نگاه کنیم. با استفاده از ویژگی چرخش و یک جعبه جهانی با پس زمینه تیره برای سایه شکل می گیرد. با موقعیت افست، یک عنصر از ساختار ما بالاتر از دیگری قرار می گیرد و یک نمایش بصری از اشاره گر در منوی کشویی را تشکیل می دهد.
#ddmenu ul:after ( محتوا: ""؛ عرض: 0؛ ارتفاع: 0؛ موقعیت: مطلق؛ پایین: 100%؛ سمت چپ: 8 پیکسل؛ حاشیه-عرض: 0 8 پیکسل 8 پیکسل؛ سبک حاشیه: جامد؛ حاشیه-رنگ : #fff transparent; ) #ddmenu ul:before ( محتوا: ""؛ عرض: 0؛ ارتفاع: 0؛ موقعیت: مطلق؛ پایین: 100%؛ سمت چپ: 4 پیکسل؛ عرض حاشیه: 0 10 پیکسل 10 پیکسل 10 پیکسل؛ سبک حاشیه : جامد؛ رنگ حاشیه: rgba(0، 0، 0، 0.1) شفاف؛ ) #ddmenu ul li (نمایش: بلوک؛ عرض: 100%؛ اندازه قلم: 0.9em؛ متن-سایه: 1px 1px 0 #fff - o-transition: همه 0.2 ثانیه خطی؛ انتقال: همه 0.2 ثانیه خطی؛ ) #ddmenu ul li a:hover ( پس زمینه: #e9edf3; )
جاوا اسکریپت
بخش اول کد، کلیک روی پیوندها را قطع می کند و پردازش آنها را به طور پیش فرض متوقف می کند (بارگیری صفحات در URL).
قسمت دوم کد همه جادو را انجام می دهد. ما یک کنترل کننده رویداد را برای فرآیند شناور مورد فهرست پیوست می کنیم. کنترل کننده انیمیشن فعال فعلی را متوقف می کند و زیر جدید را با .slideDown() نمایش می دهد. ما همچنین یک تأخیر کوتاه را تنظیم کردیم تا فقط به انتخاب واقعی مورد پاسخ دهد.
امروز می خواهم در مورد نسل جدید ناوبری سایت انتخابی انجام دهم - منوهای تمام صفحه. آنها در مواردی استفاده می شوند که خود ناوبری در صفحه نیست، فقط یک دکمه وجود دارد که با کلیک کردن، منو باز می شود. یک اصل مشابه را می توان در چارچوب - مشاهده کرد، هنگامی که نوار ناوبری دیگر مناسب نیست، بلوک با لیست آیتم های منو به سادگی پنهان می شود. در جای خود، یک دکمه با تصویر، به عنوان یک قاعده، از سه راه راه ظاهر می شود. با فشار دادن، منوی کامل ظاهر می شود. در بسیاری از سایت های مدرن، منو به طور دائمی حتی در حالت پنهان است صفحه نمایش های بزرگ. این کار برای لود نشدن صفحه انجام می شود. اگرچه اکنون نباید این کار را در همه پروژه های خود انجام دهید. اگر منو در درجه دوم اهمیت قرار دارد، می توانید آن را پنهان کنید، اما اگر یک سایت بزرگ با ساختار پیچیده دارید، بهتر است از این گزینه استفاده نکنید. بنابراین. از جانب اصل کلیکار مرتب شد، اما این نوع منو کاملاً استاندارد است، من چیز جدیدی می خواهم. چندی پیش، من متوجه سایت هایی شدم که در آنها ناوبری نه تنها از بین می رود، بلکه به صورت تمام صفحه در یک پنجره پاپ آپ باز می شود. چیزی شبیه به پانل های اسلاید محبوب، اما کل آن کل فضای کار را اشغال می کند. پشت سایت ها، فردی پلاگین های جی کوئریو راه حل های css3 که در واقع این موضوع در مورد آنهاست.
من شخصاً این اجرای منوی ناوبری را بسیار دوست دارم ، زیرا برای کاربران با دستگاه های تلفن همراه راحت است و بسیار چشمگیر به نظر می رسد مانیتورهای بزرگ. سایت هایی از منوهای تمام صفحهبیشتر و بیشتر ظاهر می شود جی کوئری رایگانافزونه های بیشتری نیز وجود دارد و این مفهوم به تدریج در حال تبدیل شدن به یک روند است.
بنابراین. برای توجه شما 20 پلاگین منوی تمام صفحه jQueryدر پنجره بازشو
ناوبری فشاری تمام صفحه
یکی از بهترین ها تا به امروز، رایگان اسکریپت ناوبری تمام صفحه. هنگامی که دکمه "منو" را فشار می دهید، ناوبری ظاهر می شود، به علاوه یک بلوک با مخاطبین ارائه می شود که برای بازدید کننده سایت بسیار راحت است، زیرا مسیر تماس با 1 کلیک کمتر می شود. می خواهم توجه داشته باشم که فیلمنامه و دستگاه های تلفن همراهبلوک با مخاطبین تحت ناوبری می شود.یک افزونه بسیار زیبا به طراحی پنجره، نماد SVG متحرک است. به طور پیش فرض، مانند سه نوار به نظر می رسد، اما با کلیک کردن، نماد به یک فلش تبدیل می شود که نشان می دهد منو می تواند پنهان شود.
ناوبری متحرک گرد
یکی دیگه خیلی باحاله اسکریپت ناوبری تمام صفحه جی کوئریاز همان توسعه دهندگان افزونه بالا. این اسکریپتجلوه ظاهری بسیار سرد و غیرمعمولی دارد. هنگامی که دکمه منو را فشار می دهید، از نماد، با استفاده از css3، موجی از کل مانیتور ساطع می شود که در پس زمینه آیتم های منو رشد می کند. همان اثر پنهاناین ناوبری روی دستگاه های تلفن همراه عالی عمل می کند، اما با توجه به اینکه افکت spawn بسیار سنگین است، فکر می کنم در گوشی های قدیمی کند خواهد بود (من آن را تست نکرده ام، پس خوشحال می شوم اگر تجربه خود را در نظرات بنویسید) .
ناوبری نمایش صفحه چشم انداز
دیدنی دیگه اسکریپت منوی تمام صفحه. هنگامی که دکمه منو را فشار می دهید، قسمت قابل مشاهده صفحه با جلوه به کناری حرکت می کند، یک منو در فضای آزاد شده ظاهر می شود. چندین افکت انیمیشن اسپان وجود دارد.متأسفانه، در تلفن همراهبه درستی کار نمی کند: اگر آیتم های منو زیادی وجود دارد و روی صفحه قرار نمی گیرند، پیمایش عمودی ظاهر نمی شود و ناوبری به سادگی قطع می شود.
صفحه کامل معرفی و ناوبری
خیلی ساده اسکریپت منوی تمام صفحه. نمی توانم بگویم که بسیار مؤثر است، اما در دستگاه های تلفن همراه راحت خواهد بود.
منوی سمت پرواز
یکی دیگر منوی تمام صفحه، که در آن قسمت قابل مشاهده با جلوه 3 بعدی به کناری منتقل شده است، اما قبلاً از توسعه دهندگان دیگر. بر خلاف اسکریپت مشابه قبلی، این اسکریپت باید روی دستگاه های تلفن همراه به خوبی کار کند، زیرا اگر منو روی صفحه قرار نگیرد، اسکرول عمودی ظاهر می شود.
با کمک جی کوئری کلاسیک، مقالات زیادی در این زمینه نوشته شده است. من سعی کردم با اضافه کردن قابلیت باز نگه داشتن بخش های منو (یا بسته، بسته به انتخاب کاربر) هنگام حرکت در سایت، کار را کمی پیچیده کنم.
برای حل این مشکل تصمیم گرفتم از افزونه jQuery Cookie استفاده کنم. مزیت این افزونه این است که عملیات در سمت کلاینت انجام می شود که به نوبه خود بار روی سرور را کاهش می دهد. منهای - اگر کاربر JS را غیرفعال کرده باشد، افزونه کار نخواهد کرد. اما من این گزینه را در نظر نمی گیرم، زیرا در این صورت تمام نکته منوی کشویی به طور کلی ناپدید می شود. بنابراین، بیایید شروع کنیم.
ابتدا باید خود فریم ورک جی کوئری و پلاگین جی کوئریبیسکویت ها:
کد: HTML
بعدی نشانه گذاری است. مانند یک لیست ساده به نظر می رسد، هیچ چیز ماوراء طبیعی نیست. تنها چیزی که باید به آن توجه کنید این است که در برچسب
باید یک عنوان وجود داشته باشد، وقتی روی آن کلیک کنید، یک منو خارج می شود:
کد: HTML
و غیره تا بی نهایت. در حال حاضر، جالب ترین. در کد من چند نظر اضافه خواهم کرد تا تقریباً واضح باشد، chopach
کد: JS
$(document).ready(function()(
if($.cookie("num_open_ul"))( // بررسی کنید آیا ورودی کوکی وجود دارد
if($.cookie("num_open_ul") != 0)( // و این ورودی برابر با 0 نیست
var number_eq = parseInt($.cookie("num_open_ul")-1);
$(".navigation_body").eq(number_eq).show().prevAll("#navigation h2.navigation_head:first").addClass("active_navigation");
}
};
$("#navigation h2.navigation_head").click(function()( // وقتی کلیک کردید، این تابع کار خواهد کرد
if(!$(this).next().is(":visible"))(
$("div.navigation_body").siblings("div.navigation_body").slideUp(500); // اگر بقیه باز هستند، همه را ببندید به جز مورد فعلی
}
$(this).next("div.navigation_body").slideToggle(500).siblings("div.navigation_body").slideUp(500);
$(this).toggleClass("active_navigation").siblings("#navigation h2.navigation_head").removeClass("active_navigation"); // open یک کلاس برای تغییر سبک اضافه کرد
setTimeout (fncookie، 600)؛ //نوشتن روی خود کوکی ها با تاخیر، به طوری که اسکریپت قبل از نوشتن زمان داشته باشد تا کار را کامل کند (500 میلی ثانیه - سرعت، تاخیر - 600 میلی ثانیه)
});
تابع fncookie()( // خود تابع ضبط
varnumber_open_ul = 0;
var i = 0;
$("div.navigation_body").each(function()(
i++;
if($(this).is(":visible"))(
number_open_ul = i;
}
$.cookie("num_open_ul", number_open_ul, (expires:3, مسیر:"/")); // 3 روز برای کل سایت ذخیره کنید.
});
}
});
یعنی الان اگر کاربر منو را باز کرد، از سایت خارج شد و تا یکی دو روز دیگر به آن بازگشت، باز هم منو برای او باز می ماند.
و در نهایت، یک لمس کوچک باقی مانده است: در واقع، سبک های css. شما این کار را به سلیقه خود انجام می دهید، در مثالی که من طرح تمام شده را از یکی از پروژه ها گرفتم
کد: CSS
#جهت یابی(
حاشیه: 80 پیکسل خودکار؛
عرض: 250 پیکسل
}
#navigation h2, #navigation h2.navigation_head (
اندازه فونت: 18px;
font-weight: bolder;
پس زمینه رنگ: #ffb6c1;
پس‌زمینه-تصویر: -webkit-gradient (خطی، 50٪ 0.50٪ 100٪، توقف رنگ (0٪، #ffe9e9)، توقف رنگ (100٪، #ffb6c1)).
پس زمینه-تصویر: -webkit-linear-gradient(#ffe9e9,#ffb6c1);
پس زمینه-تصویر: -moz-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -o-linear-gradient(#ffe9e9,#ffb6c1);
background-image: linear-gradient(#ffe9e9,#ffb6c1);
بالشتک: 5px 3px 6px 3px
حاشیه: خودکار;
موقعیت: نسبی;
}
#navigation h2.navigation_head:after (
موقعیت: مطلق;
سمت راست: 5px;
رنگ: #550000;
محتوا: "cssb";
}
#navigation h2:hover, #navigation h2.navigation_head:hover (
مکان نما: اشاره گر
}
.active_navigation(
پس‌زمینه-تصویر: -webkit-gradient(خطی، 50% 0.50% 100%, توقف رنگ (0%,#ffb6c1)، توقف رنگ (100%,#ffe9e9)) !مهم.
پس زمینه-تصویر: -webkit-linear-gradient(#ffb6c1,#ffe9e9) !important;
پس زمینه-تصویر: -moz-linear-gradient(#ffb6c1,#ffe9e9) !important;
پس زمینه-تصویر: -o-linear-gradient(#ffb6c1,#ffe9e9) !important;
background-image: linear-gradient(#ffb6c1,#ffe9e9) !important;
}
.active_navigation:after (
موقعیت: مطلق;
سمت راست: 5px;
محتوا: "cssd" !important;
}
.navigation_body(
نمایش: هیچ
}
#ناوبری ul (
حاشیه: 0;
بالشتک: 0;
list-style-type: هیچکدام;
}
* html #navigation ul li(
ارتفاع: 1%;
}
#navigation div.navigation_body ul li (
حاشیه سمت چپ: 10 پیکسل؛
}
#ناوبری a (
font-family: "Times New Roman";
display:block;
رنگ: #918871;
padding: 3px
background-color: #ffe3e0;
border-bottom: 1px solid #fff;
text-decoration: هیچ;
}
#ناوبری a:hover(
رنگ: #585858;
پس زمینه رنگ: #ffb6cc;
}
اگر کسی توجه کرد، در اینجا سعی کردم از محتوا استفاده کنم: ویژگی +/- وقتی / بسته است منو را باز کنید، اما می توانید یک تصویر یا هر طرح دیگری اضافه کنید. شما می توانید نمونه ای از کارهایی که ما انجام دادیم را در اینجا مشاهده کنید
مثل همیشه، آماده گوش دادن به سوالات و تلاش برای پاسخ به آنها. بهترین ها، بهترین ها.
برای اینکه ناوبری خود را در قالب یک منوی کشویی عمودی در jQuery با لیست کشویی زیرمجموعه ها بنویسید، باید اصل این مکانیسم را درک کنید. اما ابتدا اجازه دهید نگاهی به ساختار ناوبری بیندازیم:
جهت یابی
همانطور که ممکن است حدس بزنید، منوی کشویی ما بر اساس لیست های گلوله ای است. هنگامی که ماوس را روی یک برچسب قرار می دهید
- تست 1
- تست 2
- تست 3
- تست 4
اما چگونه، شما بپرسید؟ بله، در واقع بسیار ساده است. ابتدا بیایید شیوه نامه لیست ناوبری خود را درک کنیم، به این صورت خواهد بود:
بدنه ( پس‌زمینه: rgb(244، 244، 244)؛ فونت-خانواده: Verdana؛ وزن قلم: 100؛ ) /*---Navigation---*/ #menu (عرض: 200 پیکسل؛ حاشیه: 0؛ padding: 2px؛ ) #menu li (list-style-type: هیچ؛ ) .menu ( موقعیت: نسبی؛ پس‌زمینه: شکلات؛ پس‌زمینه: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3) ؛ پس‌زمینه: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3؛ پس‌زمینه: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3؛ حاشیه : 1px جامد #2AC4B3؛ .menu:hover ( پس‌زمینه: #00c؛ پس‌زمینه: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); پس‌زمینه: -webkit-linear-gradient( بالا، rgb(230، 230، 230)، #0CBFAB؛ پس‌زمینه: -o-linear-gradient(بالا، rgb(230، 230، 230)، #0CBFAB؛ ) . دهانه منو (عرض: 11 پیکسل؛ ارتفاع: 11 پیکسل؛ نمایشگر: بلوک؛ موقعیت: مطلق؛ بالا: 8 پیکسل؛ سمت راست: 10 پیکسل؛ مکان نما: نشانگر؛ ) .menu ul (عرض: 150 پیکسل؛ حاشیه: 0؛ پد: 1 پیکسل؛ موقعیت: مطلق؛ بالا: -1 پیکسل؛ سمت چپ: 198 پیکسل؛ ) .menu ul li ( پس زمینه: شکلات؛ پس زمینه: -moz-linear-gradient(بالا، rgb(198، 255، 242)، #2AC4B3); پس زمینه: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); پس زمینه: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); حاشیه: 1px جامد #fff; .menu ul li:hover ( پس‌زمینه: #00c؛ پس‌زمینه: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); پس‌زمینه: -webkit-linear-gradient(top, rgb( 230، 230، 230)، #0CBFAB؛ پس‌زمینه: -o-linear-gradient(بالا، rgb(230، 230، 230)، #0CBFAB); دکوراسیون: هیچ؛ رنگ: سفید؛ ) .menu a:hover (رنگ: سفید؛ ) /*---END---*/
از شیوه نامه می توان دریافت که لیست کشویی در ابتدا مخفی نیست، اما ما این لحظه را با استفاده از:
$(document).ready(function()($(".menu ul").hide(); $(".menu span").css("background"، "url("down.png")") ; $("#menu li").hover(function()($(this).children("ul").show(); /*معادل $("ul", this).show();* / $(this).find("span").css("background", "url("right.png")"); /*معادل $("span"، this).css("background", "url ("right.png")");*/ ),function()($(this).children("ul").hide(); /*معادل $("ul", this).hide (); */ $(this).find("span").css("background"، "url("down.png")"); /*$("span", this).css("background" "، " url("down.png")");*/ ))))
حالا بیایید نگاهی دقیق تر به کد منوی کشویی jQuery بیندازیم، زیرا. شاید برای کسی کاملاً روشن نباشد. در همان ابتدا ساختار زیر نوشته شده است:
$(document).ready(function()( ))
این شامل دستوراتی است که باید بعد از آن اجرا شوند بارگذاری کاملصفحات این کار به گونه ای انجام می شود که در صورت عدم امکان یافتن هر شیئی به دلیل اینکه هنوز بارگذاری نشده است، انواع خطاها ظاهر نمی شوند.
$(".menu ul").hide();
این مدخل به چه معناست؟ ساختار "$()" به شما امکان می دهد عناصر را انتخاب کنید. بنابراین، در همان ابتدا، باید لیست کشویی خود را مخفی کنیم. ساختار "$()" را می گیریم و شی مورد علاقه خود را در آن می نویسیم. در مورد ما، این شی یک لیست گلوله ای با کلاس "menu" خواهد بود. در مرحله بعد، روش "hide ()" را می نویسیم که به ما امکان می دهد شی مورد علاقه خود را پنهان کنیم.
$(".menu span").css("پس زمینه"، "url("down.png")");
او چه کار می کند؟ به دنبال برچسبی می‌گردد که عنصر والد آن به کلاس "menu" اختصاص داده شده است و با استفاده از روش "css("background", "url("down.png")")" ویژگی سبک "background" را به مقدار تنظیم می‌کند. "url("down. png")". "down.png" نمادی است که نشان می دهد لیست را می توان گسترش داد.
سپس ساخت و ساز می آید، که لیست ما را باز می کند، به نظر می رسد این است:
$("#menu li").hover(function()( $(this).children("ul").show(); $(this).find("span").css("پس زمینه"، " url("right.png")"); ),function()($(this).children("ul").hide(); $(this).find("span").css("پس زمینه" , "url("down.png")");)
ما به دنبال برچسبی هستیم که عنصر والد آن به id="menu اختصاص داده شده باشد. سپس متد "hover" و دو تابع داخل پرانتز آمده است. اولین تابع زمانی اجرا می شود که نشانگر ماوس در حالت شناور قرار می گیرد و تابع دوم در صورتی اجرا می شود که نشانگر ماوس عنصر مورد نظر را به ما بسپارد.
تابع اول می گوید:
$(this).children("ul").show(); $(this).find("span").css("پس زمینه"، "url("right.png")");
ساختار "$(this)" به این معنی است که ما به عنصری که روی آن هستیم علاقه مند هستیم این لحظهاشاره کرد (این از انگلیسی این). و به تگ اشاره کردیم
پس از آن، ما به دنبال فرزندان تگ هستیم، یعنی: تگ و پس‌زمینه آن به نماد دیگری تغییر می‌کند.
پس از آن، پس از خروج مکان‌نمای ماوس از عنصر فهرست، تابعی نوشته می‌شود که همه چیز را همانطور که در ابتدا بود انجام می‌دهد:
Function()($(this).children("ul").hide(); $(this).find("span").css("background"، "url("down.png")"); )
برای اینکه کد نوشته شده jQuery کار کند و منوی کشویی ما به درستی کار کند، باید کتابخانه را از وب سایت jquery.com دانلود کرده و با نوشتن آن پس از تگ باز، آن را وارد کنید.
رشته.خودشه! در پایان، می خواهم توجه داشته باشم که اگر سایت شما کاملاً سنگین باشد، احتمالاً اسکریپت خیلی دیر اجرا می شود (بارگیری سایت زمان زیادی طول می کشد) و کاربران می بینند که چگونه ابتدا به طور کامل باز می شود و تنها پس از آن پنهان می شود. ، می بینید، بسیار زشت است. بنابراین، لازم است تمام دستورات jQuery را فراتر از این ساختار انتقال دهیم: "$(document).ready(function()())". شبیه این خواهد شد:
$(document).ready(function()( )) $(".menu ul").hide(); $(".menu span").css("پس زمینه"، "url("down.png")"); $("#menu li").hover(function()( $(this).children("ul").show(); $(this).find("span").css("پس زمینه"، " url("right.png")"); ),function()($(this).children("ul").hide(); $(this).find("span").css("پس زمینه" ، "url("down.png")"); ))
اتصال اسکریپت ماباید از تگ منتقل شود
در پایان، قبل از تگ بسته شدن، یا می توانید اسکریپت را درست بعد از لیست گلوله ای قرار دهید.(دانلود: 314)
