تصميم قائمة افقية وايضا رأسية
تصميم قائمة افقية وايضا رأسية جميلة بواسطة CSS و HTML ، طبعا القوائم لها اهمية كبيرة في تصميم المواقع وتساعد الزوار بتصفح اقسام موقعك بسهولة ويبقية مدة اطول لقراءة مواضيع موقعك. وهذا مثال مبسط لعمل قائمة افقية وبنفس الوقت رأسية ويمكنك اضافتها لموقعك والتعديل عليها بسهولة وايضا يمكنك الرجوع الى دروس CSS اذا لم تكن لديك خلفية فيها وللانتقال لملخص CSS من هنا:
ملخص لغة CSS
وهذا المثال يمكنك نسخة وحفظة بملف امتداده html
اكواد CSS :
اكواد HTML :
كانت هذه امثلة لتصميم القوائم بواسطة 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
.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 كمثال عملي في تنسيق القوائم بواسطة CSS.
واي استفسار حول التعديل حول الدرس اتركه في تعليق.