منوی راحت را با استفاده از CSS باز کنید. منوی کشویی عمودی در CSS: چگونه آن را بسازید

از نویسنده: من از همه استقبال می کنم به هر دلیلی، منوی کشویی از مدیران وب با اسکریپت ها مرتبط است، اما برای مدت زمان طولانی برای ایجاد چنین ناوبری شما می توانید به طور کامل به راحتی بر روی CSS خالص. علاوه بر این، چنین منو بدتر نخواهد بود. امروز من به شما نشان خواهم داد که چگونه یک منوی کشویی را در CSS ایجاد کنم. من آن را به اشتراک می گذارم، بنابراین برای صحبت کردن، دستور غذا.

برنامه درس و علامت گذاری منو ما

به طور کلی، ابتدا ما تعریف خواهیم کرد که چگونه منو را ایجاد می کنیم. در HTML5، روش استاندارد برای ایجاد آن در کانتینر NAV در نظر گرفته شده است لیست مشخص شده. بیا انجامش بدیم. مارکرها، ما بعدا با CSS حذف می کنیم، در منو، آنها به طور کامل به ما نیاز ندارند.

در واقع، من بلافاصله در نشانه گذاری HTML با لیست های توزیع شده نوشتم. به این ترتیب، لیست ما دو سطح خواهد بود - این لیست های دیگر خواهد بود. یعنی، برای هر مورد 1 لیست، که یک منوی کشویی را تشکیل می دهد.

اینجا وجود دارد لحظه مهمکه این است که شما ممکن است نیازی به هر مورد برای سقوط، اما تنها برخی. بدون مشکل، پس از آن در نقاط بدون از دست دادن به سادگی لیست های سرمایه گذاری را ایجاد نمی کنند.

در واقع، در اینجا همه مارک ها:

< nav id = "nav" >

< ul >

< li > < a href = "#" > پاراگراف 1< / a >

< ul class = "second" >

< li > < a href = "#" > زیر پا< / a > < / li >

< / ul >

< / li >

< li > < a href = "#" > نقطه 2< / a >

< ul class = "second" >

< li > < a href = "#" > زیر پا< / a > < / li >

< / ul >

< / li >

< li > < a href = "#" > نقطه 3< / a >

< ul class = "second" >

< li > < a href = "#" > زیر پا< / a > < / li >

< / ul >

< / li >

< li > < a href = "#" > پاراگراف< / a >

< ul class = "second" >

< li > < a href = "#" > زیر پا< / a > < / li >

< / ul >

< / li >

< / ul >

< / nav >

من درک می کنم که او بزرگ است. این مسئله لیست های توزیع شده است که لازم است کد زیادی را بنویسید. اما این واقعیت را در نظر بگیرید که ما 4 مورد اصلی را انجام می دهیم و برای هر یک از منوی کشویی خواهد بود.

در واقع، من تمام شناسه ناوبری ناوبری را تنظیم کردم، و تمام لیست های سرمایه گذاری کلاس دوم سبک است که درک می کنند که آنها سرمایه گذاری می کنند.

عالی، ما برای نشانه گذاری آماده هستیم، شما می توانید در نتیجه نگاه کنید:

بله، به نظر می رسد وحشتناک است. اما اکنون ما در کار CSS گنجانده می شود و در عرض چند دقیقه ناوبری ما تبدیل خواهد شد. بیا کار کنیم.

ما CSS-Styles را نوشتیم

اولین چیزی که من انجام خواهم داد این است که تمام موارد پیش فرض را برای همه موارد متوقف کنید. آنها فقط با ما دخالت می کنند، بهتر است خود را به خود اختصاص دهند، جایی که مورد نیاز است.

* (حاشیه: 0؛ padding: 0؛)

حاشیه: 0؛

padding: 0؛

#NAV (ارتفاع: 70 پیکسل؛) #NAV UL (لیست سبک: هیچ؛)

