همچنین که علاقه مند است، شما می توانید به راه قبلی نگاه کنید با استفاده از CSSکه در مقاله شرح داده شده است -
در حال حاضر به کسب و کار. همانطور که در آخرین مقاله، اول از همه، اجازه دهید نوشتن html کد منو ما کد مانند آن مقاله است به طوری که هیچ سردرگمی وجود ندارد و قابل فهم تر بود. منو با دو مورد و هر دو دارای یک زیرمجموعه هستند.
اگر شما چنین خطی یا مشابه دارید، که قبلا قبلا کتابخانه را متصل کرده اید، نباید دوباره آن را انجام دهید.
در رشته دوم اسکریپت، IDI منوی ما را مشخص می کنید. اگر شما استفاده می کنید این روش به منوی خود، سپس به طور طبیعی نام خود را تغییر دهید. که در این مورد این هست - #slow_nav.
شما همچنین می توانید زمان انیمیشن را سفارشی کنید. این اسکریپت برای باز کردن و بسته شدن 400 میلی ثانیه است، این 0.4 ثانیه است. اگر می خواهید به بزرگتر یا کوچکتر تغییر دهید.
آخرین مرحله، سبک ها را اضافه کنید. آنها بسیار شبیه به سبک های مقاله گذشته هستند، هیچ خواص CSS انیمیشن
#slow_nav\u003e ul (عرض: 500px؛ حاشیه: 25px خودکار 0؛) #slow_nav\u003e ul\u003e li (لیست سبک: هیچ؛ نمایش: inline-block؛ موقعیت: نسبی؛ padding: 0؛) #slow_nav a (text- دکوراسیون: هیچ کدام؛) #slow_nav\u003e ul\u003e li\u003e a (font-size: 18px؛ padding: 5px؛ پس زمینه رنگ: # 333؛ رنگ: #fff؛) #slow_nav li ul (موقعیت: مطلق؛ سبک لیست: هیچ؛ text-align: center؛ top: 15px؛ font-size: 15px؛ سمت چپ: 0؛ حاشیه: 0؛ padding: 0؛ صفحه نمایش: هیچکدام؛) #slow_nav li ul li li (background- پایین: 1px Solid # 888؛) #slow_nav li ul li: آخرین فرزند (پایین مرز: هیچ؛) #slow_nav li ul li a (padding: 5px 12px؛ رنگ: #fff؛ صفحه نمایش: بلوک؛) #slow_nav li ul ul لی: شناور (پس زمینه رنگ: # 444؛) #slow_nav li ul li: اولین فرزند (مارجین-top: 25px؛ موقعیت: نسبی؛) #slow_nav li ul li: اولین فرزند: قبل (محتوا: "؛ موقعیت : مطلق؛ عرض: 1 پیکسل؛ ارتفاع: 1 پیکسل؛ مرز: 5px جامد شفاف؛ مرز پایین رنگ: # 333؛ چپ: 10 پیکسل؛ بالا: -10 پیکسل؛)
همچنین به سبک ها اضافه شده است خط جدیدکه اسکریپت به درستی کار می کند. برای عنصر - #slow_nav li ul. اموال تعریف شده است نمایش: هیچکدام؛. اگر آن اضافه نشده است، منوی کشویی در ابتدا قابل مشاهده است و تنها پس از مکان نما بر روی آن ناپدید می شود. تمام سبک های دیگر به عنوان مقاله قبلی.
مانند یک روش گذشته، این را می توان نه تنها به منوی خود شامل، بلکه همچنین به همان منوی پویا که توسط سیستم مدیریت ایجاد می شود، مانند وردپرس. برای انجام این کار، شما باید سبک ها و همه را تنظیم کنید. به عبارت دیگر، اولین کد HTML نیازی به استفاده نیست، فقط سبک ها. در سبک شما نیاز به جایگزینی نام iyidi #slow_nav در مورد آنچه که با شما خواهد بود، خوب، ممکن است چیزی را در تعویض درست کنید. من جزئیات را متوقف نخواهم کرد. برای هر مورد، شما نیاز به یک رویکرد شخصی دارید، بنابراین من متاسفم 🙂
این همه، متشکرم از توجه شما. 🙂
در این مقاله ما ساده خواهیم بود منوی کشویی با استفاده از jQuery برای شروع، به فایل نسخه ی نمایشی نگاه کنید. ما امیدواریم که شما حتی کمی مبانی جی کوئری و CSS را بدانید. جنبه های کلیدی ایجاد این منوی کشویی استفاده از CSS: پارامترهای موقعیت، بالا، چپ، Z-index.
با استفاده از این پارامترها، می توانیم مطمئن باشیم که منوی ما دقیقا تحت پیوند قرار می گیرد که مکان نما را نوشته شده است، و قطعا تمام عناصر دیگر خواهد بود. ما همچنین منو را برای نمایش در هنگام شناور نشان می دهیم، و زمانی که مکان نما به سمت اختصاص داده می شود، ناپدید می شود. برای پیاده سازی این رویدادها، از جی کوئری استفاده خواهیم کرد: توابع موزایور و موش ها. و این همه ما باید یک منوی کشویی ایجاد کنیم!
نتیجه نهایی فایل DEMO و لینک دانلود
کد HTML
کد HTML از منوی کشویی را بررسی کنید:
همانطور که می بینید، در اینجا ما از لیست های اختلال برای اجرای آیتم های منو استفاده خواهیم کرد. هر مرجع منو کلاس منوی کشویی را تعیین می کند و منوی کشویی خود را تحت پوشش کلاس زیر لینک قرار می دهد. نام های کلاس از جی کوئری استفاده می شود تا مشخص شود کدام منوی شما نیاز به نمایش دارد.
کد CSS
کد CSS را بررسی کنید:
/ * CSS برای شروع منوی کشویی * /
ul
{
لیست سبک: هیچکدام؛
Padding: 0px؛
حاشیه: 0px
}
ul li
{
صفحه نمایش: inline؛
شناور به سمت چپ؛
}
ul li A.
{
رنگ: #ffffff؛
سابقه و هدف: # 990E00؛
حاشیه راست: 5px؛
فونت وزن: پررنگ؛
فونت اندازه: 12px؛
فونت خانواده: وردانا؛
متن دکوراسیون: هیچکدام؛
نمایش: بلوک؛
عرض: 100px؛
ارتفاع: 25px؛
خط ارتفاع: 25px؛
متن ترانه: مرکز؛
-Webkit-border-radius: 5px؛
-Moz-Border-Radius: 5px؛
مرز: 1PX جامد # 560E00؛
}
ul li a: شناور
{
رنگ: #CCCCCCC؛
سابقه و هدف: # 560E00؛
فونت وزن: پررنگ؛
متن دکوراسیون: هیچکدام؛
نمایش: بلوک؛
عرض: 100px؛
متن ترانه: مرکز؛
-Webkit-border-radius: 5px؛
-Moz-Border-Radius: 5px؛
مرز: 1px جامد # 000000؛
}
ul li.sublinks A.
{
رنگ: # 000000؛
سابقه و هدف: # F6F6F6؛
مرزی پایین: 1px Solid #CCCCCC؛
فونت وزن: طبیعی؛
متن دکوراسیون: هیچکدام؛
نمایش: بلوک؛
عرض: 100px؛
متن ترانه: مرکز؛
حاشیه بالا: 2px؛
}
ul li.sublinks a: شناور
{
رنگ: # 000000؛
سابقه و هدف: # FFEFC6؛
فونت وزن: طبیعی؛
متن دکوراسیون: هیچکدام؛
نمایش: بلوک؛
عرض: 100px؛
متن ترانه: مرکز؛
}
ul li.sublinks.
{
نمایش: هیچکدام؛
}
/ * CSS برای منوی کشویی پایان * /
اکثر کد CSS برای فرمت کردن منو استفاده می شود (شما می توانید ظاهر منو به صورت اختیاری خود)، اما در اینجا نیز برخی از نکات مهم وجود دارد:
1 - حذف زبانه ها توسط لیست سبک: هیچکدام؛
2 - ما می دانیم که لیست ها عناصر بلوک هستند و همیشه در یک نظم عمودی نمایش داده می شوند. به منظور ایجاد آنها به صورت افقی، ما پارامتر عناصر کوچک را ضمیمه می کنیم و با استفاده از کد آنها را در سمت چپ هماهنگ می کنیم:
صفحه نمایش: inline؛
شناور به سمت چپ؛
3
- به طور پیش فرض، لینک ها عناصر حروف کوچک هستند. ما آنها را به عناصر بلوک با استفاده از صفحه نمایش تکرار می کنیم: بلوک (بنابراین ما هم اکنون می توانیم از آنها ارزش عرض را بپرسید).
4 - پنهان کردن تمام منوها از طریق:
ul li.sublinks.
{
نمایش: هیچکدام؛
}
جی کوئری
زمان های اولیه را آماده کنید زمانی که منوهای کشویی توسط خشن اجرا شد کد جاوا اسکریپتعلاوه بر این، یک دسته از کد غیر ضروری وجود دارد. اما امروز همه چیز ما نیاز به جی کوئری است:
$ (تابع () (
submenu.css ((
موقعیت: "مطلق"،
Zindex: 1000.
});
submenu.Stop (). SlideDown (300)؛
$ (این) .slideup (300)؛
});
});
});
بسیار جالب و ساده است. بیایید به شما توضیح دهیم که چگونه کار می کند. برای شروع، و به طور معمول، ما کد ما را به کنترل جی کوئری پوشش می دهیم:
$ (تابع () (
...
});
کد ما فعال می شود زمانی که مکان نما ماوس نامرئی (عملکرد MooneTerer) به آیتم که کلاس از منوی کشویی ($ (". dropdown") اختصاص داده شده است)). در مورد ما، این یک لینک به منو است:
$ (تابع () (
$ ("dropdown"). mouseenter (function () (
........
});
});
بیایید اطمینان حاصل کنیم که ما پنهان می کنیم (پنهان کردن ()) تمام منوهای باز قبلی قبل از اینکه مکان نما ماوس پیوند زیر را پرتاب کند:
$ (". sublinks") توقف (نادرست، درست) .hide ()؛
توجه به عملکرد توقف که به ما کمک می کند تا تنها یک منوی کشویی را در زمانی که مکان نما ماوس در امتداد لینک های مختلف به منو حرکت می کند، توجه کنید. اگر ما از این تابع استفاده نکنیم، هر منوی کشویی باز خواهد شد تا زمانی که ما به طور کامل جابجایی ماوس را از منو به طور کامل جابجایی کنیم. این یک پوشش را ایجاد می کند، بنابراین باید از این اجتناب کنیم. بعد، ما در حال حاضر منوی کشویی را باز کرده و یک متغیر را اختصاص می دهیم:
var submenu \u003d $ (این) .Parent (). بعدی ()؛
این چیزی است که در کد HTML خواهد بود:
هنگامی که مکان نما ماوس در لینک با کلاس کشویی است، ما با استفاده از پدر و مادر () به عقب حرکت می کنیم و در "LI" متوقف می شویم، و سپس با بعدی ()، ما در منوی کشویی مورد نظر قرار می گیریم و "لی "در حال حاضر با یک کلاس از زیر لینک ها (sublinks) خواهد بود. بنابراین، جی کوئری باعث می شود ما یک فرآیند برای پیدا کردن آنچه که منوی کشویی نمایش داده می شود زمانی که مکان نما ماوس در یک لینک خاص نمایش داده می شود.
submenu.css ((
موقعیت: "مطلق"،
بالا: $ (این) .Offset (). بالا + $ (این) .height () + "PX"،
چپ: $ (این) .Offset (). چپ + "PX"،
zindex: 1000.
});
کد بسیار مهم است، زیرا ما را تضمین می کند که منوی کشویی دقیقا تحت یک مرجع خاص نمایش داده می شود. اگر موقعیت بر روی مطلق نمایش داده شود، می توانیم مورد را در هر منطقه از صفحه قرار دهیم. بعد، موقعیت بالایی پیوند را تعریف می کنیم که مکان نما با $ (این) حرکت می کند. fffset () بالا (این به آیتم منو فعلی اشاره دارد که مکان نما را القا می کند)، و به آن به ارتفاع اضافه می شود این به طوری که منو دقیقا مرجع نمایش داده می شود. چیزی شبیه آن با پارامتر سمت چپ انجام می شود. سپس ما از Z-index استفاده می کنیم تا مطمئن شوید که منوی ما در بالای عناصر دیگر نمایش داده می شود.
submenu.Stop (). SlideDown (300)؛
البته، شما می توانید گزینه های دیگر برای نوع انیمیشن Fadein، انیمیشن با سبک های خود و غیره استفاده کنید.
حالا شما باید از مفهوم نمایش منوی کشویی منحرف شوید و آن را پنهان کنید. ما به این کد گزیده نیاز داریم:
submenu.MousEleave (عملکرد () (
$ (این) .slideup (300)؛
});
به منظور پنهان کردن منوی کشویی، ما از SlideUp استفاده می کنیم، آنتونیوم به SlideDown. این واقعیت را در نظر بگیرید که Submenu متغیر است که ما برای تعیین منوی کشویی خاص ایجاد کرده ایم.
بنابراین، ما یک کشویی جذاب را داشتیم منو در جی کوئری.
به منظور نوشتن ناوبری خود را به شکل یک منوی کشویی عمودی در jQuery با یک لیست کشویی زیر شاخه، لازم است که اصل عملیات این مکانیزم را درک کنید. اما ابتدا ساختار ناوبری را تجزیه و تحلیل خواهیم کرد:
جهت یابی
همانطور که قبلا حدس زده اید، منوی کشویی ما بر اساس لیست های مشخص شده ساخته شده است. هنگام شناور ماوس در برچسب
- تست 1
- تست 2
- تست 3
- تست 4
اما چگونه می پرسید؟ بله، همه چیز واقعا بسیار ساده است. برای شروع، بیایید با جدول سبک های لیست ناوبری ما مقابله کنیم، به نظر می رسد:
بدن (زمینه: RGB (244، 244، 244)؛ فونت چهره: Verdana؛ فونت وزن: 100؛) / * --- ناوبری --- * / #menu (عرض: 200px؛ حاشیه: 0؛ پد: 2px؛) #Menu Li (لیست سبک نوع: هیچ؛) .menu (موقعیت: نسبی؛ سابقه و هدف: شکلات؛ سابقه و هدف: -Moz-linear-gradient (بالا، RGB (198، 255، 242)، # 2AC4B3) ؛ سابقه: -WebKit-linear-gradient (بالا، RGB (198، 255، 242)، # 2AC4B3)؛ سابقه و هدف: -O-linear-gradient (بالا، RGB (198، 255، 242)، # 2AC4B3)؛ مرز : 1px جامد # 2ac4b3؛) .menu: شناور (زمینه: # 00c؛ سابقه و هدف: -moz-linear-gradient (بالا، RGB (230، 230، 230)، # 0CBFAB)؛ سابقه و هدف: -Webkit-linear-gradient ( بالا، RGB (230، 230، 230)، # 0CBFAB)؛ سابقه: -O-linear-gradient (بالا، RGB (230، 230، 230)، # 0CBFAB)؛). mmenu span (عرض: 11px؛ ارتفاع: 11px؛ صفحه نمایش: بلوک؛ موقعیت: مطلق؛ بالا: 8px؛ راست: 10px؛ مکان نما: اشاره گر؛) .menu ul (عرض: 150px؛ حاشیه: 0؛ padding: 1px؛ موقعیت: مطلق؛ بالا: -1px؛ سمت چپ: 198px؛) .menu ul li (زمینه: شکلات؛ زمینه: -Moz-linear-gradient (بالا، RGB (198، 255، 242)، # 2AC4B3)؛ سابقه و هدف: -Webkit-linear-gradient (بالا، RGB (198، 255، 242)، # 2AC4B3)؛ سابقه و هدف: -O-linear-gradient (بالا، RGB (198، 255، 242)، # 2AC4B3)؛ مرز: 1px جامد #fff؛ ) .menu ul li: شناور (زمینه: # 00c؛ سابقه و هدف: -moz-linear-gradient (بالا، RGB (230، 230، 230)، # 0CBFAB)؛ سابقه و هدف: -Webkit-linear-gradient (بالا، RGB (RGB) 230، 230، 230)، # 0CBFAB)؛ سابقه و هدف: -O-linear-gradient (بالا، RGB (230، 230، 230)، # 0CBFAB)؛) .menu a (padding: 5px؛ صفحه نمایش: بلوک؛ دکوراسیون: هیچکدام؛ رنگ: سفید؛) .Menu A: شناور (رنگ: سفید؛) / * --- پایان --- * /
از صفحه سبک، می توان دید که لیست اولیه پایین کشیدن پنهان نیست، اما این لحظه ما با استفاده از:
$ (سند) .ready (function () ($ ($ menu ul "). مخفی کردن ()؛ $ (" menu span "). CSS (" پس زمینه "،" URL ("down.png") ")؛ $ ("# منو لی"). شناور (عملکرد () ($ (این). بچه ها ("ul"). نمایش ()؛ / * معادل $ ("ul"، این) .show ()؛ * / $ ( این) .find ("span"). CSS ("پس زمینه"، "URL (" right.png ")")؛ / * معادل $ ("Span"، این) .css ("پس زمینه"، "URL (" right.png ")")؛ * /)، تابع () ($ (این). بچه ها ("ul"). مخفی کردن ()؛ / * معادل $ ("ul"، این) .hide ()؛ * / $ (این) .find ("span). CSS (" پس زمینه "،" URL ("down.png") ")؛ / * $ (" span "، این) .css (" پس زمینه "،" URL ( "down.png") ")؛ * /))))
حالا ما کد جی کوئری منوی کشویی را تجزیه و تحلیل خواهیم کرد، زیرا شاید کسی به طور کامل درک نخواهد شد. در ابتدا، ساخت و ساز زیر تجویز می شود:
$ (سند) .ready (تابع () ())
این دستورات تجویز شده است که باید پس از دانلود کامل صفحه انجام شود. این کار انجام می شود به طوری که هیچ نوع دیگری از اشتباهات وجود ندارد، اگر غیرممکن باشد که هر جسم را به دلیل این واقعیت که Trite هنوز بارگذاری نشده است پیدا کند.
$ ("منو UL") پنهان کردن ()؛
این معنی چیست؟ طراحی "$ ()" به شما اجازه می دهد عناصر را انتخاب کنید. در نتیجه، در همان ابتدا، ما باید فهرست کشویی ما را پنهان کنیم. ما طراحی "$ ()" را می گیریم و در آن شیء مورد علاقه خود را بنویسیم. در مورد ما، این شیء خواهد بود فهرست با کلاس "منو". بعد، ما روش "hide ()" را تجویز می کنیم که به شما اجازه می دهد که شی را که علاقه مند به آن هستید پنهان کنید.
$ (". منو"). CSS ("پس زمینه"، "URL (" Down.png ")")؛
او چه کار می کند؟ او به دنبال یک تگ به عنصر والدین است که کلاس "منو" را اختصاص داده است، با استفاده از روش "CSS" ("پس زمینه"، "URL (" Down.png ")") "، اختصاص" پس زمینه " Style Property "URL (" پایین PNG ")". "Down.png" یک آیکون نشان می دهد که لیست می تواند باز شود.
سپس یک طراحی وجود دارد که لیست ما را افشا می کند، به نظر می رسد این است:
$ ("# منو لی"). شناور (عملکرد () ($ (این). کودکان ("ul"). نمایش ()؛ $ (این) .find ("span"). CSS ("پس زمینه"، " URL ("right.png") ")؛)، function () ($ (این). کودکان (" ul "). مخفی کردن ()؛ $ (این) .find (" span "). CSS (" پس زمینه " ، "URL (" Downg ")")؛)
ما به دنبال یک برچسب به عنصر پدر و مادر که ID \u003d "منو" اختصاص داده شده است. بعد روش "شناور" و براکت دو توابع است. اولین تابع انجام خواهد شد زمانی که شما نشانگر ماوس را شناور، و دوم اجرا می شود اگر مکان نما ماوس مورد شما علاقه مند است.
اولین تابع بیان شده است:
$ (این). کودکان ("ul"). نمایش ()؛ $ (این) .find ("span"). CSS ("پس زمینه"، "URL (" right.png ")")؛
طراحی "$ (این)" به این معنی است که ما علاقه مند به آن موردی هستیم که ما هستیم این لحظه این را از انگلیس به ارمغان آورد. این). و ما برچسب را آوردیم
پس از آن، برچسب ما به دنبال فرزندان، یعنی: برچسب و او پس زمینه به آیکون دیگری است.
پس از آن، تابع تجویز می شود، که همه چیز را انجام می دهد، همانطور که در اصل بود، پس از نشانگر ماوس لیست لیست را ترک می کند:
تابع () ($ (این). کودکان ("ul"). مخفی کردن ()؛ $ (این) .find ("span"). CSS ("پس زمینه"، "URL (" Downg ")")؛)
برای ایجاد کد نوشته شده در jQuery و منوی کشویی ما به درستی کار کرده اند، شما باید کتابخانه را از jquery.com دانلود کنید و آن را وصل کنید، پس از تگ باز، صحبت کنید
خط.خودشه! در نتیجه، من می خواهم توجه داشته باشم که اگر سایت شما کاملا سرگرم کننده باشد، ممکن است این اسکریپت خیلی دیر شروع شود (سایت برای مدت زمان طولانی بارگذاری خواهد شد) و کاربران می بینند که چگونه برای اولین بار به طور کامل نشان می دهد، اما تنها پس از آن پنهان می شود این، خیلی زشت است. بنابراین، لازم است تمام دستورات جی کوئری برای این طرح را تحمل کنیم: "$ (سند) .Ready (تابع () ())". شبیه این خواهد شد:
$ (سند) .Ready (function () ()) $ ("منو ul"). مخفی کردن ()؛ $ (". منو"). CSS ("پس زمینه"، "URL (" Down.png ")")؛ $ ("# منو لی"). شناور (عملکرد () ("ul). نمایش ()؛ $ (این) .find (" span "). CSS (" پس زمینه "،" URL ("right.png") ")؛)، تابع () ($ (این). کودکان (" ul "). مخفی کردن ()؛ $ (این) .Find (" Span "). CSS (" پس زمینه "،" URL ("Downg") ")؛)؛)
اتصال اسکریپت ما باید از برچسب منتقل شود
به ساده ترین، در مقابل برچسب بسته شدنیا شما می توانید اسکریپت را بلافاصله پس از لیست مشخص شده متصل کنید.(رها کردن: 314)
با کمک جی کوئری کلاسیک، مقالات این موضوع نوشته شده است. من سعی کردم کمی بیشتر پیچیده تر کار، اضافه کردن توانایی پارتیشن های باقی مانده به منو باز (یا بسته به انتخاب کاربر) در هنگام حرکت از طریق سایت.
برای حل این کار، تصمیم گرفتم از پلاگین کوکی جی کوئری استفاده کنم. مزیت این افزونه این است که عملیات بر روی سمت مشتری انجام می شود، که به نوبه خود، بار را بر روی سرور کاهش می دهد. منفی- اگر کاربر با JS غیرفعال شود، پلاگین کار نخواهد کرد. ولی این گزینه من فکر نمی کنم، زیرا پس از آن کل نقطه منوی کشویی ناپدید می شود. بنابراین، بیایید شروع کنیم.
برای شروع، ما باید چارچوب جی کوئری خود را متصل کنیم و پلاگین جی کوئری کوکی:
کد: HTML
علاوه بر نشانه گذاری این به نظر می رسد یک لیست ساده، هیچ چیز فوقالعاده. تنها توجه داشته باشید که در برچسب
باید عنوان، زمانی که کلیک بر روی کدام منو سقوط خواهد کرد:
کد: HTML
خوب، و به همین ترتیب نامحدود. در حال حاضر جالب ترین است. در کد من کمی نظرات را اضافه خواهم کرد، به منظور تقریبا قابل فهم، چاپاک
کد: JS
$ (سند) .ready (تابع () (
اگر ($. کوکی ("num_open_ul")) (// بررسی اگر ورود به کوکی ها وجود دارد
اگر ($ کوکی ("num_open_ul")! \u003d 0)! \u003d 0) (// و این رکورد برابر با 0 نیست
var number_eq \u003d 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). کلیک کنید (تابع () (// هنگامی که روی این تابع کار می کنید
اگر ($ (این) .Next (). آیا (": قابل مشاهده")) (
$ ("div.navigation_body"). خواهر و برادر ("div.navigation_body"). Slideup (500)؛ // اگر دیگران باز کرده اند، همه چیز را به جز فعلی بسته شده است
}
$ (این) .next ("div.navigation_body"). SlideToggle (500) .siblings ("div.navigation_body"). Slideup (500)؛
$ (این) .toggleclass ("Active_navigation"). خواهر و برادر ("# ناوبری h2.navigation_head"). removeclass ("Active_Navigation")؛ // باز کردن کلاس اضافه شده برای تغییر سبک
Settimeout (FnCookie، 600)؛ // ضبط کوکی با یک تاخیر، به طوری که اسکریپت توانسته است کار را تکمیل کند (500 مگا سرعت، تاخیر، 600 مگابایت)
});
تابع fncookie () (/ / عملکرد ضبط خود را
var number_open_ul \u003d 0؛
var I \u003d 0؛
$ ("div.navigation_body"). هر (تابع () (
I ++؛
اگر ($ (این) .is (": قابل مشاهده")) (
number_open_ul \u003d i؛
}
$ .cookie ("num_open_ul"، number_open_ul، (منقضی می شود: 3، مسیر: "/"))؛ // فروشگاه 3 روز برای کل سایت.
});
}
});
به این ترتیب، در حال حاضر، اگر کاربر منو را باز کرد، سایت را ترک کرد و بعد از چند روز دوباره بعد از آن، منو هنوز باز است.
خوب، در نهایت، ما بارکد کمی داریم: در واقع، سبک های CSS. شما واقعا روی سلیقه خود انجام می دهید، در مثال من یک طراحی آماده از یکی از پروژه ها را گرفتم
کد: CSS
#جهت یابی (
حاشیه: 80px خودکار؛
عرض: 250 پیکسل؛
}
#Navigation H2، #navigation h2.navgation_head (
فونت اندازه: 18px؛
فونت وزن: bolder؛
پس زمینه رنگ: # FFB6C1؛
پس زمینه تصویر: -Webkit-gradient (خطی، 50٪ 0.50٪ 100٪، رنگ - توقف (0٪، # FFE9E9)، رنگ توقف (100٪، # FFB6C1))؛
پس زمینه تصویر: -Webkit-linear-gradient (# ffe9e9، # ffb6c1)؛
پس زمینه تصویر: -moz-linear-gradient (# ffe9e9، # ffb6c1)؛
پس زمینه تصویر: -O-linear-gradient (# FFE9E9، # FFB6C1)؛
Background-Image: Gradient خطی (# FFE9E9، # FFB6C1)؛
Padding: 5px 3px 6px 3px؛
حاشیه: خودکار؛
موقعیت: نسبی؛
}
#navigation h2.navigation_head: پس از (
موقعیت: مطلق؛
راست: 5px؛
رنگ: # 550000؛
محتوا: "CSSB"؛
}
#navigation h2: hover، #navigation h2.navigation_head: hover (
مکان نما: اشاره گر؛
}
.ance_navigation (
پس زمینه تصویر: -Webkit-gradient (خطی، 50٪ 0.50٪ 100٪، رنگ توقف (0٪، # FFB6C1)، رنگ توقف (100٪، # FFE9E9))! مهم؛
پس زمینه تصویر: -Webkit-linear-gradient (# ffb6c1، # ffe9e9)! مهم؛
پس زمینه تصویر: -Moz-linear-gradient (# ffb6c1، # ffe9e9)! مهم؛
پس زمینه تصویر: -O-linear-gradient (# ffb6c1، # ffe9e9)! مهم؛
پس زمینه تصویر: Gradient خطی (# FFB6C1، # FFE9E9)! مهم؛
}
.ance_navigation: پس از (
موقعیت: مطلق؛
راست: 5px؛
محتوا: "CSSD"! مهم؛
}
.Navigation_body (
نمایش: هیچکدام؛
}
#navigation ul (
حاشیه: 0؛
Padding: 0؛
لیست سبک نوع: هیچکدام؛
}
* HTML #navigation ul li (
ارتفاع: 1٪؛
}
#navigation div.navigation_body ul li (
حاشیه چپ: 10px؛
}
#navigation a (
فونت خانواده: "Times New Roman"؛
نمایش: بلوک؛
رنگ: # 918871؛
Padding: 3px؛
پس زمینه رنگ: # ffe3e0؛
مرز پایین: 1px جامد #fff؛
متن دکوراسیون: هیچکدام؛
}
#navigation A: شناور (
رنگ: # 585858؛
پس زمینه رنگ: # FFB6CC؛
}
اگر کسی توجه کرد، در اینجا سعی کردم از ویژگی های محتوا استفاده کنم: +/- با منوی بسته / باز، اما شما می توانید یک تصویر یا هر طراحی دیگری را اضافه کنید. مشاهده یک نمونه از آنچه ما انجام دادیم، شما می توانید
همانطور که همیشه، من آماده گوش دادن به سوالات هستم و سعی می کنم به آنها پاسخ دهم. بهترین ها، بهترین هاست.
در این درس، ما به شما نشان خواهیم داد که چگونه یک منوی کشویی جانبی را برای حتی ناوبری ساده در سایت ایجاد کنید. چنین منو یک روند محبوب در طراحی وب مدرن است. این نوع منو در بسیاری از سایت ها استفاده می شود. با استفاده از آن، شما می توانید از هرج و مرج در صفحات پروژه خلاص شوید، آن را قابل خواندن بیشتر، تمرکز توجه کاربران در محتوای اصلی.
این یک راه عالی برای دستیابی به مینیمالیسم بدون عوامل منحرف است. امروز ما چنین منو را ایجاد خواهیم کرد.
برای ایجاد یک منوی ناوبری، ابتدا تنظیمات را بخوانید:
ابتدا شما باید Normalize.css را دانلود کنید و سبک های مرورگر پیش فرض را پیکربندی کنید، مطمئن شوید که منو در همه مرورگرها به نظر می رسد. برای نمایش فلش قبل از آیتم منو با زیر مقررات، ما از fontawesome استفاده خواهیم کرد. برای تغییر کلاس در منو، بارگیری jQuery و حرکت کل کد جی کوئری کاربر در script.js. لینک دوم جدول اصلی برای پروژه وب است.
همبرگر آیکون
آیکون همبرگر یک ویژگی مشترک از ناوبری سایت است. اغلب با استفاده از فونت آیکون مانند Fontawesome ایجاد شده است، اما در این درس ما برخی از انیمیشن ها را اضافه خواهیم کرد، و بنابراین ما آن را از ابتدا ایجاد خواهیم کرد. آیکون همبرگر ما یک تگ اسپانیایی حاوی سه کلاس DIV است که به صورت نوار افقی نمایش داده می شود.
سبک ها شبیه به این هستند:
دکمه تعویض (موقعیت: ثابت؛ عرض: 44 پیکسل؛ ارتفاع: 40px؛ Padding: 4px؛ انتقال: .25s؛ Z-index: 15؛) دکمه بعدی: شناور (مکان نما: اشاره گر؛) .toggle-button .menu -Bar (موقعیت: مطلق؛ شعاع مرزی: 2 پیکسل؛ عرض: 80٪؛ انتقال: .5s؛) .Toggle-button .Menu-Bar-Top (مرز: 4PX جامد # 555؛ مرز پایین: هیچ؛ بالا: 0؛) دکمه .Menu-Bar-Middle (ارتفاع: 4 پیکسل؛ پس زمینه رنگ: # 555؛ حاشیه بالا: 7 پیکسل؛ حاشیه پایین: 7 پیکسل؛ بالا: 4 پیکسل؛) .toggle-but -Bottom (مرز: 4PX جامد # 555؛ Border-Top: هیچکدام؛ بالا: 22 پیکسل؛) .button-open .menu-bar-top (تبدیل: چرخش (45deg) ترجمه (8px، 8px)؛ انتقال: .5s؛ ) .button-open .menu-bar-middle (تبدیل: ترجمه (230px)؛ انتقال: .1s سهولت؛ Opacity: 0؛) .button-open .menu-bar-bottom (تبدیل: چرخش (-45deg) ترجمه (8px، -7px)؛ انتقال: .5s؛)
آیکون دارای موقعیت ثابت است و هنگام پیمایش صفحه تغییر نمی کند. همچنین دارای Z-index 15 است، به این معنی که همیشه از عناصر دیگر خواهد بود. شامل سه میله است که هر کدام از آنها سبک های دیگر را به اشتراک می گذارند. بنابراین، ما هر نوار را به class.menu-bar حرکت خواهیم داد. بقیه سبک ها حرکت می کنند کلاس های جداگانه. سحر و جادو زمانی رخ می دهد که کلاس دیگری را در تگ اسپانیایی اضافه می کنیم که باز است. ما آن را اضافه می کنیم با استفاده از jQuery به روش زیر:
$ (سند) .ready (function () (var $ togglebutton \u003d $ ("تغییر دکمه")؛ $ togglebutton.on ("کلیک"، تابع () ($ (این) .togglass ("دکمه باز" )؛))؛))
برای کسانی که با jQuery آشنا نیستند، متغیر را با $ Togglebutton، که حاوی آیکون ما است، آغاز می کنیم. ما آن را در یک متغیر بدون نیاز ذخیره می کنیم با استفاده از جاوا اسکریپت. سپس ما یک شنونده رویداد را ایجاد می کنیم، که به کلیک بر روی آیکون توجه می کند. هر بار که کاربر بر روی آیکون همبرگر کلیک می کند، شنونده رویداد تابع ToggleClass () را راه اندازی می کند که کلاس را تغییر می دهد. Button-Open.
هنگامی که class.button-open اضافه شده است، ما می توانیم از آن برای تغییر روش های نمایش آیتم ها استفاده کنیم. ما از CSS3 ترجمه () و چرخش () توابع را به طوری که نوار های بالا و پایین تر چرخش 45 درجه، و نوار میانی به سمت راست حرکت می کند و ناپدید شد. در اینجا چیزی است که انیمیشن را می توان پیکربندی کرد:
منوی ناوبری در حال اجرا
حالا که شما یک آیکون همبرگر دارید، اجازه دهید آن را مفید و ایجاد یک منوی کشویی زمانی که شما بر روی آن کلیک کنید. این چگونگی نشانه گذاری منو به نظر می رسد:
در حال حاضر ما در هر سبک برای این منو ساکن نخواهیم شد، به جای آن تمرکز بر چندین لحظات مهم. اول از همه، Div و class.menu-wrap است. به سبک های خود نگاه کنید:
منو بسته بندی (پس زمینه رنگ: # 6968AB؛ موقعیت: ثابت؛ بالا: 0؛ ارتفاع: 100٪؛ عرض: 280 پیکسل؛ حاشیه چپ: -280px؛ فونت اندازه: 1EM؛ فونت وزن: 700؛ سرریز: خودکار ؛ گذار: .25s؛ Z-index: 10؛)
موقعیت ثابت شده است، بنابراین هنگام پیمایش صفحه منو همیشه در همان موقعیت باقی می ماند. ارتفاع 100٪ اجازه می دهد تا منو تمام فضای عمودی را در صفحه اشغال کند. لطفا توجه داشته باشید که میدان حاشیه حاشیه دارای عدد منفی برابر با عرض منو است. این به این معنی است که منو از پنجره مشاهده ناپدید می شود. برای آن دوباره قابل مشاهده است، ما یک کلاس دیگر را با جی کوئری ایجاد می کنیم. ما فایل جاوا اسکریپت به نظر می رسد:
$ (سند) .ready (function () (var $ togglebutton \u003d $ \u003d $ (". toggle-button")، $ menuwrap \u003d $ ("منو بسته بندی")؛ $ togglebutton.on ("کلیک"، عملکرد () ($ (این) .toggleclass ("دکمه باز")؛ $ menuwrap.toggleclass ("منو نمایش")؛))؛))
یک متغیر دیگر Menuwrap را اضافه کنید که حاوی پوسته منو است. از همان دستگیره رویداد استفاده کنید که قبلا ایجاد کردیم. فقط این بار ما دو کلاس را تغییر می دهیم: یکی برای دکمه و یکی برای پوسته منو. ارزش میدان چپ کلاس.menu-show 0 است، اثر سایه را اضافه می کند.
نمایش منو (حاشیه سمت چپ: 0؛ جعبه سایه: 4px 2px 15px 1px # b9adad؛)
زیر منو و لینک ها
شما ممکن است متوجه شوید که در یکی از موارد لیست، یک chappory.menu-item-chaps وجود دارد که حاوی یک زیرمجموعه است. علاوه بر این، تگ Span بلافاصله تحت لینک با class.sidebar-menu-arrow قرار می گیرد.
span دارای :: پس از شبه عنصر و حاوی فلش Fontawesome است. به طور پیش فرض، زیر منو پنهان است و تنها زمانی که بر روی فلش فشار داده می شود قابل مشاهده خواهد بود. در اینجا این است که چگونه می توانیم آن را با جی کوئری انجام دهیم:
$ (سند) .ready (function () (var $ sidebararrow \u003d $ ("نوار کناری-منو فلش")؛ $ sidebararrow.click (function () ($ (این) .Next (). SlideToggle (300)؛) )؛))
هنگامی که ما روی فلش کلیک می کنیم، ما یک تابع را می نامیم که به نوبه خود بلافاصله پس از عرض به آیتم بعدی هدایت می شود (در مورد ما یک زیر منو) و آن را قابل مشاهده می کند. تابع ما استفاده می شود slidetoggle است. این باعث می شود که آیتم ظاهر شود و ناپدید شود. تابع در مثال ما دارای یک پارامتر است - مدت زمان انیمیشن.
آیتم های منو در مثال یک اثر شناور دارند. این با استفاده از :: پس از شبه عنصر ایجاد شده است. کد به نظر می رسد این است:
منو نوار کناری LI\u003e A :: بعد از (محتوا: "صفحه نمایش: بلوک؛ ارتفاع: 0.15EM؛ موقعیت: مطلق؛ بالا: 100٪؛ عرض: 102٪؛ چپ: 50٪؛ تبدیل: ترجمه (-50٪) ؛ پس زمینه تصویر: گرادیان خطی (به سمت راست، شفاف 50.3٪، # FFFA3B 50.3٪)؛ گذار: موقعیت پس زمینه .2s .1s سهولت؛ پس زمینه اندازه: 200٪ خودکار؛) .menu-sidebar li\u003e A: شناور :: پس از (پس زمینه موقعیت: -100٪ 0؛)
:: بعد از شبه عنصر حاوی عنصر سطح بلوک در پایین هر لینک با عرض کامل و ارتفاع 0.15EM است. به نظر می رسد همه این به عنوان یک برجسته است. ویژگی این است که ما فقط از رنگ پس زمینه به خط استفاده نمی کنیم، ما از عملکرد خطی () در تصویر پسزمینه استفاده می کنیم. اگر چه این ویژگی برای ایجاد شیب های رنگی طراحی شده است، ما می توانیم رنگ را با مشخص کردن علاقه مورد نظر تغییر دهیم.
منو نوار کناری Li\u003e A :: پس از (به راست، شفاف 50.3٪، # FFFA3B 50.3٪)؛)؛)؛)؛)
نیمه خط شفاف در اینجا است، و نیمه دوم زرد است. ایجاد پس زمینه پس زمینه 200٪، ما دو برابر عرض بلوک ما را دو برابر می کنیم. در حال حاضر بخش شفاف تمام عرض مرجع را می گیرد و قسمت زرد به سمت چپ حرکت می کند و نامرئی می شود. ما موقعیت پس زمینه را تغییر می دهیم وقتی که در -100٪ حرکت می کنیم. در حال حاضر بخش زرد قابل مشاهده است، و شفاف - پنهان است.
به جای یک قسمت شفاف، می توانید از هر رنگ دیگری استفاده کنید. شما همچنین می توانید با شیب ها آزمایش کنید.
هر یک از عناصر مورد نظر ایالات متحده به طور کلی کار می کند. شما می توانید چنین منو را با استفاده از هر سایت طراحی از مجموعه Templatemonster ایجاد کنید. همانطور که می بینید، آن را آسان تر از آنچه شما می توانید تصور کنید. موفق باشید در ایجاد سایت های حرفه ای و کاربر پسند!
