-->

الأربعاء، 16 مارس، 2011

إضافة قائمه أفقيه لصفحات المدونه بتأثيرات 3D

بسم الله والحمد لله
القائمه الأفقيه أو الصفحات وهى طبعا التى تشتمل على الرئيسيه وباقى الأقسام وموضوعنا اليوم عن إنشاء قائمه أفقيه بتأثير ثلاثى الأبعاد
يعطى مظهرا رائع لمدونتك بشكلين متوافقين بإذن الله مع جميع ألوان القوالب وطريقة إضافته سهله جدا إتبع الأتى
- إذهب إلى مدونتك بلوجر
- التصميم >> تحرير HTML
- ضع علامه فى خانة توسيع القالب
- إبحث عن الكود التالى 
</head>
ثم قبله مباشرة ضع الكود التالى
<style type='text/css'>
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 99%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}

ul#topnav.v2 span{
background: url(http://4.bp.blogspot.com/_Uewx15poqQo/TUDhBzVxDgI/AAAAAAAAA6Q/RZoiKGBU85E/s1600/a_bg.gif) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(http://4.bp.blogspot.com/_Uewx15poqQo/TUDhBzVxDgI/AAAAAAAAA6Q/RZoiKGBU85E/s1600/a_bg.gif) repeat-x left bottom;
}
</style>
<script src='http://yourjavascript.com/20561118251/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>


$(document).ready(function() {


$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag

$(&quot;#topnav li&quot;).each(function() { //For each list item...
var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag
$(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag
});

$(&quot;#topnav li&quot;).hover(function() { //On hover...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;0&quot; //Move the span back to its original state (0px)
}, 250);
});


});
</script>
ثم إحفظ القالب
* وإذهب إلى التصميم -> عناصر الصفحه -> HTML Javascribt*والأن إنسخ كود الشكل الذى تفضله وضعه به
شكل 1
<div class="container">

<ul id="topnav" class="v2">

<li><a href="http://hend-moments.blogspot.com">Home</a></li>
<li><a href="#">TOC</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact</a></li>

</ul>

</div>

شكل 2
<div class="container">

<ul id="topnav">

<li><a href="http://hend-moments.blogspot.com">Home</a></li>
<li><a href="#">TOC</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact</a></li>

</ul>

</div>
ملحوظه -*- غير الأسماء بما تشاء و علامة الشباك باللينكات وأحفظ وإنقل الأداه الى أسفل الهيدر
أى إستفسار أنا فى الخدمه للمعاينه 

abuiyad

0 التعليقات:

أضف تعليق

عبر عن رأيك بدون تسجيل دخول

كن على إتصال

Best Blogger Tips
Blogger Gadgets