قائمة منبثقة بواسطة – Pop-Up Navigation – CSS

Hady Mohamed مايو 10, 2012

قائمة منبثقة بواسطة – Pop-Up Navigation – CSS
السلام عليكم
كيف الحال أخوتي و أخواتي زوار المدونة الكرام اليوم قررت أن أضع لكم كيفية إنشاء قائمة أفقية بإستعمال CSS و HTML , هي عبارة عن قائمة بسيطة. عملها أنه عند مرور الماوس من فوق أحد الأيقونات تظهر الأيقونة كاملة لاحظوا المثال :






لنبدأ على بركة الله
- أولا نقوم بانشاء مجلد تم نقوم بإنشاء ملفين واحد خاص بCSS و الأخر ب HTML
- تم نقوم بكتابه هذا الكود بصفحة الأندكس (وهي صفحة HTML )
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS Pop-Up navigation – www.anassq.eb2a.com – By Anass-Q</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”container”>
<ul>
<li><a href=”#” title=”PS”>PS</a></li>
<li><a href=”#” title=”DW”>DW</a></li>
<li><a href=”#” title=”ID”>ID</a></li>
<li><a href=”#” title=”AE”>AE</a></li>
<li><a href=”#” title=”AI”>AI</a></li>
<li><a href=”#” title=”FL”>FL</a></li>
</ul>
</div><!–container ends–>
</body>
</html>
الناتج :


هنا استعملنا ست أسماء خاصة بمنتجات أدوبي يمكنك إستعمال غيرها مثلا أن تقوم بإستعمال : الرئيسية – سجل الزوار – عن المدون – إعلاناتك في المدونة – راسلنا
و أن تقوم بتصميم هذه الأسماء في برنامج فوتوشوب على هذا الشكل:




و هنا نكون قد أنتهينا من ملف الأندكس الأن لننتقل الى ملف الستايل ونكتب الكود التالي:
body {
padding: 0px;
background-image: url(bg.png);
background-repeat: repeat-x;
background-color: #ECEBEC;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#container {
margin: auto;
width: 600px;
}
.navigation li {
float: left;
display: block;
list-style-type: none;
}
.navigation li a {
height: 53px;
width: 89px;
text-indent: -9999px;
display: block;
}
li.button1 {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: left top;
}
li.button2 {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: -89px top;
}
li.button3 {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: -166px top;
}
li.button4 {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: -249px top;
}
li.button5 {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: -334px top;
}
li.button6 {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: right top;
}
li.button1 a:hover {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: left bottom;
}
li.button2 a:hover {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: -89px bottom;
}
li.button3 a:hover {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: -166px bottom;
}
li.button4 a:hover {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: -249px bottom;
}
li.button5 a:hover {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: -334px bottom;
}
li.button6 a:hover {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: right bottom;
}

الناتج:





تصنيف
Reactions

إرسال تعليق

0 تعليقات