دوره‌ای که می‌تونه مسیر شغلیت رو عوض کنه! دوره‌ای که می‌تونه مسیر شغلیت رو عوض کنه!
🎯 ثبت نام

آموزش ساخت منو با لینک های وسط چین با 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
نظرات شما

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