ميز موقعك بقائمة جانبية للمواقع الاجنماعية والروابط المهمة Css & JQuery & Java

[romaissa]

http://www.dzbatna.com/images/icons/smile.gif ظ…ظٹط² ظ…ظˆظ‚ط¹ظƒ ط¨ظ‚ط§ط¦ظ…ط© ط¬ط§ظ†ط¨ظٹط© ظ„ظ„ظ…ظˆط§ظ‚ط¹ ط§ظ„ط§ط¬ظ†ظ…ط§ط¹ظٹط© ظˆط§ظ„ط±ظˆط§ط¨ط· ط§ظ„ظ…ظ‡ظ…ط© Css & JQuery & Java (http://www.dzbatna.com/t2039757/)



بسم الله الرحمن الرحيم
http://im20.gulfup.com/2014-02-12/1329073907371.png
الناتج
-------------------------------
للمعاينة المباشرة
من هنا (http://www.maka-mokrama.com/Menu2.html)
=========================
http://www.dzbatna.com/attachment.php?attachmentid=629269&stc=1&d=1329175169



فكرة القائمة تنفيذا لطلب العضو أبومازن (http://www.dzbatna.com/u90134/)

اقتباس
لو كل واحده بلون مختلف كانت اصبحت اجمل



لمشاهدة الموضوع القديم من هنا (http://www.dzbatna.com/t2038992/)


=========================


طريقة التركيب install
تحميل الملف من المرفقات او من هنا (http://www.dzbatna.com/attachment.php?attachmentid=629277&stc=1&d=1329177360)
رفع ملف images الي ملف المنتدي (vb)
رفع ملف js الي ملف المنتدي (vb)
اضافة الاكواد الاتية :

اضافة الكود code التالي في نهاية قالب template الهيدر header

رمز PHP:

<code style="white-space:nowrap"> <code> <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>
</code> </code>



=========================
اضافة الكود code التالي في نهاية قالب template headinclude



رمز PHP:

<code style="white-space:nowrap"> <code> <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>
</code> </code>




=========================

اضافة الكود code التالي في Additional CSS Definitions

رمز PHP:

<code style="white-space:nowrap"> <code> #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);
}
</code> </code>

=========================
اتمني تعجبكم القائمة واي حد يريد تعديلات في الروابط او الايقونات انا موجود
http://im20.gulfup.com/2014-02-12/1329073907371.png














ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)

الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif Navigation Media by hostusite.zip (http://www.traidnt.net/vb/attachments/629371d1329227909-navigation-media-hostusite.zip) (260.9 كيلوبايت, عدد مرات المشاهدة 150 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©