در این مقاله می آموزید که چطور یک منو navigation دکمه ای را با استفاده از کد CSS ایجاد کنید.
ساخت یک منو navigation در پایین صفحه
قدم اول : کد HTML را اضافه کنید.
لینکی که در آن class =”icon” وجود دارد برای باز و بسته کردن navbar در صفحات کوچک بکار می رود.
قدم دوم : کد CSS را اضافه کنید.
مثال ساخت نوار منو در پایین صفحه :
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 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: #f1f1f1;
color: black;
}.navbar a.active {
background-color: #4CAF50;
color: white;
}.main {
padding: 16px;
margin-bottom: 30px;
direction: rtl;
}
توجه : برای ساخت نوارهای پیمایشی ریسپانسیو و سازگار با صفحات موبایل، به مقاله ساخت نوار پیمایشی واکنش گرا در وب سایت مراجعه کنید.