منوی عمودی در CSS منوی جانبی ثابت در سبک های CSS استاندارد CSS خالص برای منوی افقی

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

در درس استفاده خواهیم کرد:

  • نمایش: فلکس;
  • استفاده از انتقال
  • ما عناصر را با استفاده از موقعیت قرار می دهیم.

ساختار HTML منوی افقی

اول از همه، اجازه دهید نشانه گذاری برای منوی افقی را بنویسیم. ما محیط توسعه خود را در مورد من PhpStorm باز می کنیم، یک فایل index.html ایجاد می کنیم، چارچوب html:5 را می نویسیم، lang را با ru جایگزین می کنیم.

من تمام متا را به جز رمزگذاری حذف می کنم، عنوان خود را می نویسم " منوی تام».

بین بدنه تگ هدر را می نویسیم و در آن بلوکی با کلاس .dws-menu است که منوی ما در آن قرار خواهد گرفت. علاوه بر این، ساختار به صورت زیر خواهد بود، ما لیست هایی به تعداد پنج قطعه ایجاد می کنیم. هر لیست دارای پیوندی با ویژگی href="#" خواهد بود. سپس یک نماد I با کلاس .fa .fa- وجود خواهد داشت.

روی اعمال کلیک کنید.

بیایید نام آیتم های منو را بنویسیم ( صفحه اصلی، محصولات، خدمات، اخبار، مخاطبین).

سپس آیکون ها را انتخاب کرده و وصل کنید. ما به وب سایت Font Awesome می رویم، نمادهایی را برای این موارد منو انتخاب می کنیم:

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

پوشه fonts شامل فونت های آیکون و پوشه css شامل سبک های آنهاست. سبک های فشرده را می توان با font-awesome.min حذف کرد، شامل font-awesome.css غیرفشرده است.

در index.html ما آیکون ها را به هم وصل می کنیم و برای هر آیتم سبک نماد خود را تجویز می کنیم ( خانه, سبد خرید, چرخ دنده ها, th-list, پاکت باز).

فریم اصلی را درست کرده ایم، بعد از توضیح استایل اصلی، زیر منو را تشکیل می دهیم و حالا یک فایل ایجاد می کنیم که در آن استایل های اصلی منوی افقی style.css را شرح می دهیم و آن را به index.html متصل می کنیم. برای بررسی اینکه سبک ها به هم متصل هستند، یک پوشه img ایجاد می کنم، یک تصویر دلخواه را در پس زمینه آن قرار می دهم. بیایید اتصال تصویر را با استفاده از پس زمینه بنویسیم.

بدنه (پس زمینه-تصویر: url("../img/ep_naturalwhite.png")؛ )

توصیف سبک های CSS برای منوی افقی

اول از همه، بیایید تمام تورفتگی هایی را که مرورگرهای مختلف می توانند به طور پیش فرض تنظیم کنند، بازنشانی کنیم:

منوی Dws *( حاشیه: 0؛ بالشتک: 0؛ )

بیایید هدر را روی 200 پیک تنظیم کنیم. و فونت Cuprum را که قابل دانلود است و به صورت جداگانه به سایت شما متصل می شود اختصاص دهید، فقط در صورت امکان فونت های اضافی را می نویسیم.

سرصفحه (حاشیه: 200 پیکسل؛ فونت-خانواده: Cuprum، Arial، Helvetica، sans-serif؛ )

بیایید نشانگرها را از لیست ها پنهان کنیم:

dws-menu ul, .dws-menu ol( list-style: none; )

بیایید لیست ها را به صورت افقی با display: flax نمایش دهیم و آن را در مرکز قرار دهیم:

Dws-menu > ul(نمایش: flex; justify-content: center;)

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

سرتیتر( margin-top: 200px; font-family: Cuprum، Arial، Helvetica، sans-serif; )

بیایید منوی خود را طراحی کنیم، رنگ دکمه ها، فونت و غیره را تنظیم کنیم.