#NAV (

ارتفاع: 70 پیک؛

#nav ul (

فهرست - سبک: هیچکدام؛

در حال حاضر ما نیاز داریم، در واقع، تصمیم می گیریم که منوی ما چه خواهد بود. افقی یا عمودی؟ من پیشنهاد می کنم ابتدا افقی را بسازید و همه چیز را در مثال خود ببینید. برای انجام این کار، چنین سبک هایی را بنویسید:

#nav\u003e ul\u003e li (شناور: چپ؛ عرض: 180px؛ موقعیت: نسبی؛)

#nav\u003e ul\u003e li (

شناور به سمت چپ؛

عرض: 180px؛

موقعیت: نسبی؛

توجه داشته باشید که با کمک نشانه\u003e ما به موارد لیست، که به طور مستقیم در UL سرمایه گذاری می شود، تجدید نظر می کنیم و این به طور مستقیم در NAV سرمایه گذاری می شود. این بسیار مهم است، زیرا اجازه می دهد که سبک را به نقاط لیست های پیوست اضافه کنید. واقعیت این است که با ایده من در موارد اصلی لیست ها به صورت افقی قرار می گیرد، و در توزیع - عمودی.

اما شما، البته، می توانید به طور متفاوتی انجام دهید، در هماهنگی با ایده شما. شما می توانید تمام موارد را در یک خط ایجاد کنید.

در هر صورت، کد بالا، من امیدوارم که شما را درک کنید. او باعث می شود اقلام لیست اصلی به لبه سمت چپ فشار داده شود، به طوری که همه آنها در یک خط با هم ترکیب می شوند، هرچند آنها عناصر بلوک هستند. من همچنین از آنها یک عرض واضح و موقعیت نسبی را پرسیدم.

موقعیت چیست؟ لازم است که لیست های سرمایه گذاری را تعیین کنید. اگر موقعیت خود را در CSS مطالعه کردید، احتمالا می دانید که اگر واحد موقعیت یابی نسبی را تنظیم کنید، تمام موارد موجود در آن را می توان به طور کامل در داخل این بلوک خاص قرار داده و نه کل پنجره مرورگر.

در همین حال، این چیزی است که ما قبلا دریافت کردیم:

با این تصویر شما می توانید یک نتیجه نمونه را تصور کنید. البته، ما هنوز هم باید زیبا باشیم تا اقلام را قرار دهیم تا چشم ها را در هنگام مشاهده ناوبری به رحمت دعوت کنیم.

#NAV LI A (نمایش: بلوک؛ سابقه و هدف: # 90DA93؛ Border: 1px Solid # 060a13؛ رنگ: # 060A13؛ Padding: 8px؛ متن تراز: مرکز؛ متن دکوراسیون: هیچ؛) #nav li a: hover ( سابقه و هدف: # 2F718E؛)

#nav li a (

نمایش: بلوک؛

سابقه و هدف: # 90DA93؛

مرز: 1px جامد # 060A13؛

رنگ: # 060A13؛

padding: 8px؛

متن - align: center؛

متن - دکوراسیون: هیچکدام؛

#nav li a: hover (

سابقه و هدف: # 2f718e؛

اول، لینک ها باید بلوک ساخته شوند. این لازم است به منظور کار داخلی داخلی و تمام خواص به درستی استفاده شود. بعد، من رنگ پس زمینه، متن، پارامترهای فریم، داخلی داخلی و هماهنگی متن را در مرکز مشخص می کنم. در نهایت، من تاکید می کنم.

تمام این پارامترها لزوما نحوه انجام نحوی را انجام نمی دهند. رنگ هایی که می توانید به صورت خودسرانه انتخاب کنید، قاب را انتخاب کنید تا دیگر استفاده کنید یا از آن استفاده کنید، می تواند کاهش یابد یا افزایش یابد.

