عمل قائمة افقية وايضا رأسية جميلة بواسطة CSS و HTML ، طبعا القوائم لها اهمية كبيرة في تصميم المواقع وتساعد الزوار بتصفح اقسام موقعك بسهولة ويبقية مدة اطول لقراءة مواضيع موقعك وهذا مثال مبسط لعمل قائمة افقية وبنفس الوقت رأسية ويمكنك اضافتها لموقعك والتعديل عليها بسهولة وايضا يمكنك الرجوع الى دروس CSS اذا لم تكن لديك خلفية فيها وللانتقال لدروس CSS من هنا: شرح لغة CSS الدرس الاول
شرح لغة CSS الدرس الثاني
وهذا المثال يمكنك نسخة وحفظة بملف امتداده html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<style type="text/css">
body{
direction:rtl;
}
.menu{
 background:#f8f8f8; width:200px;
 margin-right:41px;
 }
.menu ul{
 list-style:none;padding:0px;margin:0px;
 }
.menu ul li{}
.menu ul li a{
 text-decoration:none;text-align:center;
 background:#eee;
    border-bottom:1px solid #ccc; 
    width:auto;display:block;
 color:#333;
    padding:4px;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
 font-style:!important;
 }
.menu ul li a:hover{
 background:#545461;border-bottom:1px solid #f80; 
 color:#FF0;
 }
.navbar{
 width:100%; height:30px;border-top-right-radius:5px;
 border-top-left-radius:5px;
 margin-right:0px;
 }
.navbar ul{
 list-style:none; background:#CCC; margin-right:0px;
 }
.navbar ul li{
 float:right; margin-right:1px;
 padding:0px;border-top-right-radius:5px;
 border-top-left-radius:5px;}
.navbar ul li a{
 color:#Fff;text-decoration:none;padding:0px;
    font-family:"Times New Roman", Times, serif;
    background:#3E7B7B;font-style:oblique; padding:2px;
 width:100px; display:block; text-align:center ;
    border-top-right-radius:5px; border-top-left-radius:5px;
    line-height:25px; border-bottom:1px solid #275050;}

.navbar ul li a:hover{
 background:#478D8D;
 color:#333;border-bottom:1px solid #0F0;
 }
</style>
</head>
  
<body>

<div class="navbar">
<ul>
<li><a href="#" >تطوير الويب</a></li>
<li><a href="#" >سي شارب</a></li>
<li><a href="#" >صيانة</a></li>
<li><a href="#" >برمجة الاندرويد</a></li>
<li><a href="#" >شبكات</a></li>
<li><a href="#" >برامج</a></li>
<li><a href="#" >امن معلومات</a></li>
<li><a href="#" >منتجاتي</a></li>
</ul>
</div>
<div class="menu">
<ul>
<li><a href="#" >تطوير الويب</a></li>
<li><a href="#" >سي شارب</a></li>
<li><a href="#" >صيانة</a></li>
<li><a href="#" >برمجة الاندرويد</a></li>
<li><a href="#" >شبكات</a></li>
<li><a href="#" >برامج</a></li>
<li><a href="#" >امن معلومات</a></li>
<li><a href="#" >منتجاتي</a></li>
</ul>
</div>
</body>
</html>

 مثال اخر لتصميم قائمة افقية شفافة.

تصميم قائمة افقية شفافة بـواسطة CSS
اكواد CSS :
.nav{
background: rgba(255,255,255,0.8);
height:55px;
width:100%;
position:relative;
}
.nav ul{list-style: none;}
.nav ul li{
float: right;
position: relative;
}
.nav ul li a{
color:#666;
line-height: 55px;
font-family:  arial,tahoma;
font-size: 17px;
padding-right: 20px;
padding-left: 20px;
text-align: center;
display: block;
text-decoration:none;
font-weight:bold;
-moz-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;
}

.nav ul li a:hover{
color:#000;
}


اكواد HTML :
<div class="nav">
<ul>
<li><a href="#"> الرئيسية</a></li>
<li><a href="#"> تصميم</a></li>
<li><a href="#"> برمجة</a></li>
<li><a href="#"> اندرويد</a></li>
<li><a href="#">برامج </a></li>
<li><a href="#"> مقالات</a></li>
<li><a href="#">شبكات</a></li>
</ul>
</div>

كانت هذه امثلة لتصميم القوائم بواسطة CSS ، طبعا هذا يعتبر درس مكمل لدروس لغة CSS كمثال ، واي استفسار حول التعديل حول الدرس اتركه في تعليق.
مواضيع ذات صلة
2 اترك تعليقاً...
  1. احببت القائمة الشفافة اشكرك صديقي

    ردحذف
    الردود
    1. العفو ، تشكر على مرورك الطيب.

      حذف