منوی افقی css با آیکون ها. منوی عمودی css icons css منوی عمودی

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

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

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";)