Dws-menu > ul li a (نمایش: بلوک؛ پس‌زمینه: #ececed؛ بالشتک: 15 پیکسل 30 پیکسل 15 پیکسل 40 پیکسل؛ اندازه قلم: 14 پیکسل؛ رنگ: #454547؛ تزئین متن: هیچ؛ تبدیل متن: حروف بزرگ؛ )

سپس آیکون ها را قرار می دهیم، موقعیت لیست ها را تعیین می کنیم: relative; برای وسط بیشتر نمادها:

dws-menu > ul li( موقعیت: نسبی؛ )

dws-menu > ul li > a i.fa( موقعیت: مطلق؛ بالا: 15 پیکسل؛ سمت چپ: 12 پیکسل؛ اندازه قلم: 18 پیکسل؛ )

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

Dws-menu > ul li:first-child( border-left: 1px solid #b2b3b5; ) .dws-menu > ul li:last-child( border-right: 1px solid #babbbd; )

ساخت جداکننده برای لیست های LI:

.dws-menu > ul li( position: relative; حاشیه سمت راست: 1px جامد #c7c8ca; }

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

منوی افقی را در شناور متحرک کنید

منوی Dws li a:hover (پس‌زمینه: #454547؛ رنگ: #ffffff؛ کادر سایه: 1px 5px 10px -5px سیاه؛ انتقال: همه 0.3s ease؛ )

و برای اینکه این افکت به آرامی ناپدید شود، این سبک را به پیوند در حالت استراحت اضافه کنید:

.dws-menu > ul li a(نمایش: بلوک؛ پس‌زمینه: #ececed؛ بالشتک: 15 پیکسل 30 پیکسل 15 پیکسل 40 پیکسل؛ اندازه قلم: 14 پیکسل؛ رنگ: #454547؛ تزیین متن: هیچ؛ تبدیل متن: حروف بزرگ.انتقال: همه 0.3s سهولت. )

منوی اصلی به پایان رسیده است و می توانید شروع به توضیح زیر منوها و زیر منوهای آنها کنید.

توصیف یک منوی کشویی CSS/HTML

index.html را باز می کنیم و مثلاً یک منوی اضافی به محصولات اضافه می کنیم. بین لیست‌های LI که UL وارد می‌کنیم، پنج لیست را در آن قرار می‌دهیم که در آنها پیوندهایی با ویژگی herf=”#” وجود دارد.

ul>li*5>a

روی اعمال کلیک کنید، نام موارد را بنویسید ( پوشاک، الکترونیک، غذا، ابزار، زندگی. علم شیمی).

  • تن پوش
  • الکترونیک
  • غذا
  • ابزار
  • ژنرال علم شیمی

سپس style.css را باز می کنیم و استایل های زیر منو را شرح می دهیم.

لیست دوم را انتخاب کنید و به آن موقعیت بدهید: absolute; ، حداقل عرض را روی ۱۵۰ پیکسل قرار دهید.

/*sub menu*/ .dws-menu li ul( موقعیت: مطلق؛ حداقل عرض: 150 پیکسل؛ )

بیایید مرز 1 قله را در لیست ها بنویسیم.

Dws-menu li > ul li (حاشیه: 1px جامد #c7c8ca؛ )

برای پیوندهای موجود در زیر منو، padding را روی 10 پیکسل تنظیم کنید، تبدیل متن را حذف کنید و پس‌زمینه را چند تن پس‌زمینه تیره‌تر کنید: #e4e4e5; .

Dws-menu li > ul li a (بالشتک: 10 پیکسل؛ تبدیل متن: هیچ؛ پس‌زمینه: #e4e4e5؛ )

سپس منوی تودرتو دیگری ایجاد خواهیم کرد. بیایید به فایل نشانه گذاری برویم و به عنوان مثال، در "الکترونیک" مانند قبل، منو را بر اساس قیاس تشکیل دهیم. عناوین پاراگراف را توضیح دهید ( دوربین، کامپیوتر، گوشی) و ذخیره کنید.

  • الکترونیک
    • دوربین ها
    • کامپیوترها
    • تلفن ها

    • آنها نمایش داده می شوند، اما در زیر منوی اصلی پنهان هستند، اکنون موقعیت: مطلق; UL تو در تو و آن را با 150 قله جابجا می کنیم. به کنار:

    Dws-menu li > ul li ul( موقعیت: مطلق؛ راست: -150 پیکسل؛ بالا: 0؛ )

    /*sub menu*/ .dws-menu li ul( position: absolute; min-width: 150px;نمایش: هیچ )

    و برای ظاهر آنها، لیست های موجود در hover را انتخاب می کنیم و با استفاده از display: block; .

    dws-menu li:hover > ul( display: block; )

    اکنون می توانید منوهای چند سطحی را به سادگی با کپی کردن بلوک UL و تغییر موارد آن اضافه کنید.

    • خانه
    • محصولات
      • تن پوش
        • کفش
        • ژاکت
        • شلوار
      • الکترونیک
        • دوربین ها
        • کامپیوترها
        • تلفن ها
          • سامسونگ
          • Flf
          • سیب
      • غذا
      • ابزار
      • ژنرال علم شیمی
    • خدمات
      • خدمات 1
      • خدمات 2
      • سرویس 3
    • اخبار
    • مخاطب

    سپس دکمه ها را با مواد اولیه برای مراحل پایانی تزئین می کنیم. من از یک ژنراتور CSS استفاده می کنم، چندین پیش تنظیم ایجاد کرده ام، شما می توانید خودتان را ایجاد کنید، در مورد من فقط کپی می کنم کد داده شدهو پس زمینه ای را که قبلا نوشتم در جای خود قرار دهید.

    .dws-menu > ul li a( display: block; /* پیوند ثابت - برای ویرایش و به اشتراک گذاری این گرادیان استفاده کنید: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Custom+3 */ پس زمینه: #c9c9c9 ; /* مرورگرهای قدیمی */ پس زمینه: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ پس زمینه: -webkit-linear-gradient(top, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */ پس‌زمینه: خطی-gradient(به پایین، #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%)؛ /* W3C، IE10+، FF16+، Chrome26+، Opera12+، Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9", endColorstr="#757577",GradientType=0); /* IE6-9 */ بالشتک: 15px 30px 15px 40px; اندازه فونت: 14px; رنگ: #454547; text-decoration: هیچ; text-transform:بزرگ; انتقال: همه 0.3s سهولت. ).dws-menu li a:hover( /* پیوند ثابت - برای ویرایش و به اشتراک گذاری این گرادیان استفاده کنید: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 */ پس زمینه: #e0e1e5; /* مرورگرهای قدیمی */ پس زمینه: -moz-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ پس زمینه: -webkit-linear-gradient(top, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25,Safari5.1-6 */ پس زمینه: خطی-gradient(به پایین، #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%)؛ /* W3C، IE10+، FF16+، Chrome26+، Opera12+، Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e0e1e5", endColorstr="#e0e1e5",GradientType=0); /* IE6-9 */ رنگ: #ffffff; box-shadow: 1px 5px 10px -5px سیاه؛ انتقال: همه 0.3s سهولت. )

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

    روز بخیر، خوانندگان عزیز. امروز در مورد موضوع بحث خواهیم کرد آموزش ساخت منوی افقی با استفاده از html و css". منو، به عنوان یک قاعده، در هدر سایت قرار دارد و لیستی از پیوندها به مهمترین صفحات است، همچنین نامیده می شود منوی اصلی. کاربران دائما روی این لینک ها کلیک می کنند. نحوه چیدمان آنها و طراحی منو بر رفتار کاربر، تبدیل، تجربه کلی آنها از سایت شما و البته، تأثیر می گذارد.

    کد HTML برای منوی افقی

    روزی روزگاری منوی اصلی سایت بر روی تصاویر، جداول، فلش و احتمالا چیزهای دیگر ساخته می شد، اما امروزه محبوب ترین و صحیح ترین روش ایجاد منو با استفاده از تگ های “list” وجود دارد.

    از برچسب ها برای ایجاد منو استفاده می شود.

    نمونه ای از استفاده از تگ های html برای ایجاد منو در کد زیر:

    • خانه
    • خدمات
    • قیمت
    • مخاطب

    سبک های استاندارد CSS برای منوی افقی

    ul (لیست-سبک: هیچکدام؛ /*حذف نشانگرهای فهرست*/ حاشیه: 0؛ /*حذف padding*/ padding-left: 0؛ /*remove padding*/ ) a (تزیین متن: هیچکدام؛ /*حذف زیرخط متن پیوند*/ ) li ( float:left; /*لیست را به صورت افقی برای پیاده سازی منو قرار دهید*/ margin-right:5px؛ /*تورفتگی آیتم های منو*/ )

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

    نمونه ای از یک قاب (الگو) برای منوی آینده شما

    همه چیز کاملاً ساده بود، مطمئناً شما فوراً یک منوی اصلی زیبا می خواهید، اما بدون درک اصول اولیه، به سادگی نمی توانید یک منوی خوب بدون خطا در html و css ایجاد کنید.

    چندین مورد دیگر نیز وجود دارد روش های CSSبرای افقی کردن منو علاوه بر float:left; برای مثال display:inline-block; یا display:flex; ، اما توصیه می شود از روشی که در بالا توضیح داده شد استفاده کنید.

    بیایید قالب منوی خود را با سبک های مختلف پر کنیم و آن را بسازیم زیبا.

    نمونه هایی از منوی افقی زیبا برای یک وب سایت

    حالا چند مثال آماده با طراحی آمادهمنوی افقی

    شما می توانید تمام "چیزهای زیبا" را خودتان برای سایت خود ایجاد کنید و در اینترنت جستجو نکنید. ساده ترین راه برای انجام این کار بر اساس یکی از مثال های زیر است.

    منوی آبی ساده با آیتم های جداگانه

    سبک های CSS برای منوی "بالا".

    در زیر سبک ها آمده است این منو. HTML مانند منوی "اسکلت" باقی می ماند.

    اول (سبک لیست: هیچکدام؛ /*حذف نشانگرهای لیست*/ حاشیه: 0؛ /*حذف بالشتک*/ padding-left: 0؛ /*حذف padding*/ margin-top:25px؛ /*indent top*/ ) a ( text-decoration: هیچکدام؛ /*حذف زیرخط متن پیوند*/ پس زمینه:#30A8E6؛ /*افزودن پس زمینه به آیتم منو*/ رنگ:#fff؛ /*تغییر رنگ پیوند*/ padding:10px؛ /*افزودن بالشتک */ font-family: arial؛ /*تغییر قلم*/ border-radius:4px؛ /*add rounding*/ -moz-transition: all 0.3s 0.01s ease؛ /*یک انتقال صاف*/ -o-transition : همه 0.3s 0.01s ease؛ -webkit-transition: all 0.3s 0.01s ease؛ ) a:hover ( پس زمینه:#1C85BB;/*افزودن hover effect*/ ) li ( float:left; /*لیست را به صورت افقی به پیاده سازی منو*/ margin-right:5px؛ /*تورفتگی آیتم های منو*/ )

    منوی اصلی واقع در یک خط رنگی با پس زمینه قرمز

    منوی سبک css در خط رنگ

    ul (سبک لیست: هیچکدام؛ /*حذف نشانگرهای فهرست*/ حاشیه: 0؛ /*حذف بالشتک*/ padding-left: 0؛ /*حذف padding*/ margin-top:25px؛ /* تورفتگی بالای*/ پس زمینه :#FF4444; /*افزودن پس‌زمینه به کل منو (با جایگزینی این پارامتر، رنگ کل منو تغییر می‌کند)*/ ارتفاع: 50 پیکسل؛ /* ارتفاع را تنظیم کنید*/ ) a (تزیین متن: هیچ‌کدام؛ /* زیر خط متن پیوند را بردارید* / پس‌زمینه:#FF4444؛ /*پس‌زمینه را به آیتم منو اضافه کنید (با جایگزینی این تنظیم، رنگ همه آیتم‌های منو تغییر می‌کند)*/ color:#fff؛ /*تغییر رنگ پیوند* / padding:0px 15px؛ /*افزودن padding*/ font-family: arial؛ /*تغییر فونت*/ line-height:50px؛ /*تراز کردن منو به صورت عمودی*/ نمایش: بلوک؛ حاشیه سمت راست: 1px جامد # F36262؛ /*افزودن حاشیه به سمت راست*/ -moz-transition : همه 0.3s 0.01s آسان است؛ /*یک انتقال صاف*/ -o-transition: all 0.3s 0.01s ease؛ -webkit-transition: all 0.3s 0.01s ease؛ ) a:hover (پس زمینه:#D43737;/ *افزودن اثر شناور*/) li ( float:left; /*لیست را به صورت افقی برای واقعی قرار دهید منو*/ )

    منوی کشویی در HTML + CSS

    برای اجرا منوی کشویی اضافی (کشویی) در سایتبرای هر آیتم منو، باید یک لیست اضافی از آیتم ها را برای هر پیوندی از منوی افقی به کد HTML اضافه کنیم و سبک های CSS را تغییر دهیم. در استایل ها، از یک ترفند ساده استفاده خواهیم کرد - تغییر نمایش منوی کشویی در حالت شناور به آیتم مورد نیاز منوی بالا. به عنوان مثال، بیایید مورد "خدمات" را در نظر بگیریم.

    نمونه ای از ایجاد یک منوی کشویی ساده

    کد HTML منوی کشویی

    • خانه
    • خدمات
      • خدمات 1
      • خدمات طولانی 2
      • سرویس 3
    • قیمت
    • مخاطب

    سبک های CSS کشویی

    ul (سبک لیست: هیچکدام؛ /*حذف نشانگرهای فهرست*/ حاشیه: 0؛ /*حذف بالشتک*/ padding-left: 0؛ /*حذف padding*/ margin-top:25px؛ /* تورفتگی بالای*/ پس زمینه :#819A32؛ /*افزودن پس‌زمینه به کل منو*/ ارتفاع: 50 پیکسل؛ /*تنظیم ارتفاع*/ ) a (تزیین متن: هیچکدام؛ /*زیر خط متن پیوند را بردارید*/ پس زمینه:#819A32 ؛ /*افزودن پس‌زمینه به آیتم منو*/ رنگ:#fff؛ /*تغییر رنگ پیوندها*/ padding:0px 15px؛ /*افزودن padding*/ font-family: arial؛ /*تغییر قلم*/ line-height :50px؛ /*تراز منو به عمودی*/ نمایش: بلوک؛ حاشیه سمت راست: 1px جامد #677B27؛ /*افزودن حاشیه به سمت راست*/ -moz-transition: همه 0.3s 0.01s آسان است؛ /*یک انتقال صاف*/ -o-transition: all 0.3s 0.01s ease؛ -webkit-transition: all 0.3s 0.01s ease؛ ) a:hover ( background:#D43737;/*Add a hover effect*/ ) li ( float :left; /*لیست را به صورت افقی برای پیاده سازی منو قرار دهید* / position:relative; /*موقعیت را برای موقعیت یابی تنظیم کنید*/ ) /*سبک ها برای منوی کشویی پنهان* / li > ul ( position:absolute; بالا: 25 پیکسل; نمایش: هیچ ) /*بخش پنهان را قابل مشاهده کنید*/ li:hover > ul ( display:block; width:250px; /*تنظیم عرض منوی کشویی*/ ) li:hover > ul > li ( float:none; /* حذف موقعیت افقی* / )

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

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

    از توجه شما متشکرم

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

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

    1. منوی عمودی با عنوان

    طراحی ساده و زیبا. مناسب برای دسته بندی های استایل در سایت. در حالت شناور، آیتم لیست رنگ پیوند را تغییر می دهد.

    دسته بندی ها

    * (اندازه جعبه: جعبه حاشیه؛ حاشیه: 0؛) .ویجت (پرده: 20 پیکسل 30 پیکسل؛ پس‌زمینه: سفید؛ خانواده فونت: "Roboto"، sans-serif؛ ) .ویجت-عنوان (تبدیل متن: حروف بزرگ ؛ فاصله حروف: 2 پیکسل؛ رنگ: #222؛ اندازه قلم: 16 پیکسل؛ بالشتک چپ: 15 پیکسل؛ حاشیه پایین: 15 پیکسل؛ حاشیه سمت چپ: 2 پیکسل توپر #b99d61؛ ) .widget-list ( بالشتک: 0؛ فهرست -style: هیچ؛ ) .widget-list a:before ( محتوا: "\2014"؛ حاشیه-راست: 14px؛ ) .widget-list a (متن-تزیین: هیچ، طرح کلی: هیچ، نمایش: بلوک، بالشتک: 6px 0؛ فاصله حروف: 1px؛ وزن قلم: 300؛ رنگ: #444؛ انتقال: 0.3s خطی؛ . widget-list a:hover (رنگ: #b99d61;)

    2. منوی عمودی به سبک "نقشه مترو"

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

    .metro ( سبک لیست: هیچکدام؛ بالشتک: 0؛ حاشیه: 30 پیکسل 0 0 50 پیکسل؛ حاشیه سمت چپ: 5 پیکسل ثابت #DAE4F1؛ ) .metro li (ارتفاع خط: 2em؛) .metro ul ( حاشیه: 20px 0 20px 15 پیکسل؛ بالشتک: 0؛ حاشیه: هیچ؛ فهرست به سبک: هیچ؛ ؛ نمایش: بلوک؛ سمت چپ: -9 پیکسل؛ ) .metro ul:prefore (transform: rotate(-45deg); margin-top: -15px;) .metro ul:after (transform: rotate(45deg); bottom: -20px ; ) .metro ul li (حاشیه-سمت چپ: 5px جامد #DAE4F1;) .metro ul li:first-child ( margin-top: -5px; padding-top: 5px; ) .metro ul li:last-child ( padding -پایین: 9 پیکسل؛ حاشیه-پایین: -25 پیکسل؛ .metro a (متن-تزیین: هیچکدام؛ نمایش: بلوک؛ خانواده فونت: "Noto Sans"، sans-serif؛ رنگ: #4A4B4D; ) .metro a: قبل (محتوا: ""؛ نمایشگر: بلوک درون خطی؛ پس‌زمینه: #CA682D؛ عرض: 12 پیکسل؛ ارتفاع: 12 پیکسل؛ سمت چپ: -9 پیکسل؛ موقعیت: نسبی؛ شعاع حاشیه: 50%؛ حاشیه-راست: 0.5em؛ )

    3. منوی عمودی با جلوه های شناور

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

    دسته بندی ها

    .category-wrap ( padding: 15px؛ پس‌زمینه: سفید؛ عرض: 200px؛ box-shadow: 2px 2px 8px rgba(0,0,0,.1)؛ font-family: "Helvetica Neue", Helvetica, Arial, sans -serif; ) .category-wrap h3 (اندازه قلم: 16px؛ رنگ: rgba(0,0,0,.6)؛ حاشیه: 0 0 10px؛ padding: 0 5px؛ موقعیت: نسبی؛ .category-wrap h3:after ( محتوا: ""؛ عرض: 6px؛ ارتفاع: 6px؛ پس‌زمینه: #80C8A0؛ موقعیت: مطلق؛ سمت راست: 5px؛ پایین: 2px؛ box-shadow: -8px -8px #80C8A0، 0 -8px #80C8A0 , -8px 0 #80C8A0; ) .category-wrap ul (list-style: هیچ، حاشیه: 0؛ padding: 0; border-top: 1px solid rgba(0,0,0,.3); ) .category- wrap li (حاشیه: 12px 0 0 0px؛) .category-wrap a ( متن-تزیین: هیچکدام؛ نمایش: بلوک؛ اندازه قلم: 13px؛ رنگ: rgba(0,0,0,.6)؛ padding: 5px ؛ موقعیت: نسبی؛ انتقال: 0.3s خطی؛ ) .category-wrap a:after (content:"\f18e"؛ font-family: FontAwesome؛ موقعیت: مطلق؛ سمت راست: 5px؛ رنگ: سفید؛ انتقال: 0.2s خطی ; ) .category-wrap a:hover ( پس زمینه: #80C8A0 ; رنگ سفید؛ )

    4. منوی عمودی با آیکون

    آیکون‌های منو یک لنگر بصری ارائه می‌کنند و توضیحات کلامی هر دسته را تکمیل می‌کنند. برای نمایش نمادها، باید متصل شوید. همچنین می توانید از هر فونت آیکون یا نماد تصویر دیگری استفاده کنید.

    دسته بندی ها

    * (اندازه جعبه: جعبه حاشیه؛ حاشیه: 0؛) .ویجت (بالشتک: 20 پیکسل؛ حاشیه: 5 پیکسل ثابت #f1f1f1؛ پس‌زمینه: #fff؛ شعاع حاشیه: 5 پیکسل؛ فونت-خانواده: "Roboto"، sans- serif; ) .ویجت h3 ( حاشیه-پایین: 20 پیکسل؛ تراز نوشتاری: مرکز؛ اندازه قلم: 24 پیکسل؛ وزن قلم: عادی؛ رنگ: #424949؛ ) .ویجت ul ( حاشیه: 0؛ پد: 0؛ فهرست -style: هیچ؛ عرض: 250 پیکسل؛ ) .ویجت لی ( حاشیه-پایین: 1 پیکسل توپر #eaeaea؛ بالشتک-پایین: 15 پیکسل؛ حاشیه-پایین: 15 پیکسل؛ ) .ویجت لی:آخرین-کودک (حاشیه-پایین: هیچ; margin-bottom: 0; padding-bottom: 0; ) .widget a (متن-تزیین: هیچکدام؛ رنگ: #616a6b؛ نمایش: inline-block;) .widget li:before (فونت-خانواده: FontAwesome؛ اندازه فونت : 20 پیکسل؛ تراز عمودی: پایین؛ رنگ: #dd3333؛ حاشیه سمت راست: 14 پیکسل؛ ) .ویجت li:nth-child(1):before (محتوا:"\f1fc";) .ویجت li:nth-child( 2):before (content:"\f0d0";) .widget li:nth-child(3):before (content:"\f0cd";) .widget li:nth-child(4):before (محتوا:" \f028";) .ویجت li:nth-child(5):prefore (محتوا:"\f03d";)

    5. منوی عمودی با تصاویر

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

    Jpeg">

    محصول 1
    ₽ 2000
    محصول 2
    2500 ₽
    محصول 3
    ₽ 2070
    آدرس اینترنتی import@("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"); .col ( عرض: 300 پیکسل؛ پس‌زمینه: سفید؛ بالشتک: 20 پیکسل؛ حاشیه: 1 پیکسل ثابت #eeeeee؛ خانواده قلم: "Open Sans"، sans-serif; ) .col * (حاشیه: 0;) .widget-title ( حاشیه: 0 0 30 پیکسل؛ ارتفاع خط: 1؛ تبدیل متن: بزرگ؛ فاصله حروف: 1 پیکسل؛ اندازه فونت: 20 پیکسل؛ رنگ: #242424؛ سرریز: پنهان؛ . ویجت-عنوان: بعد ( محتوا: " "؛ موقعیت: نسبی؛ نمایشگر: بلوک درون خطی؛ عرض: 100٪؛ تراز عمودی: وسط؛ راست: -15 پیکسل؛ حاشیه سمت راست: -100٪؛ حاشیه بالا: 2 پیکسل توپر #cca86d؛ ) .price-line (حاشیه-پایین: 20 پیکسل؛) .price-line:last-child (حاشیه-پایین: 0;) .price-line:after ( محتوا: ""؛ نمایش: جدول؛ واضح: هر دو؛ .product-image ( عرض: 80 پیکسل؛ شناور: سمت چپ؛ .product-image a (نمایش: بلوک؛ طرح کلی: هیچکدام؛ ) .product-image img (نمایش: بلوک؛ عرض: 100%؛ ) .product-content ( شناور: سمت چپ؛ حاشیه -left: 20px; ) .product-title (اندازه قلم: 18px؛ حاشیه-پایین: 10px؛ خط-ارتفاع: 1; ) .product-title a (متن-تزیینات: هیچکدام؛ رنگ: #242424; ) .قیمت -جعبه (رنگ: #666; اندازه فونت: 18px; ارتفاع خط: 1; ) .star-rating ( حاشیه پایین: 10 پیکسل؛ اندازه قلم: 13 پیکسل؛ موقعیت: نسبی؛ خانواده فونت: "FontAwesome"؛ ) .star-rating:before ( محتوا: "\f005 \f005 \f005 \f005 \ f005"؛ موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 0؛ رنگ: #FF9919؛ )

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

    مرحله 1. فونت را با نمادها وصل کنید، یک سند خالی ایجاد کنید

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

    در اینجا کد صفحه با فایل های متصل است:

    منوی کناری ثابت

    مرحله 2: اضافه کردن نشانه گذاری HTML منوی ثابت

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

    همانطور که متوجه شدید، من تگ را اعمال کردم

    مرحله 3. اضافه کردن زیر منوی HTML Markup

    منوی فرعی همان لیست منوی اصلی به اضافه تگ است ، که نماد "کالسکه در سمت چپ" را نشان می دهد، عملکرد یک "دم" خاص را انجام می دهد، جزئیات بیشتر در تصویر زیر 🙂


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

    مرحله 4 حالت دادن به نوار کناری ثابت

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

    #sidebar-menu ( موقعیت: ثابت؛ /* منوی ما را اصلاح کنید */ بالا: 200 پیکسل؛ /* موقعیت منو نسبت به لبه بالای مرورگر */ سمت چپ: 0؛ /* منو را به لبه چپ بچسبانید * / بالشتک: 10 پیکسل؛ پس‌زمینه: # 323A45؛ رنگ: #FFF؛ شعاع حاشیه: 0 8 پیکسل 8 پیکسل 0؛ ) #sidebar-menu li (موقعیت: نسبی؛ مکان‌نما: نشانگر؛ ) #sidebar-menu li i ( /* تنظیم نمادها در اندازه، ارتفاع و ارتفاع خط ثابت باید یکسان باشند */ عرض: 27 پیکسل؛ ارتفاع: 27 پیکسل؛ ارتفاع خط: 27 پیکسل؛ شعاع حاشیه: 4 پیکسل؛ پس‌زمینه: #3CB7E7؛ تراز نوشتاری: مرکز؛ ) #sidebar-menu li+li (margin-top: 4px;) #sidebar-menu b (نمایش: هیچ، موقعیت: مطلق؛ /* موقعیت نسبت به لبه سمت چپ برابر است با عرض عنصر li */ چپ: 27 پیکسل؛ بالا: 0؛ ارتفاع: 27 پیکسل؛ /* عرض برابر با فاصله بین منوی بلوک و زیر منو است */ عرض: 16 پیکسل؛ ارتفاع خط: 27 پیکسل؛ پس‌زمینه: شفاف؛ رنگ: #323A45؛ /* نماد را قرار دهید خود را به سمت راست به طوری که به صورت بصری همراه با بلوک زیر منو به نظر می رسد */ text-align: right; ) #sidebar -menu li > ul (نمایش: هیچ؛ موقعیت: مطلق; بالا: -10px; سمت چپ: 42px; عرض: 120 پیکسل بالشتک: 10 پیکسل پس زمینه: #323A45; شعاع حاشیه: 8 پیکسل ) #sidebar-menu li:hover b، #sidebar-menu li:hover ul (نمایش: block;) #sidebar-menu li a (نمایش: block؛ padding: 4px 8px; border-radius: 4px; color: #FFF ; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; ) #sidebar-menu li a :hover (نمایش: بلوک؛ پس‌زمینه: #3CB7E7؛ )

    اگر سوالی در مورد استایل دارید، در نظرات همین پست بنویسید، با کمال میل پاسخ خواهم داد.
    همین! منوی جانبی ثابت انجام شد 🙂

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

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

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

    1 . بنابراین به طور پیش فرض می رود یا هنگام ورود به پورتال.

    2 . ما در حال حاضر از یک دستگاه تلفن همراه تماشا می کنیم، اما هنوز تحت منو تماس گرفته نشده است.

    3 . یک کلیک در اینجا انجام شد که تمام درخواست های درخواستی را نشان داد.

    بیایید نصب را شروع کنیم:



    ZORNET.RU





    css

    بخش(
    عرض: 100%;
    حداکثر عرض: 1198 پیکسل.
    حاشیه: 0pxauto;
    نمایش: جدول;
    موقعیت:نسبی;
    }

    سرتیتر(
    عرض: 100%;
    نمایش: جدول;
    پس زمینه رنگ: #175812;
    margin-bottom:50px;
    }

    #kamtukagnpos(
    شناور به سمت چپ؛
    اندازه فونت: 25px;
    تبدیل متن: بزرگ;
    رنگ: #ffab2;
    وزن قلم: 600
    padding: 19.8px 0px;
    }

    #kamtukagnpos:hover (
    text-shadow: 0px 0px 6px rgba(255, 250, 250, 0.67);
    }

    Nav(
    عرض: خودکار;
    float:right;
    }

    ناول(
    نمایش: جدول;
    float:right;
    }

    ناو اول لی(
    شناور به سمت چپ؛
    }

    Nav ul li:last-child(
    padding-right:0px;
    }

    Nav ul li a (
    رنگ: #e4f2ff;
    اندازه فونت: 19px;
    padding: 24px 19px;
    صفحه نمایش: بلوک درون خطی
    text-shadow: 0 1px 0 #2e2f2e;
    }

    Nav ul li a: شناور (
    پس زمینه رنگ: #143a06;
    رنگ: #fff9c8;
    انتقال: همه 0.7s ease 0s;
    text-shadow: 0 1px 0 #282b28;
    }

    Nav ul li a: hover i (
    رنگ: #fdf7c9;
    انتقال: همه 0.7s ease 0s;
    text-shadow: 0 1px 0 #1c1d1c;
    }

    Nav ul li a i (
    padding-right: 9px;
    رنگ: #f4faff;
    انتقال: همه 0.7s ease 0s;
    text-shadow: 0 1px 0 #202120;
    }

    Navigation-menusaita ul(
    نمایش: جدول;
    عرض: 24 پیکسل
    }

    Navigation-menusaita ul li(
    عرض: 100%;
    ارتفاع: 3 پیکسل
    background-color:#e9f0f7;
    margin-bottom:4px;
    }

    Navigation-menusaita ul li:last-child(
    margin-bottom:0px;
    }

    ورودی، برچسب (
    نمایش: هیچ
    }

    صفحه فقط رسانه @ و (حداکثر عرض: 1440 پیکسل)(
    بخش(
    حداکثر عرض: 95%;
    }
    }

    صفحه فقط رسانه @ و (حداکثر عرض: 980 پیکسل)(
    سرتیتر(
    padding: 20px 0px;
    }

    #kamtukagnpos(
    padding: 0px;
    }

    ورودی(
    موقعیت: مطلق;
    بالا: -9999px;
    سمت چپ: -9999px;
    پس زمینه: هیچ
    }

    ورودی:fous(
    پس زمینه: هیچ
    }

    برچسب(
    float:right;
    padding: 8px 0px;
    display:inline-block;
    مکان نما: اشاره گر;
    }

    ورودی: بررسی شده ~ nav(
    display:block;
    }

    Nav(
    نمایش: هیچ
    موقعیت: مطلق;
    سمت راست: 0px;
    top:53px;
    background-color:#174810;
    padding: 0px;
    z-index:99;
    }

    ناول(
    عرض: خودکار;
    }

    ناو اول لی(
    float:none;
    padding: 0px;
    عرض: 100%;
    نمایش: جدول;
    }

    Nav ul li a(
    color:#f7f2f2;
    اندازه فونت: 15 پیکسل
    padding: 10px 20px;
    display:block;
    حاشیه-پایین: 1px جامد rgba(204، 197، 197، 0.1)؛
    }

    Nav ul li a i(
    color:#f9f5d5;
    padding-right:13px;
    }
    }

    صفحه فقط رسانه @ و (حداکثر عرض: 480 پیکسل) (
    بخش (حداکثر عرض: 90٪؛)
    }

    صفحه فقط رسانه @ و (حداکثر عرض: 360 پیکسل) (
    برچسب (بالشتک: 5px 0px؛)
    #kamtukagnpos (اندازه قلم: 20 پیکسل؛)
    nav (بالا: 47 پیکسل؛)
    }


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