حصريا قائمه عموديه فريده من نوعها بتقنية اشبه مايكون الي الاجاكس

حصريا قائمه عموديه فريده من نوعها بتقنية اشبه مايكون الي الاجاكس
درسنا التالي بسيط جدا وسهل ولكنه يضفي على مدونتك شكلا جماليا 
واحترافيه في الاداء تجعل زائرك يتعرف علي مدونتك من منظور احترافي
ويتعلق بها وبالتالي بك وبمقالاتك
درسنا يتعلق بقائمه عموديه تضع فيها ما تشاء من روابط
ولكنها ليست كاي قائمه اخرى سادع لك المثال يتحدث
تررى بموضوعنا هذا صورتين
الاولى صوره صغيره لشكل القائمه العموديه في وضعه الطبيعي
والصوره الاخرى ترى القائمه العموديه عند الضغط عليها
فانت عزيزي المدون حين تقوم بالضغط عليها تصبح كانها قائمه منسدله وتتحرك بشكل جمالي
والاجمل من هذا انها خفيفه جدا ولا تؤثر علي سرعة مدونتك
الان ناتي الي التطبيق السهل
1.سجل الدخول الي لوحة تحكم مدونتك--> ثم الي تصميم- -> ثم الي تحرير HTML
ابحث عن هذا الكود]]></b:skin>

ضع قبله الكود الذي بالاسفل

.leftCol {
width: 295px;
overflow: hidden;
padding: 15px 0px 0px 0px;
margin: 0px 25px 0px 0px;
float: left;
clear: both;
}
.leftBoxHeading_Off {
width: 295px;
height: 19px;
background: url(images/left-box-heading-off.png) no-repeat;
color: #94c93d;
font-size: 100%;
padding: 8px 0px 0px 18px;
cursor: pointer;
}
.leftBoxExpander {
width: 295px;
overflow: hidden;
height: 0px;
background: url(images/left-box-expander-bg.png);
}
.leftBoxInnerPic {
width: 287px;
overflow: hidden;
background: url(images/left-box-inner-bg.png) bottom repeat-x;
margin: 0px 0px 0px 1px;
}
.leftBoxInnerPicImg {
width: 89px;
overflow: hidden;
float: left;
padding: 0px 0px 0px 18px;
}
.leftBoxInnerPicUlWrap {
width: 167px;
overflow: hidden;
float: left;
}
.leftBoxInnerPic ul {
width: 138px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 9px;
list-style: none;
}
.leftBoxInnerPic ul li {
color: #6699cc;
font-size: 110%;
width: 266px;
}
.leftBoxInnerPic ul li a {
color: #6699cc;
text-decoration: none;
display: block;
padding: 3px 0px 3px 20px;
}
.leftBoxInnerPic ul li a:hover {
color: #6699cc;
}
.leftBoxHeading_Off {
width: 295px;
height: 19px;
background: url(images/left-box-heading-off.png) no-repeat;
color: #6699cc;
font-size: 110%;
padding: 8px 0px 0px 18px;
cursor: pointer;
}
.leftBoxHeading_On {
width: 295px;
height: 19px;
background: url(images/left-box-heading-on.png) no-repeat;
color: #6699cc;
font-size: 110%;
padding: 8px 0px 0px 18px;
cursor: pointer;
}
.leftBoxFooter_Off {
width: 295px;
height: 12px;
background: url(images/left-box-footer-off.png) no-repeat;
cursor: pointer;
margin: 0px 0px 15px 0px;
}
.leftBoxFooter_On {
width: 295px;
height: 12px;
background: url(images/left-box-footer-on.png) no-repeat;
cursor: pointer;
margin: 0px 0px 15px 0px;
}
.leftBoxExpander {
width: 295px;
overflow: hidden;
height: 0px;
background: url(images/left-box-expander-bg.png);
}
.leftBoxInner {
width: 287px;
overflow: hidden;
margin: 0px 0px 0px 1px;
}
.leftBoxInner ul {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 9px;
list-style:none;
}
.leftBoxInner ul li {
color: #6699cc;
font-size: 75%;
width: 266px;
}
.leftBoxInner ul li a {
text-decoration: none;
display: block;
padding: 3px 0px 3px 20px;
}
.leftBoxInner ul li a:hover {
color: #6699cc;
}
.leftBoxInnerPic {
width: 287px;
overflow: hidden;
background: url(images/left-box-inner-bg.png) bottom repeat-x;
margin: 0px 0px 0px 1px;
}

