آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش ساخت منو با لینک های وسط چین با HTML , CSS

آموزش طراحی سایت حرفه ای

آموزش ساخت منو با لینک های وسط چین با HTML , CSS


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



ساخت Navigation Bar در بالا صفحه


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




نوار منو ریسپانسیو بهمراه لینک های مرکزی و راست چین در بالا صفحه

اندازه پنجره مرورگر را تغییر دهید تا تاثیر قابلیت ریسپانسیو را ببینید



قدم دوم :   برای ساخت نوا منو ریسپانسیو همراه با لینک های مرکزی و راست چین در بالا صفحه از دستورات CSS زیر استفاده کنید.

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

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  direction: rtl;
}

.topnav {
  position: relative;
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: right;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-centered a {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.topnav-right {
  float: left;
}

/* Responsive navigation menu (for mobile devices) */
@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
  }
  
  .topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
  }
}

امتحان کنید

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

  • 18
  •    2
  • تاریخ ارسال :   1400/01/18

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .