مشخصات مقاله
ساخت نوار پیمایشی واکنش گرا در وب سایت
در این مقاله می آموزید که چطور با استفاده از دستورات CSS و جاوا اسکریپت، یک نوار (منو) پیمایشی (Navigation Bar) واکنش گرا (ریسپانسیو) ایجاد کنید.
ساخت یک منو navigation واکنش گرا در پایین صفحه
قدم اول : کد HTML را اضافه کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 | < div class = "navbar" id = "myNavbar" > < a href = "#home" class = "active" >خانه</ a > < a href = "#news" >اخبار</ a > < a href = "#contact" >تماس با ما</ a > < a href = "#about" >درباره ما</ a > < a href = "javascript:void(0);" style = "font-size:15px;" class = "icon" onclick = "myFunction()" >☰</ a > </ div > < div style = "padding-right:16px; direction: rtl" > < h2 >مثالی از نوار Navigation ریسپانسیو در پایین صفحه</ h2 > < p >اندازه مرورگر را تغییر دهید تا تاثیر آن را ببینید</ p > </ div > < button ></ button > |
لینکی که در آن class =”icon” وجود دارد برای باز و بسته کردن navbar در صفحات کوچک بکار می رود.
قدم دوم : کد CSS را اضافه کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 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-color : #ddd ; color : black ; } .navbar a.active { background-color : #4CAF50 ; color : white ; } .navbar . icon { display : none ; } <button></button> |
دستورات media را اضافه کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | @media screen and ( max-width : 600px ) { .navbar a:not(:first-child) { display : none ;} .navbar a. icon { float : left ; display : block ; } } @media screen and ( max-width : 600px ) { .navbar.responsive . icon { position : absolute ; right : 0 ; bottom : 0 ; } .navbar.responsive a { float : none ; display : block ; text-align : right ; } } <button></button> |
قدم سوم : و در پایان کد جاوا اسکریپت را اضافه کنید.
مثال :
مثال نوار منو ریسپانسیو در پایین صفحه :
1 2 3 4 5 6 7 8 9 | <p>function myFunction() {<br> var x = document.getElementById( "myNavbar" );<br> if (x.className === "navbar" ) {<br> x.className += " responsive" ;<br> } else {<br> x.className = "navbar" ;<br> }<br> }</p> <button></button> |

1404/02/02
2254
694
رمز عبور : tahlildadeh.com یا www.tahlildadeh.com