توجه داشته باشید که در این مورد ما از علامت\u003e استفاده نکردیم، بنابراین قوانین مشخص شده به تمام لینک ها، از جمله کسانی که در موارد توزیع شده هستند اعمال می شود. بنابراین، در حال حاضر ما موارد زیر را داریم:

عالی، اما شما می فهمید که زیر پاراگراف ها نباید دیده شوند، آنها باید زمانی که روی مورد مورد نظر قرار می گیرند، نشان داده شوند. بدون این، منو ما شبیه جدول است. خوب، وقت آن است که آیتم های توزیع شده را پنهان کنید.

#nav li .second (صفحه نمایش: هیچ کدام؛ موقعیت: مطلق؛ بالا: 100٪؛)

#nav li .second (

نمایش: هیچکدام؛

موقعیت: مطلق؛

بالا: 100٪؛

اول، پنهان کردن لیست های کاملا متصل. ثانیا، ما از موقعیت مطلق و هماهنگی بالا می خواهیم: 100٪. این به این معنی است که منوی کشویی به وضوح تحت آیتم اصلی نمایش داده می شود که به آن تعلق دارد به وضوح کمتر از 100٪ از ارتفاع این مورد است.

در حال حاضر ما در صفحه وب فقط منوی اصلی که ما نیاز داریم را می بینیم.

ما از دست دادن

ما باید مهم ترین چیز را انجام دهیم - برای تحقق بخشیدن به از دست دادن. در این مورد هیچ چیز پیچیده ای وجود ندارد، به این کد نگاه کنید:

#nav li: شناور. ثانیه (نمایش: بلوک؛)

#NAV لی: شناور. ثانیه (

نمایش: بلوک؛

این کد به طور غیرمعمول کار خواهد کرد. هنگامی که شما در منوی اصلی حرکت می کنید، لیست پیوست شده قابل مشاهده خواهد بود. و تنها لیستی که در مورد که در آن مکان نما هدایت می شود، سرمایه گذاری می شود.

تنها یک مشکل جزئی وجود دارد - عرض آیتم های توزیع شده به عرض اصلی مربوط نیست. اما با اضافه کردن سبک های مربوطه به راحتی حل می شود:

#nav li li (عرض: 180px؛)

#nav li li (

عرض: 180px؛

همه، مشکل حل شده است:

همه چیز کاملا کار می کند هنگامی که شما روی مورد اصلی قرار می گیرید، منوی کشویی مربوطه به نظر می رسد. اگر مکان نما را به سمت خود بردارید، آن را از بین می برد. اگر مکان نما را به موارد پیوست شده ترجمه کنید، می توانید بر روی آنها کلیک کنید و به قسمت مورد نظر سایت بروید. بنابراین، ما یک منو بسیار ساده و آسان را بدون هیچ گونه اسکریپت ساخته ایم.

منو را به عمودی حذف کنید

خوب، خوب، با ناوبری افقی، ما به طور کامل فهمیدیم، اما علاوه بر سایت های او، اغلب عمودی مواجه می شود و همچنین می تواند کاهش یابد. در حقیقت، منو را از افقی به عمودی بازسازی کنید بسیار آسان است، ما باید به معنای واقعی کلمه یک زن و شوهر از خط کد را تغییر دهیم.

اول، شما باید شناور را حذف کنید: چپ در لیست نقاط اصلی. این ویژگی به این واقعیت کمک می کند که موارد ما در یک خط نمایش داده شود، اما چرا ما باید به آن نیاز داریم اگر ناوبری باید عمودی باشد؟

در حال حاضر هنوز هم برای تغییر قوانین برای انتخاب #NAV LI .second، یعنی برای لیست های سرمایه گذاری شده، یعنی، آنها باید کمی متفاوت باشند. مثل این:

#nav li .second (صفحه نمایش: هیچ؛ موقعیت: مطلق؛ چپ: 100٪؛ بالا: 0؛)

#nav li .second (

نمایش: هیچکدام؛

موقعیت: مطلق؛

چپ: 100٪؛

بالا: 0؛

به این ترتیب، لازم است که دو مختصات را به جای یکی ثبت نام کنید. اول، در مورد ناوبری افقی، من گفتم که، با این ایده، اقلام منو باید تحت نقاط اصلی نمایش داده شود. در مورد منوی عمودی، مناسب نیست - اقلام باید در کنار نمایش داده شوند.

بنابراین، ما تغییر می کنیم: 100٪ در سمت چپ: 100٪. علاوه بر این، هماهنگی بالا نیز مورد نیاز است. ما از آن می خواهیم 0 به طوری که منوی متصل شده در همان سطح با آیتم به آن مطابقت دارد.

همه چیز، در حال حاضر همه چیز به عنوان آن کار می کند. شما می توانید آزمایش کنید همانطور که می بینید، وقتی گفتم که شما باید تنها چند خط کد را بازنویسی کنید، دروغ نگویید.

منوی افقی با سطوح مختلف

با استفاده از رویکرد مشابه، می توانید سطح منو بیشتری ایجاد کنید اگر آن را به شدت ضروری است. به عنوان مثال، بگذارید برای چهارمین مورد لیست منوی اصلی ایجاد کنیم که در یکی از زیر موارد سرمایه گذاری می شود.

میخائیل شنبه، 2014/09/20 - 12:28

چیزی نظرت من قابل مشاهده نیست - تکراری:

===========
با تشکر از شما، اما من منو را نمی بینم (تحت int.expl-8). کسانی که. رشته کار نمی کند "ul. nAVلی: Hover UL (نمایش: بلوک؛) "
به من بگویید موضوع چیست؟

رطوبت مواد وجود دارد:

این در این خط بسیار خوب خواهد بود (ul.aaaaa li: hover ul (نمایش: بلوک؛)) برای بیان آنچه که بخشی از آن مسئول "منوی طرح" است، و چه چیزی - برای مخفی کردن اقلام از سطح لانه عمیق تر

در نمونه هایی که هر خط نظر را ارائه می دهد، خوب است.

به طور خاص، معلوم نیست چرا شما نیاز به یک رشته "

قبل از این خط، 2 خط وجود دارد، ظاهرا مربوط به مورد (خانه
و منوی عمودی را ببینید). فردی که با مواد جدید آشنا نیست (یعنی، فقط برای یکی که برای آن شما نوشتید)، وقت خود را برای آگاه شدن از این خطوط برای منوی کشویی لازم نیست. یا هنوز نیاز دارید؟

در hedder، 3 خط در مثال شما وجود دارد. از اینها، تنها یک نفر به موضوع اشاره دارد (نام فایل TSS را تنظیم می کند)، و 2 نفر دیگر - نه. همچنین توسعه مواد را نیز پیچیده می کند. علاوه بر این، در رایانه من، چنین هدر به طور کلی منجر به نمایش نادرست متن می شود، زیرا من نیاز به نصب UTF-8 نیستم، اما "ویندوز -..."

در مثال، معلوم نیست که کلمات "style.css"، "بلوک-منو" و "nav" نیست کلید واژه ها، و نام های مشخص شده توسط کاربر. من آن را آزمایش کردم

به طور خلاصه، من می خواهم که در مثالها تنها چیزی بود که مربوط به پرونده بود، و به طوری که آن را در مورد نامشخص در زمینه خط، که "نگرش به مورد" آنها نوشته شده است.

برای ارسال نظرات وارد شوید

اولگ شنبه، 2014/09/2014 - 23:50

نظر گسترده ترین
نظرات تنها پس از اعتدال به طوری که شما نظر خود را بلافاصله مشاهده نکرده اید.
من سعی خواهم کرد به همه چیز پاسخ دهم. بیایید با سوالات شروع کنیم چرا این اینجاست. Taki بله دو لینک از نسخه کاری منتشر شده است.
در مورد نمایش متن درست نیست. شما توانستید این صفحه را بخوانید و بررسی کنید، با وجود این واقعیت که همان رمزگذاری را به عنوان مثال در یک پست دارد.
این پست برای مبتدیان مطلق در نظر گرفته نشده است و به درخواست مشترکین نوشته شده است. اگر شما کاملا همه چیز را توضیح دهید، لازم است که در مورد کلاس ها و شناسه ها، بلوک ها، موقعیت، شبه انتخاب کننده ها، آبشار و غیره بگویید. مقاله بسیار بزرگ تبدیل شده و مهمتر از همه بی فایده است.
ul.nav لی: hover\u003e ul (نمایش: بلوک؛) آیتم قبلا پنهان را نشان می دهد. اگر شما چیزی را جدا کنید (به این ترتیب به کد نگاه کنید) هنگامی که شما در مورد منو (ul.Nav Li) حرکت می کنید، کار خواهد کرد: شناور و اولین لیست پیوست شده\u003e UL قابل مشاهده خواهد بود به دلیل این واقعیت که ارزش صفحه نمایش قابل مشاهده است ارزش را با هیچکدام در بلوک تغییر دهید.

با درود! اگر شما یک برند تازه کار هستید، پس زودتر یا بعدا با شما مواجه خواهید شد که می خواهید صفحات خود را احیا کنید، آنها را حداقل کمی تعاملی ایجاد کنید. اجتناب ناپذیر از انیمیشن CSS غیرممکن است. اما شما باید بدانید کجا و چگونه آنها را اعمال کنید.

امروز من خواهم گفت چگونه می توان یک منوی کشویی را پاک کردCSS و چگونه او را صاف کنه از جانب با استفاده از CSS انیمیشن اگر نمی دانید، وقت آن است که با AzA آشنا شوید.

منو منو HTML + CSS

برای شروع، برای کار با آنچه که با آن کار می کنید، یک منوی تک سطحی ساده را تعقیب کنید. ما با طراحی بسیار ناراحت نخواهیم شد، زیرا وضوح به اندازه کافی از این موضوع:

آن چه که ما داریم؟ لیست معمولی غیر اندازه گیری شده با شناسه "Top_Menu" و با منابع پیچیده شده در موارد این لیست. همه trite و ساده است. هنگامی که آیتم های منو را تغییر دهید، رنگ را تغییر دهید ... این همه چیزهایی است که قبلا می دانید و درک می کنید که چگونه آن را انجام دهید (من امیدوارم).

منوی سطح دوم را اضافه کنید

برای ساخت یک منوی چند سطح، ما باید یک لیست دوم غیر اندازه گیری را در داخل اول اضافه کنیم. من فکر می کنم شما در جایی در درس های اولیه بود. و همچنین برای قرار دادن آن فقط در داخل لیست ما، یعنی در داخل آیتم لیست، یعنی برچسب " لی"، بلافاصله پس از بسته شدن برچسب" a ".

قرار دادن لیست های سرمایه گذاری مطلقا در رابطه با " لی"در آن آنها سرمایه گذاری می کنند. و همه " لی» سطح بالا موقعیت نسبتا ( نسبت فامیلی.) به طوری که منوی کشویی بلافاصله پس از منوی سطح بالا، آن (سقوط - " inner_menu") باید بپرسید

موقعیت: مطلق؛ بالا: 100٪؛

به عبارت دیگر، یک سوراخ از مرز بالایی والدین برابر با ارتفاع والدین خواهد بود. به نظر من بسیار منطقی است.

علاوه بر موقعیت، شما باید منوی کشویی سبک را به عنوان منوی سطح بالا ارائه دهید. سیب از درخت سیب، همانطور که می گویند ...

همانطور که می بینید، منوی کشویی ما به نظر می رسد مانند کاهش نیست، اما سقوط و حلق آویز. اما هیچ چیز، ما به زودی اصلاح خواهیم شد.

