مشخصات مقاله
آموزش ساخت منو با لینک های وسط چین با HTML , CSS
در این مقاله می آموزیم که چطور یک navigation bar که دارای یک لینک یا لوگوی مرکزی است ایجاد کنیم.
ساخت Navigation Bar در بالا صفحه
قدم اول : کد HTML را اضافه کنید.
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 | <!-- Top navigation --> < div class = "topnav" > <!-- Centered link --> < div class = "topnav-centered" > < a href = "#home" class = "active" >خانه</ a > </ div > <!-- Left-aligned links (default) --> < a href = "#news" >اخبار</ a > < a href = "#contact" >تماس با ما</ a > <!-- Right-aligned links --> < div class = "topnav-right" > < a href = "#search" >جستجو</ a > < a href = "#about" >درباره ما</ a > </ div > </ div > < div style = "padding-right:16px" > < h2 >نوار منو ریسپانسیو بهمراه لینک های مرکزی و راست چین در بالا صفحه</ h2 > < p >اندازه پنجره مرورگر را تغییر دهید تا تاثیر قابلیت ریسپانسیو را ببینید</ p > </ div > < button ></ button > |
قدم دوم : برای ساخت نوا منو ریسپانسیو همراه با لینک های مرکزی و راست چین در بالا صفحه از دستورات 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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <p>body {<br> margin: 0;<br> font-family: Arial, Helvetica, sans-serif;<br> direction: rtl;<br> }</p> <p>.topnav {<br> position: relative;<br> overflow: hidden;<br> background-color: #333;<br> }</p> <p>.topnav a {<br> float : right;<br> color: #f2f2f2;<br> text-align: center;<br> padding: 14px 16px;<br> text-decoration: none;<br> font-size: 17px;<br> }</p> <p>.topnav a:hover {<br> background-color: #ddd;<br> color: black;<br> }</p> <p>.topnav a.active {<br> background-color: #4CAF50;<br> color: white;<br> }</p> <p>.topnav-centered a {<br> float : none;<br> position: absolute;<br> top: 50%;<br> left: 50%;<br> transform: translate(-50%, -50%);<br> }</p> <p>.topnav-right {<br> float : left;<br> }</p> <p> /* Responsive navigation menu (for mobile devices) */ <br> @media screen and (max-width: 600px) {<br> .topnav a, .topnav-right {<br> float : none;<br> display: block;<br> }<br> <br> .topnav-centered a {<br> position: relative;<br> top: 0;<br> left: 0;<br> transform: none;<br> }<br> }</p> <button></button> |
توجه : یبرای ساخت navigation bar هایی که با صفحات موبایل نیز سازگار باشند، پروژه ایجاد منو ریسپانسیو در طراحی وب سایت را مطالعه کنید.
1404/02/02
2535
522
رمز عبور : tahlildadeh.com یا www.tahlildadeh.com