albashmoparmeg.com

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

الكورس
Advertisements

Create nice navbar with HTML & CSS3

فى هذا التمرين البسيط هتتعلم انشاء Navbar باستخدام HTML & CSS وهنستخدم CSS3 لاضافة Transition للينكات ، واضافة اللمسة التجميلية للNavbar.

 

أولا: ملف index.html لاضافة البنية الخاصة بالNavbar كالتالى:-

 

File: index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="style.css">
		<title>Create Navbar with HTML & CSS3</title>
	</head>
	<body>
	  <nav>
			<ul>
			  <li class="hover-border-up">
	         <a href="#">Home</a>
				</li>
				<li class="hover-border-up">
	         <a href="#">Blog</a>
				</li>
				<li class="hover-border-up">
	         <a href="#">Contact Us</a>
				</li>
				<li class="hover-border-up">
	         <a href="#">Privacy</a>
				</li>
			</ul>
		</nav>
  </body>
</html>

 

ثانيا: اضافة التنسيقات style الأساسية للNavbar:-

nav {
  background-color:#eee;
  text-align: center;
  width: 100%;
}

nav ul {
   background-color:#eee;
}

nav ul li {
  list-style: none;
  width: 100px;
  height: 54px;
  line-height: 3;
  text-align: center;
  color: #000;
  font-family: Arial, Tahoma;
  position: relative;
  display: inline-block;
}

nav ul li a {
  text-decoration: none;
  color: #000;
  font-size: 18px;
}

nav ul li a:hover {
  text-decoration: none;
  color: #171515
}

 

ثالثا: اضافة اللمسة الأخيره للNavbar باستخدام كلا من ( transition – after – opacity ):-

nav ul li.hover-border-up::after {
  content:"";
  height:5px;
  width:100%;
  background-color:#000;
  position: absolute;
  bottom:-7px;
  left:0;
  opacity: 0;
  transition: opacity 300ms ease, bottom 600ms ease;
}

nav ul li.hover-border-up:hover::after {
  opacity:1;
  bottom:0;
}

 

ملف style.css كامل:-

 

File: style.css

* {
  margin: 0;
  padding: 0;
}

nav {
  background-color:#eee;
  text-align: center;
  width: 100%;
}

nav ul {
   background-color:#eee;
}

nav ul li {
  list-style: none;
  width: 100px;
  height: 54px;
  line-height: 3;
  text-align: center;
  color: #000;
  font-family: Arial, Tahoma;
  position: relative;
  display: inline-block;
}

nav ul li a {
  text-decoration: none;
  color: #000;
  font-size: 18px;
}

nav ul li a:hover {
  text-decoration: none;
  color: #171515
}

nav ul li.hover-border-up::after {
  content:"";
  height:5px;
  width:100%;
  background-color:#000;
  position: absolute;
  bottom:-7px;
  left:0;
  opacity: 0;
  transition: opacity 300ms ease, bottom 600ms ease;
}

nav ul li.hover-border-up:hover::after {
  opacity:1;
  bottom:0;
}

 

الأكواد كاملة على codepen.

 

Quote This Train:-

“Coding like poetry should be short and concise.”
― Santosh Kalwar

 

لا تنسى متابعتنا على مواقع التواصل الاجتماعى ، لدعمنا ومعرفة كل جديد.

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

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

×

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

info@albashmoparmeg.com

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

Advertisements