:: عضو جديد ::
بيانات موقعي
بسم الله الرحمن الرحيم
الناتج
-------------------------------
للمعاينة المباشرة
من هنا
=========================
فكرة القائمة تنفيذا لطلب العضو
أبومازن
اقتباس
لو كل واحده بلون مختلف كانت اصبحت اجمل
لمشاهدة الموضوع القديم من هنا
=========================
طريقة التركيب
تحميل الملف من المرفقات او من هنا
رفع ملف images الي ملف المنتدي (vb )
رفع ملف js الي ملف المنتدي (vb )
اضافة الاكواد الاتية :
اضافة الكود التالي في نهاية قالب الهيدر
رمز PHP:
< ul id = "navigation" >
< li class= "home" >< a href = "http://www.facebook.com/" title = "Facebook" ></ a ></ li >
</ ul >
< ul id = "navigation2" >
< li class= "about" >< a href = "http://twitter.com/" title = "Twitter" ></ a ></ li >
</ ul >
< ul id = "navigation3" >
< li class= "search" >< a href = "http://www.youtube.com/" title = "Youtube" ></ a ></ li >
</ ul >
< ul id = "navigation4" >
< li class= "search" >< a href = "#" title = "Rss" ></ a ></ li >
</ ul >
=========================
اضافة الكود التالي في نهاية قالب headinclude
رمز PHP:
< script type = "text/javascript" src = "js /jquery-1.3.2.js " > </script>
<script type="text/javascript">
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>
<script type="text/javascript">
$(function() {
$('#navigation2 a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation2 > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>
<script type="text/javascript">
$(function() {
$('#navigation3 a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation3 > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>
<script type="text/javascript">
$(function() {
$('#navigation4 a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation4 > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>
=========================
اضافة الكود التالي في Additional CSS Definitions
رمز PHP:
#container_buttons{
width : 400px ;
margin : 0 auto ;
background : rgba ( 255 , 255 , 255 , 0.3 );
padding : 60px 60px 30px ;
border - radius : 20px ;
box - shadow : 4px 4px 4px rgba ( 0 , 0 , 0 , 0.09 ) inset ;
}
#container_buttons p{
display : block ;
padding - bottom : 60px ;
}
ul #navigation {
position : fixed ;
margin : 0px ;
padding : 0px ;
top : 10px ;
left : 0px ;
list- style : none ;
z - index : 9999 ;
}
ul #navigation li {
width : 100px ;
}
ul #navigation li a {
display : block ;
margin - left : - 2px ;
width : 100px ;
height : 70px ;
background - color : #39599f;
background - repeat : no - repeat ;
background - position : center center ;
}
ul #navigation .home a{
background - image : url ( images / facebook . png );
}
ul #navigation .search a {
background - image : url ( images / search . png );
}
ul #navigation .podcasts a {
background - image : url ( images / ipod . png );
}
ul #navigation .rssfeed a {
background - image : url ( images / rss . png );
}
ul #navigation .photos a {
background - image : url ( images / camera . png );
}
ul #navigation .contact a {
background - image : url ( images / mail . png );
}
#container_buttons2{
width : 400px ;
margin : auto ;
background : rgba ( 255 , 255 , 255 , 0.3 );
padding : 60px 60px 30px ;
border - radius : 20px ;
box - shadow : 4px 4px 4px rgba ( 0 , 0 , 0 , 0.09 ) inset ;
}
#container_buttons2 p{
display : block ;
padding - bottom : 200px ;
}
ul #navigation2 {
position : fixed ;
margin : 0px ;
padding : 0px ;
top : 83px ;
left : 0px ;
list- style : none ;
z - index : 9999 ;
}
ul #navigation2 li {
width : 100px ;
}
ul #navigation2 li a {
display : block ;
margin - left : - 2px ;
width : 100px ;
height : 70px ;
background - color : #45b0e3;
background - repeat : no - repeat ;
background - position : center center ;
}
ul #navigation2 .about a {
background - image : url ( images / twitter . png );
}
#container_buttons3{
width : 400px ;
margin : auto ;
background : rgba ( 255 , 255 , 255 , 0.3 );
padding : 60px 60px 30px ;
border - radius : 20px ;
box - shadow : 4px 4px 4px rgba ( 0 , 0 , 0 , 0.09 ) inset ;
}
#container_buttons3 p{
display : block ;
padding - bottom : 200px ;
}
ul #navigation3 {
position : fixed ;
margin : 0px ;
padding : 0px ;
top : 156px ;
left : 0px ;
list- style : none ;
z - index : 9999 ;
}
ul #navigation3 li {
width : 100px ;
}
ul #navigation3 li a {
display : block ;
margin - left : - 2px ;
width : 100px ;
height : 70px ;
background - color : #e70031;
background - repeat : no - repeat ;
background - position : center center ;
}
ul #navigation3 .search a {
background - image : url ( images / you_tube . png );
}
#container_buttons4{
width : 400px ;
margin : auto ;
background : rgba ( 255 , 255 , 255 , 0.3 );
padding : 60px 60px 30px ;
border - radius : 20px ;
box - shadow : 4px 4px 4px rgba ( 0 , 0 , 0 , 0.09 ) inset ;
}
#container_buttons4 p{
display : block ;
padding - bottom : 200px ;
}
ul #navigation4 {
position : fixed ;
margin : 0px ;
padding : 0px ;
top : 229px ;
left : 0px ;
list- style : none ;
z - index : 9999 ;
}
ul #navigation4 li {
width : 100px ;
}
ul #navigation4 li a {
display : block ;
margin - left : - 2px ;
width : 100px ;
height : 70px ;
background - color : #f8bc2e;
background - repeat : no - repeat ;
background - position : center center ;
}
ul #navigation4 .search a {
background - image : url ( images / rss2 . png );
}
=========================
اتمني تعجبكم القائمة واي حد يريد تعديلات في الروابط او الايقونات انا موجود
توقيع hostusite.com
اسم الشركة : مؤسسة استضف موقعك
صاحب الشركة : احمد طارق
خدمات الشركة : استضافة - ريسلير - سيرفير VBS - ارشفة - دعم فني - تصميم
مقر الشركة : مصر - الاسكندرية - العجمي - ابو يوسف
هاتف الشركة : 02/0119962742
بريد الشركة : hostusite
yahoo.com
رابط الشركة :
www.hostusite.com