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

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

درسنا التالي بسيط جدا وسهل ولكنه يضفي على مدونتك شكلا جماليا 

واحترافيه في الاداء تجعل زائرك يتعرف علي مدونتك من منظور احترافي

ويتعلق بها وبالتالي بك وبمقالاتك

درسنا يتعلق بقائمه عموديه تضع فيها ما تشاء من روابط

ولكنها ليست كاي قائمه اخرى سادع لك المثال يتحدث

تررى بموضوعنا هذا صورتين

الاولى صوره صغيره لشكل القائمه العموديه في وضعه الطبيعي

والصوره الاخرى ترى القائمه العموديه عند الضغط عليها

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

والاجمل من هذا انها خفيفه جدا ولا تؤثر علي سرعة مدونتك

الان ناتي الي التطبيق السهل

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>

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

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


هذا هو شكل القائمه العموديه عند الضغط عليها
بالتوفيق للجميع والي لقاء قادم مع درس جديد وحصري من دروس بلوجر

 

يسمح لكم بنقل الموضوع بشرط ذكر المصدر : حصريا قائمه عموديه فريده من نوعها بتقنية اشبه مايكون الي الاجاكس | TATWEERWEB

 

ساهم في نشر الموضوع ولك جزيل الشكر !

أضف تعليقك عن طريق الفيسبوك :

اضافات css