چگونه می توان منوی کشویی را واقعا رها کرد

هیچ چیز ساده تر نیست! برای ایجاد لیست سرمایه گذاری ما برای ساخت یک منوی کشویی، شما فقط باید آن را پنهان کنید! و سپس تنها زمانی که مکان نما ماوس بر روی آیتم منوی سطح بالا که حاوی منوی کشویی است، باز می شود. این به نظر می رسد، شاید کمی دشوار است، اما در واقع تنها چند خط کد حل شده است.

منوی کشویی را اضافه کنید:

نمایش: هیچکدام؛

و برای نمایش آن، شما باید ثبت نام کنید:

#TOP_MENU\u003e LI: HOVER\u003e UL (نمایش: بلوک؛)

این کل ایجاد انتخاب کنندگان به ما چه می گویند؟ ما از پایان می خوانیم ما سبک ها (چشم انداز) را برای یک لیست سطح دوم تنظیم می کنیم که در داخل عنصر لیست سطح اول قرار دارد، اما این سبک ها فقط اگر ماوس (شناور) را به عنصر برسانیم، کار می کنیم "لی "که در آن سطح دوم ما سرمایه گذاری می شود.

امیدوارم من آن را روشن کنم. اگر نه، سعی کنید چندین بار بخوانید. و حتی بهتر است فقط این را درک کنید، به دنبال کد هستید. ما به ما نگاه می کنیم:

بله، به نظر میرسد که ما به آنچه که می خواستیم به دست آوریم - ما یک منوی کشویی، منوی کشویی واقعی، مادر من را ساخته ایم! اما او چیزی از دست رفته است. میدونی چیه؟ صافی پس از همه، همه چیز به نظر می رسد مانند منو نمی افتد، اما فقط به نظر می رسد. و خیلی به شدت، بلافاصله، من می گویم.

خوب، بیایید کمی بیش از او قرار دهیم.

منوی کشویی صاف آسان است

بنابراین اجازه دهید یک منوی کشویی صاف بر روی CSS خالص ایجاد کنیم. چرا این کار را می کنید؟ از آنجا که مردم دوست دارند زمانی که همه چیز صاف و mongongo ... و به نظر می رسد زیبا است. این به علاوه به قابلیت استفاده از سایت شما خواهد بود. اصابت!

به یاد داشته باشید، شما می توانید تنها مقادیر دقیق ریاضی مانند 50px و 300px، 0 و 100٪، 0.5 و 1.0 و غیره را تحریک کنید. در مورد ما، ما قادر به تحریک دو حالت منوی کشویی ما نخواهیم بود ( نمایش: هیچکدام؛ و نمایش: بلوک؛).

اما ما می توانیم آنها را با شفافیت جایگزین کنیم - Opacity: 0 و Opacity: 1. و زمانی را تنظیم کنید که در آن منوی ما خود را از یک کشور شفاف آشکار می کند. بله، این واقعا کار خواهد کرد، اما دقیقا همان چیزی نیست که ممکن است انتظار داشته باشید. بنابراین بیایید کمی سخت تر کنیم. اما ارزشش را دارد، به من اعتماد کن.

به منظور انیمیشن برای به دست آوردن صاف تر و قابل پیش بینی، من مجبور شدم یک ارتفاع ثابت از نقاط منوی کشویی را تنظیم کنم، اگر چه امکان انجام آن بدون آن بود. روش های وزن، فقط ترکیب ترکیبات و حل وظیفه.

همانطور که می توان از کد دیده می شود، ما ارتفاع عناصر لیست کشویی و شفافیت آنها را متحول می کنیم. این به اندازه کافی برای ایجاد انیمیشن صاف صاف از منوی کشویی کافی بود.

