albashmoparmeg.com

اتعلم البرمجة صح وبسهولة وباللغة العربية مع موقع الباشمبرمج

الكورس
Advertisements

Create Top Nice Navbar

– تعلم انشاء Navbar باستخدام HTML & CSS بسهولة من خلال الخطوات البسيطة التاليه:-

 

1- انشاء ملف index.html لكتابة البنية والأكواد الخاصة بالNavbar:-

 

File: index.html 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="style.css">
		<title>Create Top Navbar with links ( HTML & CSS3 )</title>
	</head>
	<body>

	  <nav class="top-navbar-links">
		  <ul>
		    <li>
					<a href="#">Home</a>
				</li>
		    <li>
					<a href="#">Blog</a>
				</li>
		    <li>
					<a href="#">About Us</a>
				</li>
		    <li>
					<a href="#">Contact Us</a>
				</li>
		  </ul>
		</nav>

	</body>
</html>

 

2- البدأ بتنسيق والتصميم الأساسى للNavbar:-

* { /* Make All Elements Zero (margin & padding) */
  margin:0;
  padding:0;
}


.top-navbar-links { /* Navbar parent Style */
  width: 100%;
  height: 53px;
  text-align: center;
  background-color: #eba012;
}

.top-navbar-links ul {
  position: relative;
  list-style: none;
  text-align: center;
}

.top-navbar-links ul li {
  line-height: 3.5;
  width: 94px;
  display: inline-block;
  text-align: center;
}

.top-navbar-links ul li a {
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}

 

3- اضافة Transition وبعض اللمسات لتحريك border عند عمل Hover على Links:-

.top-navbar-links ul li:nth-child(4):after { /* li 4 style */
  content:"";
  width: 94px;
  height: 3px;
  position: absolute;
  background-color: #af770c;
  top: 50px;
  left: 574px;
  transition: .4s;
}

.top-navbar-links ul li:nth-child(2):hover ~ li:nth-child(4):after { transform:translateX(94px); }
.top-navbar-links ul li:nth-child(3):hover ~ li:nth-child(4):after { transform:translateX(195px); }
.top-navbar-links ul li:nth-child(4):hover:after { transform:translateX(290px); }

 

Done : تم انشاء Navbar بنجاح ، يمكنك التغيير فى الأكواد والتنسيق حسب فكرتك والمظهر الخارجى اللى أنت تريده.

 

كود CSS كامل :- 

* { /* Make All Elements Zero (margin & padding) */
  margin:0;
  padding:0;
}


.top-navbar-links { /* Navbar parent Style */
  width: 100%;
  height: 53px;
  text-align: center;
  background-color: #eba012;
}

.top-navbar-links ul {
  position: relative;
  list-style: none;
  text-align: center;
}

.top-navbar-links ul li {
  line-height: 3.5;
  width: 94px;
  display: inline-block;
  text-align: center;
}

.top-navbar-links ul li a {
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}


.top-navbar-links ul li:nth-child(4):after { /* li 4 style */
  content:"";
  width: 94px;
  height: 3px;
  position: absolute;
  background-color: #af770c;
  top: 50px;
  left: 574px;
  transition: .4s;
}

.top-navbar-links ul li:nth-child(2):hover ~ li:nth-child(4):after { transform:translateX(94px); }
.top-navbar-links ul li:nth-child(3):hover ~ li:nth-child(4):after { transform:translateX(195px); }
.top-navbar-links ul li:nth-child(4):hover:after { transform:translateX(290px); }

 

الكود كامل على Codepen . 

 

Quote This Train:-

“Coding is Love & Coding is Life”
― Biswabijaya Samal

 

لا تنسي متابعتنا على مواقع التواصل الاجتماعى.

الإبلاغ عن خطأ

الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements