لن أطيل عليكم أحبائي الكرام فقط اردت أن ارضي جميع الأذواق في القوائم المنسدلة .ومازلت تتوالي القوائم المنسدلة بإشكال اروع وادق
وهذا مثال عليها
لوريتها علي الواقع
1- إضافة كود CSS الخاص بالقائمة المنسدلة
سجل الدخول لمدونتك / تصميم / تحرير HTML / ثم قم بالبحث عن الكود التالي
]]></b:skin>
و قبله مباشرة قم بإضافة هذا الكود
.menubar{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menubar ul{
background-color: #ddd;
height:50px;
list-style:none;
margin:0;
padding:0;
}
.menubar li{
float:right;
padding:0px;
}
.menubar li a{
background-color: #ddd;
color:#000;
display:block;
font-weight:normal;
line-height:50px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
font-family: arial;
font-size: 17px;
font-weight: bold;
}
.menubar li a:hover, .menubar ul li:hover a{
background-color: #000;
color:#FFFFFF;
text-decoration:none;
}
.menubar li ul{
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:200px;
z-index:200;
}
.menubar li:hover ul{
display:block;
}
.menubar li li {
background-color: #000;
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menubar li:hover li a{
background:none;
}
.menubar li ul a{
display:block;
height:50px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:right;
font-family: tahoma;
font-size: 11px;
font-weight: bold;
border-bottom: 1px solid #252525;
}
.menubar li ul a:hover, .menubar li ul li:hover a{
background-color: #FF0098;
border:0px;
color:#ffffff;
text-decoration:none;
}
الأن مع المرحلة الأخيرة لإكمال هذه الإضافة الرائعة
توجه الأن إلى تصميم / عناصر الصفحة / إضافة أداة / HTML/JavaScript
أترك مكان العنوان فارغ و ضع الكود في المربع الكبير
الأن قم بإضافة الكود التالي للأداة
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="rtl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>قائمة منسدلة CSS</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<br>
<br>
<div class="menubar">
<ul>
<li><a href="#" >الرئيسية</a></li>
<li><a href="#" id="current">المنتجات</a>
<ul>
<li><a href="#">تصاميم الجرافيكس</a></li>
<li><a href="#">تصاميم الويب</a></li>
<li><a href="#">تصميم تطبيقات الويب</a></li>
<li><a href="#">تصميم الشعارات</a></li>
</ul>
</li>
<li><a href="/about.html">عن الموقع</a>
<ul>
<li><a href="#">متي نشأت</a></li>
<li><a href="#">العنوان</a></li>
<li><a href="#">خدمة العملاء</a></li>
</ul>
</li>
<li><a href="#">تواصل معنا</a></li>
</ul>
</div>
</body>
</html>
ولتحميل الأكواد لمن لا يستطيع النسخ أو لتجنب خطأ ما قد حدث وأنا أكتب الموضوع من هنا:
0 التعليقات