ما برای انیمیشن نیاز داریم؟ دو حالت از نقاط منوی ما، و همچنین اموال انتقال، که این ایالت ها را تعامل می کند، یعنی تمام مقادیر متوسط \u200b\u200bبرای مدت زمان اختصاص داده شده پر می شود. این همه!

با استفاده از جی کوئری حتی ساده تر می شود، اما ما همچنین ابتدا اظهار داشتیم که امروز با CSS تمیز کار خواهیم کرد. و حتی زیبا تر، ممکن بود انجام شود، اضافه کردن منحنی های Beziers به \u200b\u200bانیمیشن ها، با این حال، این موضوع از امروز فراتر می رود. اما ما قطعا بعدا به آن باز خواهیم گشت.

خروجی:

حالا شما می توانید دوستان خود را تحسین کنید و نزدیک بدانید که چگونه یک منوی کشویی را در CSS خالص ایجاد کنید. این یک مهارت واقعا مفید است که شما مفید تر است. خوب، آیا می دانید، آیا شما سایت ها را با منوی استاتیک دیده اید؟ نه، اکثر سایت ها دقیقا منوی کشویی را دارند.

به هر حال، این اولین درس CSS من بود. توضیح دهید که چگونه؟ من درک می کنم همه چیز توضیح داده شده یا نیاز به هنوز هم جویدن؟ و آیا ارزش آن را دارد که به مقالاتی در مورد Lifehakov در CSS ادامه دهد؟

با تشکر از توجه شما به جلسات سریع!

آیا تا به حال به پایان رسیده اید؟

آیا این مفید بود؟

خب نه

چه چیزی دقیقا دوست داری؟ این مقاله ناقص یا غلط بود؟
نوشتن در کلیمینها و ما قول می دهیم اصلاح کنیم!

هر کسی که تصمیم گرفت یک وبسایت را ایجاد کند، نیاز به ایجاد یک ناز دارد منو برای سایت شما. در این مقاله، من به شما خواهم گفت که چگونه با کمک کد معمول HTML و قوانین ساده CSS، شما می توانید یک بزرگ را ایجاد کنید منوی کشوییکه تغییر و مکمل آسان است. و برای این ما هیچ کد جاوا اسکریپت نیاز نداریم!

اولین مرحله و مهمترین مرحله، هنگام ایجاد یک منوی کشویی، ایجاد ساختار آن است. بهتر است این کار را با استفاده از لیست های غیر اندازه گیری انجام دهید. بیایید یک منو ساده ایجاد کنیم:

اصلی
مقالات
- HTML
- CSS
- پی اچ پی
- mysql
کتاب
- ارتقاء و ارتقاء
- تجارت الکترونیک
- طراحی وب سایت
- سیستم های پرداخت
درباره ما

بسیار ساده و دشوار نیست که کد HTML باشد. این به نظر می رسد این لیست بنابراین.

در مرحله بعدی، ما را به من معرفی می کنیم منظره زیبا. این را می توان به راحتی از طریق استفاده از CSS انجام داد.
اولین چیزی که برای حذف mercres در لیست غیر اندازه گیری شده، endits، و همچنین عرض منو ما را تنظیم کنید.

#nav ul (مارجین: 0px؛ padding: 0px؛ لیست سبک: هیچ؛ عرض: 200px؛)

حالا ما باید موقعیت موارد لیست را تنظیم کنیم. از زمان ما منو این عمودی خواهد بود، کار ما را تسهیل می کند. با این حال، ما باید ارزش ملک را تعیین کنیم. "موقعیت" ، مانند "نسبت فامیلی" . لازم است به منظور ارتباط نسبتا زیر منوی نسبت به منوی اصلی، مناسب باشد. ما همچنین علامت های پایین تر را برای آیتم های منو تنظیم خواهیم کرد.

#nav ul li (موقعیت: نسبی؛ مرز پایین: 1px Solid #CCC؛)

حالا شما باید خود را اصلاح کنید زیرمجموعه. از آنجا که ما می خواهیم منوی ما را به سمت راست منوی اصلی در لحظه زمانی که مکان نما بالاتر از این مورد است، پس ما باید لیست، اموال را وارد کنید "موقعیت" تعیین ارزش "مطلق" . ما همچنین باید از موقعیت خود بپرسیم. این به شرح زیر انجام می شود.

#nav li ul (موقعیت: مطلق؛ چپ: 200px؛ بالا: 0؛ صفحه نمایش: هیچ؛)

با استفاده از ویژگی ها ترک کرد. و بالا. ما از موقعیت مطلق زیر منوی ما در مورد منوی اصلی استفاده می کنیم. من همچنین یک ویژگی اختصاص دادم "نمایش دادن" مقدار "هیچ یک" از آنجا که ما نمی خواهیم هنگام باز کردن صفحه، زیر منو را ببینیم.

بنابراین، در حال حاضر منو ما به نظر می رسد این.

حالا اجازه دهید ما را به ظاهر لینک های ما بدهیم. اول از همه، به منظور هر پیوند به اشغال تمام مکان های مجاز آن را در داخل آیتم لیست شامل آن، اختصاص یک ویژگی "نمایش دادن" مقدار "مسدود کردن" . همچنین پایین تر را از بین ببرید و رنگ پس زمینه و رنگ متن لینک را تنظیم کنید.

#nav ul li a (صفحه نمایش: بلوک؛ متن دکوراسیون: هیچ؛ رنگ: # 777؛ سابقه و هدف: #fff؛ padding: 5px؛)

#nav li: hover ul (نمایش: بلوک؛)

در حال حاضر منو ما در حال حاضر کار می کند و به نظر می رسد این.

باقی مانده است که به او یک دیدگاه جذاب تر بدهید.

برای شروع، اجازه دهید آن را به طوری که زمانی که شما در مورد منوی ما شناور تغییر پس زمینه و رنگ متن. برای انجام این کار، کد زیر را اضافه کنید.

#nav li: hover a (رنگ: #ffffff؛ سابقه و هدف: URL (img / fone-tr.png)؛)

در اینجا من از این تصویر به عنوان پس زمینه استفاده می کنم، اما شما می توانید هر رنگ دیگری را پر کنید (به عنوان مثال: سابقه و هدف: # 0000FF؛ ).

#nav li: hover ul a: hover (background-color: #ccccccc؛ پس زمینه-تصویر: هیچ؛ رنگ: #ffffff؛)

خودشه! ما منوی کشویی در HTML و CSS آماده. شما می توانید ببینید چه اتفاقی افتاده است.

به نظر می رسد که ممکن است به پایان برسد، اما نه. متأسفانه نسخه های اولیه اینترنت اکسپلورر. درک شبه کلاس : شناور فقط برای برچسب - به طوری که لی: شناور به نظر ما ظاهر زیر منو را گره خورده و رنگ پس زمینه را تغییر داده است، او چیزی نمی گوید.

به منظور از بین بردن این مشکل، یک کد جاوا اسکریپت کوچک را اضافه کنید:

حالا اجازه دهید آن را به طوری که زمانی که شما یک زیر منو، او همچنین رنگ پس زمینه خود را تغییر داد. برای انجام این کار، از کد زیر استفاده کنید:

این اجازه می دهد تا شما را به "پیوستن" کلاس jshover به هر عنصر

بیش از این که مکان نما عبور می کند. این ویژگی فقط در اینترنت اکسپلورر کار می کند - برای مرورگرهای دیگر، به سادگی مورد نیاز نیست.

حالا که منو در اینترنت اکسپلورر به دست آورده است، به سه قواعد موجود در انتخاب اضافی اضافه کنید li.jshover:

#nav li: hover ul، #nav li.jshover ul (
…
}

#nav li: hover a، #nav li.jshover a (
…
}

#nav li: hover ul a: hover، #nav li.jshover ul a: hover (
…
}