4.ثم قم بالبحث ثانيه عن هذا الكود </head>

وضع قبله الكود التالي بالاسفل
<script type="text/javascript" src="Javascripts/yahoo-dom-event.js"></script>
<script type="text/javascript" src="Javascripts/animation-min.js"></script>
<script type="text/javascript" src="Javascripts/main-javascript.js"></script>

قم الان بحفظ قالب مدونتك

7.الان اذهب الي عناصر الصفحه- -> قم باختيار اداه جديده وحدد مكان الاداه اين تريد ان تكون القائمه العموديه".

8. طبعا الاداه الجديد ستكون من نوع.
 html /JavaScript"
<div id="Layer1">
<div class="leftCol">
<div id="lhsHeader6" class="leftBoxHeading_Off" onclick="lhsAction('6',true,'T6_Effective_Behaviour_Change');">CSS Expandable Button</div>
<div id="lhsExpander6" class="leftBoxExpander">
<div id="lhsInner6" class="leftBoxInnerPic"> <img src="images/left-box-inner-img.png" alt="Left image" height="18" width="287" />
      <ul>
        <li><a href="">add your link here</a></li>
        <li><a href="">add your link here</a></li>
        <li><a href="">add your link here</a></li>
        <li><a href="">add your link here</a></li>
        <li><a href="">add your link here</a></li>
        <li><a href="">add your link here</a></li>
        <li><a href="">add your link here</a></li>
      </ul>
</div>
</div>
<div id="lhsFooter6" class="leftBoxFooter_Off" onclick="lhsAction('6',true,'false');"></div>
</div>
</div>
</div>

بعد ان تضع فيها الكود الذي بالاعلى قم بحفظ الاداه

هذه شكل الاضافه في وضعها الطبيعي


هذا هو شكل القائمه العموديه عند الضغط عليها
undefinedبالتوفيق للجميع والي لقاء قادم مع درس جديد وحصري من دروس بلوجر
أصدقاء(تطوير ويب)
تعليقات Facebook
5تعليقات Blogger

5 عدد التعليقات على موضوع حصريا قائمه عموديه فريده من نوعها بتقنية اشبه مايكون الي الاجاكس

محمد ثروت يقول...

بسم الله ما شاء الله عليك المدونة باين عليها مايئة بالمعلومات الهامة أنا أخذت نصف ساعة وأنا بأتصفح المدونة بتاعتك الموضوعات فى غاية الروعة
مزيد من التقدم
مدونتى الأخبارية الشاملة
http://ouoonelsaeed.blogspot.com

غير معرف يقول...

@محمد ثروت
كلامك وسام شرف للمدونه يااستاذ محمد
وكذلك مدونتك غايه في الجمال ساكون من متابعيها بكل تاكيد ان شاء الله

برق الشوق يقول...

مشكور اخ احمد لكن عند حفض التطبيق طلع لي خطاء الي هو هذا

حدث خطأ أثناء تحليل XML، في السطر 1489، العمود 3: The end-tag for element type "script" must end with a '>' delimiter.

Cars يقول...

شكرا اخى على الشرح بس للأسف طبقتها وماشتغلتش

tqarb يقول...

اعتذر لك اخي العزيز فالشرح قديم وتم فقد احد ملفات الجافا سكربت وجاري البحث عنه

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .