نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی پرتال اطلاعاتی
  • خانه
  • ایمنی
  • ایجاد منوی افقی نحوه تراز کردن یک منوی افقی در مرکز

ایجاد منوی افقی نحوه تراز کردن یک منوی افقی در مرکز

02.09.2019 ایمنی

هابر، سلام!

راه حل های خوب بسیاری از متخصصان مختلف در Codepen ظاهر می شود و من معتقدم که بهترین آنها باید در یک مکان جمع آوری شود. بنابراین، 2 سال پیش شروع به ذخیره اسکریپت های جالب در مورد موضوعات مختلف در رایانه خود کردم.

من آنها را در گروه محصول IDE ابری ارسال می کردم. Gefest، اینها مجموعه ای از 5-8 راه حل بودند. اما اکنون شروع کردم به جمع آوری 15-30 اسکریپت در موضوعات مختلف (دکمه ها، منوها، نکات و غیره).

چنین مجموعه های بزرگی باید به افراد حرفه ای بیشتری نشان داده شود. بنابراین، آنها را در Habr قرار می دهم. امیدوارم برای شما مفید واقع شوند.

در این بررسی، نگاهی به منوهای لایه ای خواهیم انداخت.

ناوبری افقی تخت

نوار ناوبری زیبا با منوهای فرعی که به آرامی ظاهر می شوند. کد به خوبی ساختار یافته است، js استفاده شده است. با قضاوت بر اساس ویژگی های استفاده شده، آن را در ie8 + کار می کند.
http://codepen.io/andytran/pen/kmAEy

سربرگ ناوبری مواد با کرکره های تراز شده

نوار پیوند پاسخگو با زیر منوی دو ستونی. همه چیز در css و html انجام می شود. انتخابگرهای css3 را اعمال کرد که در ie8 پشتیبانی نمی‌شوند.
http://codepen.io/colewaldrip/pen/KpRwgQ

منوی کشویی آکاردئون صاف

منوی عمودی شیک با عناصر کشویی هموار. انتقال، تبدیل js-code استفاده می شود.
http://codepen.io/fainder/pen/AydHJ

منوی پیمایش درون خطی تاریک CSS خالص

نوار ناوبری عمودی تیره با نمادهایی از ionicons. جاوا اسکریپت اعمال می شود. در ie8 به احتمال زیاد بدون انیمیشن کار خواهد کرد.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

منوی کشویی مگا CSS3 خالص با انیمیشن

منوی شیک با دو فرمت خروجی: افقی و عمودی. از آیکون ها و انیمیشن css3 استفاده شده است. در ie8 قطعا افتضاح به نظر می رسد، اما در مرورگرهای دیگر همه چیز عالی است.
لینک عمودی: http://codepen.io/rizky_k_r/full/sqcAn/
لینک افقی: http://codepen.io/rizky_k_r/pen/xFjqs

منوی کشویی CSS3

یک منوی افقی با آیتم های بزرگ و یک لیست کشویی از لینک ها. کد تمیز و مینیمالیستی بدون js.
http://codepen.io/ojbravo/pen/tIacg

منوی کشویی ساده CSS خالص

منوی افقی ساده و در عین حال شیک. استفاده شده توسط font-wesome. همه چیز در css و html کار می کند، بدون js. در ie8 کار خواهد کرد.
http://codepen.io/Responsive/pen/raNrEW

منوی کشویی مگا بوت استرپ 3

یک راه حل عالی برای فروشگاه های آنلاین. چندین سطح از دسته ها و تصاویر بزرگ (به عنوان مثال، اقلام موجودی) را نمایش می دهد. این بر اساس بوسترپ 3 است.
http://codepen.io/organizedchaos/full/rwlhd/

ناوبری تخت

نوار ناوبری شیک با منوهای فرعی صاف. با مشکلاتی در مرورگرهای قدیمی نمایش داده می شود.
http://codepen.io/andytran/pen/YPvQQN

ناوبری تو در تو سه بعدی

منوی افقی با انیمیشن های بسیار باحال بدون js!
http://codepen.io/devilishalchemist/pen/wBGVor

مگا منوی پاسخگو - ناوبری

منوی پاسخگوی افقی خوب به نظر می رسد، اما نسخه موبایل کمی لنگ است. از css، html و js استفاده شده است.
http://codepen.io/samiralley/pen/xvFdc

منوی خالص Css3

منوی اصلی با کد ساده و تمیز بدون js. برای افکت های واو استفاده کنید.
http://codepen.io/Sonick/pen/xJagi

منوی کشویی کامل CSS3

یک منوی کشویی رنگارنگ با یک سطح تودرتو. از آیکون های font-wesome، html و css استفاده می شود.
http://codepen.io/daniesy/pen/pfxFi

منوی کشویی فقط Css3

یک منوی افقی بسیار خوب با سه سطح تودرتو. بدون js کار می کند.
http://codepen.io/riogrande/pen/ahBrb

