ایجاد یک نوار ناوبری نوارهای ناوبری با CSS نحوه ایجاد ناوبری html

داشتن یک سیستم ناوبری آسان برای هر وب سایت بسیار مهم است.

با CSS، می توانید منوهای خسته کننده HTML را به نوارهای ناوبری با ظاهری عالی تبدیل کنید.

نوارهای پیمایش = فهرست پیوندها

نوار پیمایش از HTML استاندارد به عنوان پایه استفاده می کند.

در مثال‌هایمان، یک نوار ناوبری از یک لیست HTML معمولی می‌سازیم.

نوار ناوبری اساساً لیستی از پیوندها است، بنابراین از عناصر استفاده می شود

و
• کاملا منطقی:

  مثال اظهار نظر:همیشه یک عرض برای عناصر مشخص کنید در نوار پیمایش عمودی اگر عرض را حذف کنید، IE6 ممکن است نتایج غیرمنتظره ای را نشان دهد. نوار ناوبری افقی دو راه برای ایجاد یک نوار پیمایش افقی وجود دارد. استفاده تعبیه شده استیا شناورلیست موارد هر دو روش عالی کار می کنند، اما اگر می خواهید همه لینک ها یک اندازه باشند، باید از روش float استفاده کنید. ساخته شده در فهرست موارد یکی از راه‌های ایجاد یک نوار ناوبری افقی، ساختن عناصر است درون خطی، علاوه بر کد "استاندارد" بالا: توضیح مثال: نمایش: درون خطی; - موارد پیش فرض بلوک هستند. در اینجا ما شکست های خط قبل و بعد از هر آیتم لیست را حذف می کنیم تا آنها را در همان خط نشان دهیم. موارد فهرست شناور مثال لی { شناور به سمت چپ؛ } آ { display:block; عرض: 80 پیکسل background-color:#dddddd; }

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

  راه های زیادی برای ایجاد ناوبری سایت واکنش گرا وجود دارد و چندین پلاگین jQuery حتی قادر به انجام آنی هستند.

  

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

  بنابراین، بیایید شروع کنیم.

  HTML

  سبک ها

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

  بدنه (رنگ پس زمینه: #ece8e5 ؛ )

  تگ ناوبری که ناوبری را تعریف می کند، 100٪ عرض کامل در پنجره مرورگر خواهد داشت، در حالی که ul که حاوی پیوندهای منوی اصلی ما است، 600 پیکسل عرض خواهد داشت.

  Nav ( ارتفاع : 40 پیکسل ؛ عرض : 100 % ; زمینه : # 455868 ; اندازه فونت: 11pt font-family : "PT Sans" , Arial, sans-serif ; font-weight : bold ; موقعیت : نسبی ; حاشیه-پایین: 2px جامد # 283744 ; ) nav ul ( بالشتک : 0 ؛ حاشیه : 0 خودکار ؛ عرض : 600 پیکسل ؛ ارتفاع : 40 پیکسل ؛ )

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

  Nav li (نمایشگر: درون خطی؛ شناور: چپ؛)

  اگر از نشانه‌گذاری html بالا متوجه شدید، ما قبلاً یک clearfix به ویژگی کلاس برای nav و ul اضافه کرده‌ایم تا زمانی که عناصر را در داخل آن با استفاده از هک CSS clearfix شناور می‌کنیم، فضا را پاک کنیم. بنابراین بیایید قوانین سبک زیر را به شیوه نامه اضافه کنیم.

  Clearfix :before , .clearfix :after ( content : " " ; display : table; ) .clearfix :after (clearfix : her ; ) .clearfix ( *zoom: 1 ; )

  از آنجایی که ما شش لینک منو داریم و همچنین عرض 600 پیکسل به ظرف داده ایم، هر پیوند منو 100 پیکسل خواهد بود.

  Nav a (رنگ: #fff؛ نمایشگر: بلوک درون خطی؛ عرض: 100 پیکسل؛ تراز متن: مرکز؛ تزئین متن: هیچ؛ ارتفاع خط: 40 پیکسل؛ متن سایه: 1 پیکسل 1 پیکسل 0 پیکسل # 283744 ; }

  پیوندهای منو با یک حاشیه سمت راست 1 پیکسل به جز آخرین مورد از هم جدا می شوند. با در نظر گرفتن مدل جعبه از آخرین آموزش، عرض لینک منو به دلیل اضافه شدن حاشیه 1 پیکسل افزایش می یابد و آن را 101 پیکسل می کند، بنابراین در اینجا مدل اندازه جعبه را به حاشیه-box تغییر می دهیم تا حفظ شود. عرض لینک منو در 100 پیکسل.

  Nav li a ( حاشیه سمت راست: 1px جامد # 576979 ; box-sizing:border-box ; -moz-box-sizing:border-box ; -webkit-box-sizing:border-box ; ) nav li:last-child a ( حاشیه سمت راست : 0 ; )

  Nav a:hover , nav a:active ( پس زمینه رنگ: #8c99a4 ; )

  Nav a#pull (نمایش: هیچ ؛ )

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

  

  داستان های رسانه

  نمایش منو

  در این مرحله، منو همچنان مخفی خواهد بود و تنها در صورت نیاز، پس از ضربه زدن یا کلیک کردن بر روی لینک Menu، قابل مشاهده خواهد بود و ما می‌توانیم با استفاده از slideToggle () jQuery به این افکت دست پیدا کنیم.

  $(function() ( var pull = $("#pull") ; menu = $("nav ul") ; menuHeight = menu.height () ; $(pull) .on ("کلیک کنید"، تابع(e) ( e.preventDefault () ; menu.slideToggle () ;) ) ;)) ;

  با این حال، هنگامی که بلافاصله پس از نمایش و پنهان کردن منو، اندازه پنجره را در یک صفحه کوچک تغییر می‌دهید، منو پنهان می‌شود، زیرا نمایشگر: none style ایجاد شده توسط jQuery هنوز روی عنصر اعمال می‌شود.

  بنابراین هنگام تغییر اندازه پنجره به این صورت باید این سبک را حذف کنیم:

  $(window) .resize (function() ( var w = $(window) .width () ; if(w > 320 && menu.is (":hidden") ) (menu.removeAttr ("style") ; ) )) ؛

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

  پاداش: راه جایگزین

  همانطور که قبلا در آموزش ذکر شد، راه های دیگری برای انجام این کار وجود دارد، و با استفاده از جاوا اسکریپتکتابخانه های SelectNav.js یکی از ساده ترین راه ها هستند. این جاوا اسکریپت خالص، که به کتابخانه های شخص ثالث دیگر مانند jQuery وابسته نیست.

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

  

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

  از استاندارد استفاده خواهد کرد رابط کاربریخود دستگاه

  ترجمه - میز تحریر

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

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

  نحوه ایجاد یک منوی افقی: نمونه های نشانه گذاری و طراحی

  نشانه گذاری HTML و سبک های اساسی برای منوی افقی

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

  نشانه گذاری HTML برای ناوبری افقی

  • آیتم منو
  • آیتم منو
  • آیتم منو
  ...

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

  و/یا
  ...
  . به لطف این نشانه گذاری html، معنای معنایی داده می شود و همچنین ظاهر می شود فرصت اضافیبرای قالب بندی بلوک منو

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

  Ul (لیست به سبک: هیچکدام؛ /*حذف نشانگرهای لیست*/ حاشیه: 0؛ /*حذف حاشیه بالا و پایین 1em*/ padding-left: 0؛ /*حذف بالشتک سمت چپ 40px*/) (تزیین متن: هیچکدام؛ /*زیر متن پیوند را بردارید*/)

  روش 1. li (نمایش: درون خطی؛)

  موارد فهرست را به صورت درون خطی قرار دهید. در نتیجه، آنها به صورت افقی مرتب می شوند، در سمت راست، یک شکاف برابر با 0.4em بین آنها اضافه می شود (محاسبه شده نسبت به اندازه فونت). برای حذف آن، یک حاشیه سمت راست منفی به li li اضافه کنید (حاشیه-راست: -4px؛) . در مرحله بعد، لینک ها را به دلخواه استایل کنید.

  روش 2. li (شناور: چپ؛)

  عناصر لیست را شناور می کنیم. در نتیجه آنها به صورت افقی مرتب می شوند. ارتفاع بلوک ظرف ul صفر می شود. برای حل این مشکل، (سرریز: hidden;) را به ul اضافه می کنیم، آن را گسترش می دهیم و بنابراین اجازه می دهیم عناصر شناور را در خود جای دهد. برای پیوندها، یک (نمایش: بلوک؛) اضافه کنید و به دلخواه آنها را استایل دهید.

  روش 3. li (نمایش: بلوک درون خطی؛)

  ساخت اقلام لیست به صورت درون خطی. آنها به صورت افقی مرتب شده اند، مانند مورد اول، یک شکاف در سمت راست تشکیل می شود. برای پیوندها، یک (نمایش: بلوک؛) اضافه کنید و به دلخواه آنها را استایل دهید.

  روش 4. ul (نمایش: flex؛)

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

  1. منوی پاسخگو با جلوه زیر خط هنگام قرار دادن ماوس روی یک پیوند

  • کار کردن
  • در باره
  • وبلاگ
  • مخاطب
  آدرس اینترنتی import@("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main (سبک لیست: هیچکدام؛ حاشیه: 40px 0 5px؛ بالشتک: 25px 0 5px؛ تراز متن: مرکز؛ پس‌زمینه: سفید؛ ) .menu-main li (نمایش: inline-block;) .menu- main li:after ( محتوا: "|"؛ رنگ: #606060؛ نمایشگر: inline-block; vertical-align: top; ) .menu-main li:last-child:after (محتوا: هیچ؛) .menu-main a ( متن-تزیین: هیچ، فونت-خانواده: "Ubuntu Condensed"، sans-serif؛ فاصله حروف: 2px؛ موقعیت: نسبی؛ بالشتک پایین: 20px؛ حاشیه: 0 34px 0 30px؛ اندازه قلم: 17px. تبدیل متن: بزرگ؛ نمایشگر: بلوک درون خطی؛ انتقال: رنگ 0.2s؛ ) .menu-main a, .menu-main a:visited (رنگ: #9d999d;) .menu-main a.current, .menu- main a:hover(color: #feb386;) .menu-main a:before, .menu-main a:after ( محتوا: ""؛ موقعیت: مطلق؛ ارتفاع: 4px؛ بالا: خودکار؛ سمت راست: 50%؛ پایین : -5 پیکسل؛ سمت چپ: 50%؛ پس‌زمینه: #feb386؛ انتقال: 0.8 ثانیه؛ ) .menu-main a:hover:before, .menu-main .current:before (سمت چپ: 0;) .menu-main a: hover:after, .menu-main .current:after (راست: 0;) @media (حداکثر عرض: 550 پیکسل) ( .menu-main (padding-top: 0;) .menu-main li (نمایش: block; ) .menu-main li:after (محتوا: هیچ؛) .menu-main a ( padding: 25px 0 20px; حاشیه: 030 پیکسل؛ ))

  2. منوی واکنش گرا برای وب سایت عروسی

  url @import ("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( موقعیت: نسبی؛ پس‌زمینه: #fff؛ box-shadow: inset 0 0 10px #cccc؛ ) .top-menu:before, .top-menu:after ( محتوا: ""؛ نمایش: بلوک؛ ارتفاع : 1px؛ حاشیه بالا: 3px جامد #575350؛ حاشیه-پایین: 1px جامد #575350؛ حاشیه-پایین: 2px؛ ).بالا-menu:after ( حاشیه-پایین: 3px جامد #575350؛ حاشیه-بالا: 1px جامد #575350؛ box-shadow: 0 2px 7px #cccc؛ margin-top: 2px; ) .menu-main (لیست سبک: هیچکدام؛ بالشتک: 0 30px؛ حاشیه: 0؛ اندازه قلم: 18px؛ متن-تراز: مرکز؛ موقعیت: نسبی؛ ) .menu-main:before, .menu-main:after ( محتوا: "\25C8"؛ ارتفاع خط: 1؛ موقعیت: مطلق؛ بالا: 50%؛ تبدیل: translateY(-50% ) .menu-main:before (سمت چپ: 15px;) .menu-main:after (راست: 15px;) .menu-main li (نمایش: inline-block; padding: 5px 0; ) .menu-main a (تزیین متن: هیچکدام؛ نمایشگر: بلوک درون خطی؛ حاشیه: 2 پیکسل 5 پیکسل؛ بالشتک: 6 پیکسل 15 پیکسل؛ خانواده فونت: "PT Sans"، sans-serif؛ اندازه قلم: 16 پیکسل؛ رنگ: #777777؛ حاشیه پایین : 1px جامد شفاف؛ انتقال: 0.3s خطی. ) .menu-main .current، .menu-main a:hover (حاشیه-شعاع: 3px؛ پس زمینه: #f3ece1؛ رنگ: #313131؛ متن-سایه: 0 1px 0 #fff؛ حاشیه-رنگ: #c6c6c6؛ ) @media (حداکثر عرض: 500 پیکسل) (.menu-main li (نمایش: بلوک؛))

  3. منوی پاسخگو با گوش ماهی

  • کار کردن
  • در باره
  • وبلاگ
  • مخاطب
  آدرس اینترنتی import@("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main (سبک لیست: هیچکدام؛ بالشتک: 0 30 پیکسل؛ حاشیه: 0؛ اندازه قلم: 18 پیکسل؛ تراز متن: مرکز؛ موقعیت: نسبی؛ پس زمینه: سفید؛ .menu-main:after ( محتوا: ""؛ موقعیت: مطلق؛ عرض: 100%؛ ارتفاع: 20 پیکسل؛ سمت چپ: 0؛ پایین: -20 پیکسل؛ پس‌زمینه: گرادیان شعاعی (سفید 0٪، سفید 70٪، rgba (255،255،255،0) 70٪، rgba( 255,255,255,0) 100%) 0 -10px؛ اندازه پس‌زمینه: 20px 20px؛ پس‌زمینه-تکرار: تکرار-x؛ ) .menu-main li (نمایش: inline-block;) .menu-main a ( text-decoration: هیچکدام؛ صفحه نمایش: بلوک درون خطی؛ حاشیه: 0 15 پیکسل؛ پد: 10 پیکسل 30 پیکسل؛ خانواده فونت: "PT Sans Caption"، sans-serif؛ رنگ: #777777؛ انتقال: 0.3s خطی؛ موقعیت: نسبی؛ .menu -main a:before، .menu-main a:after ( محتوا: ""؛ موقعیت: مطلق؛ بالا: calc(50% - 3px)؛ عرض: 6px؛ ارتفاع: 6px؛ حاشیه-شعاع: 50%؛ پس زمینه: #F58262؛ کدورت: 0؛ انتقال: 0.5s ease-in-out؛ ) .menu-main a:before (سمت چپ: 5px؛) .menu-main a:after (راست: 5px؛) .menu-main a. جریان: قبل، .menu-main a.current:after، .menu-main a:hover:fore، .menu-main a:hover:after (تاری: 1;) .menu-main a.current، .menu- main a:hover (رنگ: #F58262;) @media(max-width:680px) (.menu-main li (نمایشگر: block;))

  4. منوی ریبون پاسخگو

  آدرس اینترنتی import@("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu ( حاشیه: 0 60 پیکسل؛ موقعیت: نسبی؛ پس‌زمینه: #5A394E؛ جعبه سایه: درج 1px 0 0 rgba(255,255,255,.1), ورودی -1px 0 0 rgba(255,255,255,150px), inset 0 150px -150px rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255,255,255,.12); ) ؛ z-index: 2؛ سمت چپ: 0؛ 0% x عرض: 10 منوی بالا:قبل (بالا: 0؛ حاشیه-پایین: 1px خط چین rgba(255,255,255,.2); ) .top-menu:after (پایین: 0؛ حاشیه بالا: 1px rgba خط چین (255,255,255,.2); .menu-main (لیست-سبک: هیچکدام؛ بالشتک: 0؛ حاشیه: 0؛ متن-تراز: مرکز؛) عرض: 50 پیکسل؛ ارتفاع: 0؛ بالا: 8 پیکسل؛ حاشیه بالا: 18 پیکسل جامد #5A394E؛ حاشیه پایین: 18 پیکسل جامد # 5A394E؛ تبدیل: چرخش (360 درجه؛ شاخص z: -1؛ ) .menu-main: قبل از ( چپ: -30 پیکسل؛ حاشیه-چپ: 12 پیکسل rgba جامد (255، 255، 255، 0؛ ) ، 0)؛ فهرست بدون شرح»، sans-serif؛ رنگ: سفید؛ انتقال: 0.3s خطی؛ .menu-main a.current، .menu-main a:hover (پس‌زمینه: rgba(0,0,0,.2);) @media (حداکثر عرض: 680 پیکسل) ( .top-menu (حاشیه: 0;) .menu-main li (نمایش: بلوک؛ حاشیه-راست: 0; ) .menu-main:before, .menu-main:after (محتوا: هیچ؛) .menu-main a (نمایش: بلوک؛) )

  5. منوی پاسخگو با لوگو در وسط

  آدرس @import ("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( موقعیت: نسبی؛ پس‌زمینه: rgba(34،34،34،.2؛) ( محتوا: ""؛ نمایش: جدول؛ واضح: هر دو؛ ) .چپ مورد (شناور: چپ؛) .راست آیتم (شناور: راست؛) .navbar-logo ( موقعیت: مطلق؛ چپ: 50%؛ بالا : 50%؛ تبدیل: translate(-50%,-50%)؛ .menu-main a (متن-تزیینات: هیچکدام؛ نمایشگر: بلوک؛ ارتفاع خط: 80 پیکسل؛ پد: 0 20 پیکسل؛ اندازه قلم: 18 پیکسل ؛ فاصله حروف: 2px؛ فونت-خانواده: "Arimo"، sans-serif، وزن فونت: پررنگ، رنگ: سفید، انتقال: 0.3s خطی؛ ) .menu-main a:hover (پس زمینه: rgba(0, 0,0,.3)؛) @media (حداکثر عرض: 830 پیکسل) ( .menu-main ( padding-top: 90px; text-align: center; ) ;بالا: 10 پیکسل؛ تبدیل: translateX(-50%)؛ .menu-main li ( شناور: هیچ؛ نمایشگر: inline-block; ) .menu-main a (ارتفاع خط: عادی؛ بالشتک: 20px 15px؛ فونت -size: 16px; ) ) @media (حداکثر عرض: 630px) (.menu-main li (نمایشگر: block;))

  6. منوی پاسخگو با آرم در سمت چپ

  آدرس @import ("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( پس زمینه: rgba(255,255,255,.5)؛ box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; ) .top-menu:after ( محتوا: "" ;نمایش: جدول؛ پاک: هر دو؛ .navbar-logo (نمایش: inline-block;) .menu-main (لیست-سبک: هیچکدام؛ حاشیه: 0؛ بالشتک: 0؛ شناور: سمت راست؛) .menu-main li (نمایش: بلوک درون خطی؛) .menu-main a (متن-تزیین: هیچکدام؛ نمایش: بلوک؛ موقعیت: نسبی؛ ارتفاع خط: 61 پیکسل؛ بالشتک سمت چپ: 20 پیکسل؛ اندازه قلم: 18 پیکسل؛ فاصله حروف : 2px؛ font-family: "Arimo"، sans-serif؛ وزن قلم: bold; color: #F73E24; transition:.3s linear; ) .menu-main a:before ( محتوا: ""؛ عرض: 9px; ارتفاع: 9 پیکسل؛ پس‌زمینه: #F73E24؛ موقعیت: مطلق؛ سمت چپ: 50 درصد؛ تبدیل: چرخش (45 درجه) translateX (6.5 پیکسل؛ کدورت: 0؛ انتقال: 0.3 ثانیه خطی؛ ) .menu-main a:hover:before (تاری: 1;) @media (حداکثر عرض: 660 پیکسل) ( .menu-main ( شناور: هیچکدام؛ padding-top: 20px; ) .top-menu (تراز متن: مرکز؛ padding: 20px 0 0 0; ) .menu-main a (padding: 0 10px;) .menu-main a:before (تبدیل: rotate(45deg) translateX(-6px);) ) @media (حداکثر عرض: 600px) (.menu-main li (نمایش: بلوک؛) )

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

  ایجاد ناوبری

  ناوبری چیست؟ این مجموعه ای از پیوندها است که اغلب بر اساس معنی مرتب و گروه بندی می شوند. یک منوی ناوبری اغلب با استفاده از تگ لیست HTML ایجاد می شود.

  ، جایی که در هر نقطه
  • حاوی یک لینک . HTML5 یک تگ جداگانه برای ناوبری معرفی کرد