كود code القائمة الثابتة css fixed menu مميزة وسهلة التركيب install مع مثال

[admin]

السلام عليكم ورحمة الله
اصدقائي بديزاد باتنة اقدم لكم كود code مميز لقائمة افقية ثابتة وهي سهلة التركيب install
اولا اقدم لكم مثال على الرابط التالى mlwn.blogspot.com (http://mlwn.blogspot.com)
ثم ندخل على الكود code وطريقة تركيب installة
أولاََ ادخل على حسابك فى بلوجر » التخطيط » اضف اداة جديدة HTML/JavaScript
ضع الكود code التالى بعد اضافة الروابط وتعديل الروابط
رمز PHP:

<code style="white-space:nowrap"> <code> <style>
#wg-rosebar {
width:100%;
position:fixed;
top:0;
left:0;
}

#wg-rosebarbtm {
border-bottom:3px solid #000;
background-color:#7f103c;
overflow:none;
width:100%;
height:40px;
position:fixed;
top:0;
left:0;
}

#wg-rosebarbtmdata {
color:#fff;
padding:5px;
}

#wg-rosebarbtmhide {
position:absolute;
top:4px;
right:12px;
width:20px;
height:20px;
cursor:pointer;
}

#wg-rosebarbtmshow {
position:absolute;
top:0;
right:5px;
width:30px;
height:25px;
cursor:pointer;
background-color:#F60;
padding-top:5px;
border-bottom:3px solid #000;
border-left:3px solid #000;
border-right:3px solid #000;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}

.wg-rosebarbtmdownarrow {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #CC5200;
}

.wg-rosebarbtmblock {
width:8px;
height:10px;
background-color:#CC5200;
}

.wg-rosebarbtmuparrow {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #CC5200;
}
</style>
<div id="wg-rosebar" >
<div id="wg-rosebarbtm" >
<style>

.wg-ribmenu span {
background:#7f103c;
display:inline-block;
color:#FFFFFF;





line-height:40px;
padding:0 1em;
margin-top:0.0em;
position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
.wg-ribmenu a:hover span {
background:#FFD204;
margin-top:0;

}
.wg-ribmenu span:before {
content: "";
position:absolute;
top:40px;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #7f103c;
}

.wg-ribmenu span:after {
content: "";
position:absolute;
top:40px;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #7f103c;
}
.wg-ribmenu a:link, .wg-ribmenu a:visited {
color:#000;
text-decoration:none;
float:right;
height:40px;
overflow:hidden;
}

</style>

<div class='wg-ribmenu'>
<a href='/index.html'><span><img src="http://i.imm.io/1759N.png"/></span></a>
<a href='رابط1'><span>قسم1</span></a>
<a href='رابط2'><span>قسم2</span></a>
<a href='رابط3'><span>قسم3</span></a>
<a href='رابط4'><span>قسم4</span></a>
<a href='رابط5'><span>قسم5</span></a>
</div>

</div></div>
</code> </code>

لاضافة المزيد من الاقسام كرر الكود code التالى
رمز PHP:

<code style="white-space:nowrap"> <code> <a href='رابط'><span>قسم</span></a>
</code> </code>







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