آموزش ساخت منو راست چین و چپ چین بوسیله CSS

در این پروژه می آموزیم که چطور navigation barهایی با لینک های راست چین و چپ چین ایجاد کنیم.

ساخت منویی با لینک های راست چین

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

<div class="topnav">
<a class="active" href="#home">خانه</a>
<a href="#news">اخبار</a>
<a href="#contact">تماس با ما</a>
<div class="topnav-right">
<a href="#search">جستجو</a>
<a href="#about">درباره ما</a>
</div>
</div>
 
<div class="Content">
<h2>منو بالا صفحه با لینک های راست چین</h2>
<p>محتوا خود را قرار دهید ...</p>
</div>
<button></button>

قدم دوم : با نوشتن دستورات CSS زیر منو راست چین و یا چپ چین خود را بسازید.

مثال ساخت منو با لینک های راست چین :

<p>body {<br>
  margin: 0;<br>
  font-family: Arial, Helvetica, sans-serif;<br>
  direction: rtl;<br>
}</p>
 
<p>.topnav {<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-right {<br>
  float: left;<br>
}<br>
.Content {<br>
padding-right:16px;<br>
}</p>
<button></button>

امتحان کنید

توجه : یبرای ساخت navigation bar هایی که با صفحات موبایل نیز سازگار باشند، پروژه ایجاد منو ریسپانسیو در طراحی وب سایت را مطالعه کنید.

1404/02/02 4719 602

دانلود PDF

دانلود سورس کد

رمز عبور : tahlildadeh.com یا www.tahlildadeh.com

سوالات و نظرات

نظرات شما