إنشاء قائمة navbar باستخدام html + css

Mari Carmen · 30 أكتوبر 2020

كيف يمكني انا اعمل menu بنفس هذا الشكل

رضوان نسيم · 30 أكتوبر 2020

تفضل أخي هذه إجابتي على سؤالك.

في الصورة أرى أنه لا يجب إستعمال border

يمكن إستعمال outline بدلاً عن border

<!DOCTYPE html>
<html>
<head>
  <style>
ul {
  width: 90%;
  display: flex; 
  justify-content: space-between; 
  margin:auto;
  list-style-type: none;
}
li {
    outline:1px solid gray;
    list-style-position: inside;
flex-grow: 1;
  text-align:center;
}
li:hover {
  background-color:black;
  color:white
}
a {
  color: inherit !important ;
  text-decoration: none
}

  </style>
</head>
  
<body>

<ul>
  <li><a href="/about">About Us </a></li>
  <li><a href="/gallery">Gallery</a></li>
  <li><a href="/registration">Registration</a></li>
</ul>

</body>
</html>

بالتوفيق

Yomna Raouf · 30 أكتوبر 2020

أعتقد أن المقصود هنا هو navbar بسيط. يمكنك تنفيذه باستخدام الوسم nav مع الوسم a كما يلي:

<nav>
  <a href="#">About us</a> 
  <a href="#">Gallery</a> 
  <a href="#">Registration</a> 
</nav>

مع التنسيقات التالية:

nav {
  width: 85%; /* و نجعله في المنتصفnav نقوم بإعطاءه العرض الذي نريده و لكن أقل  من عرض الصفحة حتى نتمكن من تحريك ال*/
  display: flex; /* نستخدم هذه الخاصة حتى نجعل الوسم مرن و نتمكن من توزيع محتواه كما نريد*/
   /* و تقوم بتوزيع العناصر في داخل الوسم بحيث تكون المسافات بينها متساوية flex أحد خواص */
  justify-content: space-between; 
  /* في المنتصف nav هذه الخاصية تقوم بإضافة حواف تلقائية بحيث يظهر ال*/
  margin:auto;
}

يمكنك قراءة المزيد من هنا و هنا.

ياسين عناية · 30 أكتوبر 2020

الكود التالي مطابق تمامًا للمثال المطروح :

<!DOCTYPE html>
<html>
<head>
  <style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
}

li {
  float: left;
  border:1px solid #bbb;
  width : 30%;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 5px;
  text-decoration: none;
}
  </style>
</head>
  
<body>

<ul>
  <li><a  href="#about">About Us </a></li>
  <li><a href="#gallery">Gallery</a></li>
  <li><a href="#registration">Registration</a></li>
</ul>

</body>
</html>

ayoubridouani · 30 أكتوبر 2020

مرحبا أخي

على حسب سؤالك فأنت تريد جواب على ال 4 نقط الأولى في الصورة من السؤال 2:

ومنه بخصوص ملف Html:

<ul>
  <li><a href="about">About Us</a></li>
  <li><a href="gallery">Gallery</a></li>
  <li><a href="registration">Registration</a></li>
</ul>

وبخصوص ملف CSS:

/** Start Question 1 and 2**/
ul {
  list-style-type: none;
}

li {
  width : 33%;
  text-align: center;
  float: left;
  border:1px solid #000;
  box-sizing: border-box;
  padding: 5px;
  background-color:green;
}
li a{
  color: #000;
  text-decoration: none;
}
/** End Question 1 and 2 **/

/** Start Question 3 **/
li:hover{
  background-color:blue;
  cursor:pointer
}
/** End Question 3 **/

كما يمكنك من هنا فحص الكود مباشرة:

تحياتي.

Omar Haddad2 · 30 أكتوبر 2020

هذا الmenu يسمي شريط القوائم و هو بشكل عام قائمة من الروابط يمكن استخدام وسم <ul> و <li> لانشاء قائمة من الروابط للإنتقال بين الصفحات

التنفيذ في كود ال html

<ul>
  <li><a href="about">About Us</a></li>
  <li><a href="gallery">Gallery</a></li>
  <li><a href="registration">Registration</a></li>
</ul>

التنفيذ في كود الcss

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
    border:1px solid #000;

}

li a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

استخدمنا (float) : لجعل عناصر الكتلة (block) تنزلق بجانب بعضها البعض
استخدمنا (display: block) ؛ - يؤدي عرض الروابط كعناصر كتلة إلى جعل منطقة الارتباط <a> بأكملها قابلة للنقر (وليس النص فقط)
استخدمنا (padding: 8px;)؛ - نظرًا لأن عناصر الكتلة تشغل العرض الكامل المتاح ، فلا يمكن أن تظهر بجانب بعضها البعض. لذلك ، حدد بعض المساحة المتروكة لجعلها تبدو جيدة
لون الخلفية: (background-color) ؛ - أضف لون خلفية الذي تريده

إنشاء قائمة navbar باستخدام html + css

السؤال

Mari Carmen

رابط هذا التعليق

شارك على الشبكات الإجتماعية

5 أجوبة على هذا السؤال

Recommended Posts

رضوان نسيم

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Yomna Raouf

رابط هذا التعليق

شارك على الشبكات الإجتماعية

ياسين عناية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

ayoubridouani

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Omar Haddad2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية