سجل الآن لاتفوت الفرصة .... الفرص محدودة

أكواد بلوجر : كود وطريقة انشاء قائمة منسدلة لممدونات بلوجر Drop down menu html code

    كود وطريقة انشاء قائمة منسدلة


    طريقة انشاء قائمة منزلقة ومن ثم قوائم أخرى فرعية - الطريقة بسيطة وسهلة جداً فقط نفذ مايلي !

    الطريقة :


    • في منطة الهيد بعد وسم <head> أو قبل <head/> ضع الكود التالي :



    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    Catatan : bagi anda yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah ini abaikan saja
    Tambahkan juga script berikut setelah script JQuery yadi
    <link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" /> <!--[if lte IE 7]>
    <style type="text/css">
    html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
    </style>
    <![endif]-->
    <script type="text/javascript" src="https://sites.google.com/site/bangkolis/javascript/maskolis.js"></script>



    • ابحث عن الكود التالي :



    ]]></b:skin>



    • وضع بعده مباشرة الأكواد التالية :



    .jqueryslidemenu{
    font: bold 12px Verdana;
    background: #414141;
    width: 100%;
    }
    .jqueryslidemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    /*Top level list items*/
    .jqueryslidemenu ul li{
    position: relative;
    display: inline;
    float: left;
    }
    /*Top level menu link items style*/
    .jqueryslidemenu ul li a{
    display: block;
    background: #414141; /*background of tabs (default state)*/
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #778;
    color: #2d2b2b;
    text-decoration: none;
    }
    * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;
    }
    .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
    color: white;
    }
    .jqueryslidemenu ul li a:hover{
    background: black; /*tab link background during hover state*/
    color: white;
    }
    /*1st sub level menu*/
    .jqueryslidemenu ul li ul{
    position: absolute;
    left: 0;
    display: block;
    visibility: hidden;
    }
    /*Sub level menu list items (undo style from Top level List Items)*/
    .jqueryslidemenu ul li ul li{
    display: list-item;
    float: none;
    }
    /*All subsequent sub menu levels vertical offset after 1st level sub menu */
    .jqueryslidemenu ul li ul li ul{
    top: 0;
    }
    /* Sub level menu links style */
    .jqueryslidemenu ul li ul li a{
    font: normal 13px Verdana;
    width: 160px; /*width of sub menus*/
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
    }
    .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
    background: #eff9ff;
    color: black;
    }
    /* ######### CSS classes applied to down and right arrow images ######### */
    .downarrowclass{
    position: absolute;
    top: 12px;
    right: 7px;
    }
    .rightarrowclass{
    position: absolute;
    top: 6px;
    right: 5px;
    }



    • وابحث عن الكود :


    <div id='header-wrapper'>



    • ثم ضع بعده الأكواد التالية : "اذا رغب في وضع القائمة في أعلى منطقة الهيدر"



    <div id="myslidemenu" class="jqueryslidemenu">
    <ul>
    <li><a href="http://ezzeldin-ahmed.blogspot.com/">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Folder 1</a>
    <ul>
    <li><a href="#">Sub Item 1.1</a></li>
    <li><a href="#">Sub Item 1.2</a></li>
    <li><a href="#">Sub Item 1.3</a></li>
    <li><a href="#">Sub Item 1.4</a></li>
    </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Folder 2</a>
    <ul>
    <li><a href="#">Sub Item 2.1</a></li>
    <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
    <ul>
    <li><a href="#">Sub Item 3.1.1.1</a></li>
    <li><a href="#">Sub Item 3.1.1.2</a></li>
    <li><a href="#">Sub Item 3.1.1.3</a></li>
    <li><a href="#">Sub Item 3.1.1.4</a></li>
    <li><a href="#">Sub Item 3.1.1.5</a></li>
    </ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="https://arabic-html.blogspot.com/">Item 4</a></li>
    </ul>
    <br style="clear: left" /> </div>



    • أو ضع الكود الاخير بعد :



    </div><!-- end header-wrapper -->



    وذلك لوضع القوائم أسفل منطقة الهيدر

    النهاية:
    - انتهت طريقة نشاء قوائم منسدلة لمدونة بلوجر نتمنى لكم الاستفادة منها .

    الدروس:

    ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
    شارك المقال

    مقالات متعلقة

    إرسال تعليق