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

ساخت منو ثابت در بالا صفحه

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

خانه
اخبار
تماس با ما



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

محتوا متنی محتوا متنی محتوا متنی محتوا متنی..
محتوا متنی محتوا متنی محتوا متنی محتوا متنی..
محتوا متنی محتوا متنی محتوا متنی محتوا متنی..
محتوا متنی محتوا متنی محتوا متنی محتوا متنی..
محتوا متنی محتوا متنی محتوا متنی محتوا متنی..
محتوا متنی محتوا متنی محتوا متنی محتوا متنی..
محتوا متنی محتوا متنی محتوا متنی محتوا متنی..
محتوا متنی محتوا متنی محتوا متنی محتوا متنی..
محتوا متنی محتوا متنی محتوا متنی محتوا متنی..
محتوا متنی محتوا متنی محتوا متنی محتوا متنی..
محتوا متنی محتوا متنی محتوا متنی محتوا متنی..
محتوا متنی محتوا متنی محتوا متنی محتوا متنی..
محتوا متنی محتوا متنی محتوا متنی محتوا متنی..
محتوا متنی محتوا متنی محتوا متنی محتوا متنی..
محتوا متنی محتوا متنی محتوا متنی محتوا متنی..
محتوا متنی محتوا متنی محتوا متنی محتوا متنی..
محتوا متنی محتوا متنی محتوا متنی محتوا متنی..
محتوا متنی محتوا متنی محتوا متنی محتوا متنی..
محتوا متنی محتوا متنی محتوا متنی محتوا متنی..
محتوا متنی محتوا متنی محتوا متنی محتوا متنی..

قدم دوم :   برای ثابت کردن منو در بالا صفحه از کد CSS زیر استفاده می کنیم.
برای ایجاد یک منو ثابت در بالا صفحه، از position:fixed و top:0 استفاده کنید. توجه داشته باشید که منو ثابت سایر محتویات را پوشش می دهد. برای ایجاد آن، مقداری به margin-top مربوط به content اختصاص دهید که برابر یا بزرگتر از ارتفاع منوی شما می باشد.

body {

margin:0;

direction: rtl;

}

.navbar {

  overflow: hidden;

  background-color: #333;

  position: fixed;

  top: 0;

  width: 100%;

}

.navbar a {

  float: right;

  display: block;

  color: #f2f2f2;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  font-size: 17px;

}

.navbar a:hover {

  background: #ddd;

  color: black;

}

.main {

  padding: 16px;

  margin-top: 30px;

  height: 1500px; /* Used in this example to enable scrolling */

}

ثابت کردن منو در پایین صفحه

برای ایجاد یک منو ثابت در پایین صفحه از position: fixed و bottom: 0 استفاده کنید.

.navbar {

  position: fixed;

  bottom: 0;

  width: 100%;

}

.main {

  margin-bottom: 30px;

}