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

السلام عليكم ورحمة الله
اصدقائي بترايدنت اقدم لكم كود مميز لقائمة افقية ثابتة وهي سهلة التركيب
اولا اقدم لكم مثال على الرابط التالى blogeinter.blogspot.com

ثم ندخل على الكود وطريقة تركيبة
أولاََ ادخل على حسابك فى بلوجر » التخطيط » اضف اداة جديدة HTML/JavaScript
ضع الكود التالى بعد اضافة الروابط وتعديل الروابط

رمز PHP:

<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>  

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

رمز PHP:

        <a href='رابط'><span>قسم</span></a>  

يمكنكم  تغيير الخلفية للقائمة  بتغير الكود #7f103c للبحت عنه اعما الاتي ctrl +f 

الالوان : .................

الاحمر   : FF0000#

الاخضر  : 009900#

الاصفر  : FFFF00#

الازرق  : 0000CC#

او حسب ارادتك من هنا مولد أكواد الألوان الفلاشى بلغة HTML

و كلمة شكر تكفي في موضوع اخر 

هشام ابرشى

اسمي هشام : من المملكة المغربية , اهتم بتقنيات الموقع ومواكبة كل ماهو جديد في عالم التقنيه , انقل قالبا ما اراه مفيد ومناسب للزوار , وايضا اطرح المواضيع الحصريه والمفيده للكل بأذن الله ..