منوهای کشویی

یک منوی مینیمالیستی با جلوه اصلی ظاهر یک لیست تودرتو از آیتم ها. خوشحالم که این راه حل نیز بدون جاوا اسکریپت است.
http://codepen.io/kkrueger/pen/qfoLa

منوی کشویی CSS خالص

یک راه حل ابتدایی اما موثر. فقط css و html.
http://codepen.io/andornagy/pen/xhiJH

منوی کششی - مفهوم تعامل منو

یک مفهوم جالب از منو برای تلفن همراه. من قبلاً این را ندیده بودم. از html، css و جاوا اسکریپت استفاده شده است.
http://codepen.io/fbrz/pen/bNdMwZ

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

کد تمیز و ساده، بدون js. در ie8 قطعا کار خواهد کرد.
http://codepen.io/nyekrip/pen/pJoYgb

کشویی CSS خالص

راه حل بدی نیست، اما کلاس های زیادی استفاده می شود. خوشحالم که js وجود ندارد.
http://codepen.io/jonathlee/pen/mJMzgR

فهرست کشویی

منوی عمودی زیبا با حداقل کد جاوا اسکریپت. JQuery استفاده نمی شود!
http://codepen.io/MeredithU/pen/GAinq

منوی کشویی CSS 3

یک منوی افقی با زیرنویس های اضافی می تواند سایت شما را به خوبی تزئین کند. کد ساده و سرراست است. جاوا اسکریپت اعمال نمی شود.
http://codepen.io/ibeeback/pen/qdEZjR

راه حل خوب با کدهای زیاد (html، css و js). 3 فرمت زیر منو اختراع شد. این راه حل برای فروشگاه های آنلاین بسیار مناسب است.
http://codepen.io/martinridgway/pen/KVdKQJ

منوی کشویی CSS3 (راه حل ویژه)!

منوی افقی تاریک با سیزده (13) گزینه انیمیشن! حتماً به شما توصیه می کنم آن را بخوانید، در زندگی روزمره مفید خواهد بود.
http://codepen.io/cmcg/pen/ofFiz

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

اگر وب سایت شما محدود به یک صفحه وب نیست، اضافه کردن یک نوار ناوبری (منو) ارزش توجه دارد. منو - بخشی از یک وب سایت که برای کمک به بازدیدکنندگان در جهت یابی سایت طراحی شده است. هر منو لیستی از پیوندهای منتهی به صفحات داخلی سایت است. ساده ترین راه برای افزودن نوار ناوبری به سایت خود ایجاد یک منو با استفاده از CSS و HTML است.

منوی عمودی

