#C کلید ورود به بازار کار

دوره پروژه‌محور #C و ASP.NET Core

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

در این مقاله می آموزید که چطور با استفاده از کد 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;
}

امتحان کنید

منو افقی با حالت تمام صفحه در وب سایت
مقاله قبلی
آموزش ساخت ساید بار با آیکون های مختلف در طراحی سایت
مقاله بعدی
آموزش ساخت منو عمودی در طراحی وب سایت
نظرات شما

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