بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته،،
هذا درس بسيط لانشاء قائمة رائعة بالجاكوري
صورة للقائمة :
الدرس :
السلام عليكم ورحمة الله وبركاته،،
هذا درس بسيط لانشاء قائمة رائعة بالجاكوري
صورة للقائمة :
الدرس :
1- ملف HTML
اولا انشيء صفحة HTML فارغة باستعمال الكود التالي
CODE
<!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-**="Content-Type" content="text/html; charset=utf-8" />
<title>قائمة jquery</title>
</head>
<body>
</body></html>2-ملف css
محتوى الملف
محتوى الملف
CODE
/* الانماط الكاملة للقائمة */ .gs-menu {
position: relative;
height: 29px;
width: 421px;
background-color: white;
padding: 15px;
margin: 10px 0;
overflow: hidden;
border: 1px solid gray;
}
/* قوة التدفق افقيا */ .gs-menu li {
float: right;
list-style: none;
}
.gs-menu li.back {
border: 1px solid #000;
background-color: #e6e8ea;
width:
9px;
height: 30px;
z-index: 8;
position: absolute;
}
/* التمثيلات و خلفية القائمة */ .gs-menu li a {
font: bold 14px arial;
text-decoration: none;
color: #000;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: right;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.gs-menu li a:hover, .gs-menu li a:active, .gs-menu li a:visited {
border: none; }
3- اكواد Javascript
ادخل هذه الاكواد بين وسمي <head> في ملفHTML
CODE
<link rel="stylesheet" href="gs-menu.css" type="text/css" media="screen">
<script type="text/javascript"
src="jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript"
src="jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
}); </script>4-ملفات jquery
حمل الملفات المرفقة و ارفقها مع مجلد القائمة (jquery.zip)
الملفات الكاملة للقائمة ايضا مرفقة (gs-menu.zip)