کانال بله, جهت پشتیبانی و اطلاع رسانی کانال بله, جهت پشتیبانی و اطلاع رسانی
عضویت

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

در این مقاله می آموزید که چطور با استفاده از کد CSS، یک منو با قابلیت اسکرول کردن ایجاد کنید.



ساخت یک منو افقی با قابلیت اسکرول کردن


قدم اول : کد HTML را اضافه کنید.



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

اندازه پنجره مرورگر را تغییر دهید تا تاثیر آن را ببینید


قدم دوم :   کد CSS را اضافه کنید. نکته این مقاله، ایجاد یک نوار با قابلیت اسکرول کردن با استفاده از overflow: auto و white-space: nowrap است.
مثال :

مثال ساخت منو با قابلیت اسکرول :

body {
direction: rtl;
}
div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}

امتحان کنید

منو افقی با حالت تمام صفحه در وب سایت
1404/02/02 5649 524
رمز عبور : tahlildadeh.com یا www.tahlildadeh.com
نظرات شما

نظرات خود را ثبت کنید...