اولین مرحله برای ایجاد یک منوی عمودی، ایجاد یک لیست گلوله‌ای است. ما همچنین باید بتوانیم لیست را شناسایی کنیم، بنابراین یک ویژگی id با شناسه "navbar" به آن اضافه می کنیم. هر عنصر

  • لیست ما شامل یک پیوند خواهد بود:

    وظیفه بعدی ما بازنشانی سبک های لیست پیش فرض است. باید padding و padding را از خود لیست و گلوله ها را از آیتم های لیست حذف کنیم. سپس عرض مورد نظر را تنظیم می کنیم:

    #navbar (حاشیه: 0؛ بالشتک: 0؛ نوع فهرست: هیچ؛ عرض: 100 پیکسل؛)

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

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

    #navbar a (رنگ پس‌زمینه: # 949494؛ رنگ: #fff؛ بالشتک: 5 پیکسل؛ متن-تزیین: هیچ‌کدام؛ وزن قلم: پررنگ؛ حاشیه سمت چپ: 5 پیکسل توپر # 33ADFF؛ نمایشگر: بلوک؛) #navbar li ( حاشیه سمت چپ: 10 پیکسل توپر # 666؛ حاشیه پایین: 1 پیکسل توپر # 666؛)

    ما تمام کدهایی که در بالا توضیح داده شد را در یک مثال ترکیب کرده ایم، اکنون با کلیک بر روی دکمه try، می توانید به صفحه نمونه بروید و نتیجه را مشاهده کنید:

    نام سند

    تلاش كردن "

    هنگامی که نشانگر ماوس را روی یک آیتم منو می برید، ظاهر آن می تواند تغییر کند و توجه کاربر را به خود جلب کند. شما می توانید چنین افکتی را با استفاده از: hover pseudo-class ایجاد کنید.

    بیایید به مثال قبلی منوی عمودی خود برگردیم و قانون زیر را به شیوه نامه اضافه کنیم:

    #navbar a: شناور (رنگ پس‌زمینه: # 666؛ حاشیه سمت چپ: 5 پیکسل جامد # 3333FF؛) آن را امتحان کنید.

    منوی افقی

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

    یک منوی افقی را می توان با استایل دادن به یک لیست معمولی ایجاد کرد. ویژگی نمایش برای عناصر

  • شما باید مقدار را روی inline قرار دهید تا موارد لیست یکی پس از دیگری قرار گیرند.

    برای قرار دادن آیتم های منو به صورت افقی، ابتدا یک لیست گلوله ای با پیوندها ایجاد کنید:

    بیایید چند قانون برای لیست خود بنویسیم که سبک مورد استفاده برای لیست های پیش فرض را بازنشانی می کند و موارد لیست را از بلوک به حروف کوچک بازتعریف می کند:

    #navbar (حاشیه: 0؛ padding: 0؛ لیست-سبک نوع: هیچ؛) #navbar li (نمایش: درون خطی؛) آن را امتحان کنید "

    اکنون تنها کاری که باید انجام دهیم این است که یک ظاهر طراحی را برای منوی افقی خود تعریف کنیم:

    #navbar (حاشیه: 0؛ بالشتک: 0؛ نوع فهرست: هیچ‌کدام؛ حاشیه: 2 پیکسل جامد # 0066FF؛ شعاع حاشیه: 20 پیکسل 5 پیکسل؛ عرض: 550 پیکسل؛ تراز کردن متن: مرکز؛ رنگ پس‌زمینه: # 33ADFF. ) #navbar a (رنگ: #fff؛ بالشتک: 5px 10px؛ متن-تزیین: هیچکدام؛ وزن قلم: پررنگ؛ نمایش: inline-block؛ عرض: 100px؛) #navbar a: شناور (شعاع حاشیه: 20px 5px) ؛ رنگ پس زمینه: # 0066FF;) آن را امتحان کنید "

    فهرست کشویی

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

    ابتدا باید ساختار HTML را برای منوی خود ایجاد کنیم. ما پیوندهای پیمایش اصلی را در یک لیست گلوله ای قرار می دهیم:

    موارد فرعی را با قرار دادن آن در عنصر در یک لیست جداگانه قرار می دهیم

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

    تلاش كردن "

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

  • لیست دوباره به یک عنصر بلوک تبدیل شده است:

    #navbar ul (نمایش: هیچ؛) #navbar li: شناور ul (نمایش: بلوک؛)

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

    #navbar، #navbar ul (حاشیه: 0؛ padding: 0؛ list-style-type: none;) #navbar li (float: left;) #navbar ul li (float: none;)

    در مرحله بعد، باید مطمئن شویم که زیرمنوی کشویی ما محتوای زیر نوار پیمایش را به سمت پایین منتقل نمی کند. برای انجام این کار، موقعیت آیتم های لیست را می دهیم: relative; و لیستی حاوی موقعیت های فرعی: absolute; و یک ویژگی بالا با مقدار 100% اضافه کنید تا یک منوی فرعی کاملاً با موقعیت دقیقاً در زیر پیوند ظاهر شود.

    #navbar ul (نمایش: هیچ؛ موقعیت: مطلق؛ بالا: 100%؛) #navbar li (شناور: چپ؛ موقعیت: نسبی؛) #navbar (ارتفاع: 30 پیکسل؛) آن را امتحان کنید "

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

    اکنون باید به لیست های خود استایل دهیم و منوی کشویی آماده خواهد بود:

    #navbar ul (نمایش: هیچ؛ پس‌زمینه رنگ: # f90؛ موقعیت: مطلق؛ بالا: 100٪؛) #navbar li: شناور ul (نمایش: بلوک؛) #navbar، #navbar ul (حاشیه: 0؛ padding: نوع فهرست ارتفاع: 100%؛) #navbar li a (نمایش: بلوک؛ بالشتک: 6 پیکسل؛ عرض: 100 پیکسل؛ رنگ: #fff؛ متن-تزیین: هیچ؛ تراز متن: مرکز؛) #navbar ul li (شناور: هیچ; ) #navbar li: شناور (رنگ پس‌زمینه: # f90;) #navbar ul li: شناور (رنگ پس‌زمینه: # 666;)

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

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

    بیایید طرح منوی افقی خود را شروع کنیم!

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

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

    پس در این مرحله چه داریم؟ ما یک صفحه html با نشانه گذاری استاندارد داریم:

    منوی افقی

    و ما یک شیوه نامه متصل به این صفحه داریم (مال من style.css است)، با محتوای زیر:

    مرحله بعدی ایجاد نشانه گذاری html برای منو است.

    نحوه ایجاد نشانه گذاری برای منو

    در نشانه گذاری خود از یک تگ جدید استفاده خواهیم کرد

    • مقالات مرتبط برتر

    بهترین برنامه ها برای ایجاد موسیقی پایه و الکترونیک
    بهترین برنامه ها برای ایجاد موسیقی پایه و الکترونیک
    ساختار کلی فایل های موضوعی
    ساختار کلی فایل های موضوعی
    اصول اولیه استفاده از رنگ در طراحی وب
    اصول اولیه استفاده از رنگ در طراحی وب
    دسته بندی ها:
    © 2021 bumotors.ru. نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی پرتال اطلاعاتی